Vue的实例，数据绑定和v-if,v-show,v-for

1. {{number}}：插值表达式，也就是把number的值插入到h1之中；
2. v-text="number"：h1的内容由number这个变量决定，v-text是Vue中的一个指令，这个指令里面的东西跟着的是一个变量，它告诉h1显示的内容就是"number"这个变量；
3. v-html="content"：v-html与v-text的区别是，v-html不会转义，而v-text会转译；
4. v-on:click="handleClick"：通过v-on给元素绑定一个Click事件，事件触发方法。
5. v-on:click的简写方法：@click
6. v-bind(缩写":")l:单项属性绑定；根据vue实例中data属性，与其中对象的key值相绑定，可修改相应属性的数据
7. v-model:双向绑定；div中某一个标签的值发生变化后，可以改变vue实例中data属性相应的对象值，反之相同；

<div id="root" v-on:click="heandleClick">{{texts}}</div>
		<script>
			new Vue({
				el:"#root",
				data:{
					texts:"hello world"
				},
				methods:{
					heandleClick:function(){
						this.texts="1234456"
					}
				}
			})
		</script>
		<div style="margin-top:10px;" id="roots">
				姓：<input v-model="fristName" />
			名：<input v-model="lastName"/>
			<div>{{fullName}}</div>
			<div>{{cont}}</div>
		</div>
		<script>
			new Vue({
				el:"#roots",
				data:{
					fristName:'',
					lastName:'',
					cont:0,
				},
				computed:{
					fullName:function(){
						return this.fristName+''+this.lastName
					},
				},
				watch:{
					fristName:function(){
						this.cont++
					},
					lastName:function(){
						this.cont++
					}
				}
			})
		</script>
		<div id="iffor">
			<div v-if="contif">hello world</div>
			<button @click="handleClick">隐藏</button>
			<ol>
				<li v-for="(item,index) of lasts" :key="index">{{item}}</li>
			</ol>
		</div>
		<script> 
			new Vue({
				el:"#iffor",
				data:{
					contif:true,
					lasts:[1,2,3,4,5]
				},
				methods:{
					handleClick:function(){
						this.contif=!this.contif;
					}
				}
			})
		</script>