<script src='https://unpkg.com/vue@2.1.10/dist/vue.js'></script>
<!--vue的方法进行绑定-->
<div id="app">
<button v-on:click="alert">alert</button>
</div>
<script>
var action=new Vue({
	el:'#app',
	methods:{
		alert:function(){
			alert('nice');
		}
	}
});
</script>
<!--在js里面直接 出发vue内部的组件-->
<script>
	var myEvent=new Vue({
		events:{
			"event.alert":function(){
				alert('event');
			}
		}
	});
//	myEvent.$emit("event.alert");
</script>
<!--本例子用于属性的合并computed对data数据进行处理-->
<div id="app2">
	{{firstName}},{{lastName}},{{fullName}}
</div>
<script>
var vm2=new Vue({
	el:'#app2',
	data:{
		firstName:'firstName',
		lastName:'lastName'
	},
	computed:{
		fullName:function(){
			return '合并的名字是：'+this.firstName+this.lastName;
		}
	}
});

</script>
<!--computed具体分出set或者get-->
<div id="app3">
	{{shopPrice}},{{price}}
</div>
<script>
var vm3=new Vue({
	el:'#app3',
	data:{
		shopPrice:100
	},
	computed:{
		price:{
			set:function(newValue){
				this.shopPrice=newValue*100;
			},
			get:function(){
				return (this.shopPrice/100).toFixed(2);
			}
		}
	}
});
vm3.shopPrice=200;
</script>
<!--单选框数据绑定测试-->
<div id="theRadio" >
	<input type="radio" name="sex" value="包一" v-model="sex" />包一&nbsp;
	<input type="radio" name="sex" value="包二" v-model="sex" />包二
	<div>投标类别是：{{sex}}</div>
	<div>
	<input type="checkbox" value="1" v-model="mulcheck" />篮球&nbsp;
	<input type="checkbox" value="2" v-model="mulcheck" />足球&nbsp;
	<input type="checkbox" value="3" v-model="mulcheck" />排球&nbsp;
	选中的项目是：{{mulcheck.join('|')}}
	</div>
	<div>
	<select v-model="select" >
		<option value="A">A</option>
		<option value="B">B</option>
		<option value="C">C</option>
	</select>
	下拉框选中的项目是：{{select}}
	</div>
</div>
<script>
var theRadio=new Vue({
	el:'#theRadio',
	data:{
		sex:'',
		mulcheck:[],
		select:'A',
		selected:'selected'
	}
});
</script>
<!--通过v-bind进行操作可以方便的把值赋值给任意一个属性-->
<div id="app4">
	<img :src="avatar" />
</div>
<script>
var vm4=new Vue({
	el:'#app4',
	data:{
		avatar:'xxxx.png'
	}
});
</script>
<!--v-model在表单的一些参数操作-->
<div id="app5">
年龄是：	<input type="number" v-model.number="age" />
姓名是：	<input type="text" v-model.trim="name" />
年龄:{{age}},姓名：{{name}}
</div>
<script>
var vm5=new Vue({
	el:'#app5',
	data:{
		age:'',
		name:''
	}
});
</script>