Vue

Vue
	是什么
		Vue是框架，MVVC的框架。简单说通过数据来改变视图的框架。数据驱动视图
	为什么
		不用再使用JQ来改变html的结构了。只需要改下数据，View会做出相应的改变。
	怎么做
		一个Vue对象绑定一个元素，所以html文档中可以有多个Vue对象。
		Vue对象怎么绑定元素
			el:"#app"
		Vue对象中的数据放在哪里
			data:{
				age:18,//数据可以有变量，数组，对象
				arr:[
					{name:"zss"},
					{name:"zll"}
				],
				student:{
					name:"zhangsan",
					age:18
				}
			}
		
		html怎么引用Vue对象中的数据,元素开始标签中写上V指令
			<div id="app">
				{{a}}
			</div>
			html中元素的内容用{{}}括起来，浏览器加载html时，会从绑定该元素的Vue对象中找data对象。数据放在data对象中。data对象可以是属性形式，也可以是函数（因为函数也是对象）
			{{}}里面可以是变量或表达式：
				{{a+b}}
				{{5<4?"ok":"wrong"}}//wrong
				{{ {name:"zll"} }}//{name:"zll"}
				{{fn()}}//表达式的结果是函数调用后的返回值，表达式执行就是语句执行
			
			data对象是属性形式：
				data:{
					 name:"zss"
					}
			data对象是函数形式：
				data(){
					return {
						name:"zss"
					}
				}
			
	总结：
		vue对象包含所有数据，元素中的数据从vue对象中取，元素通过key从vue对象中取值

	
	Vue的指令：
		书写位置：写在开始标签中，浏览器解析后的html看不见
		v-text  把数据渲染在视图中  与{{}}作用类似 innerText
		v-html  把数据渲染在视图中 支持标签  innerHTML
		v-if/v-else 决定元素是否显示 true显示 false移除，不显示时html文档中没有该元素 
					包含v-if的元素和包含v-else的元素，是否显示是互斥的。一个显示了，另一个肯定不显示。
					v-if的值可以直接是true和false，也可以是变量,引用Vue中数据，<div v-if="true">if</div>  <div v-if="isShow">demo2</div>//isShow的值在Vue对象中
					原理： 依靠的是元素增加与删除  appendChild()/removeChild()     
		v-show  决定元素是否显示 true显示 false隐藏  ，不管显示不显示元素都在html中
				原理： 靠的是改变样式display:none 适用于频繁切换DOM元素
				<button v-on:click="fn">切换</button> //Vue方法里面的this指向Vue对象，this调用时才知道它指向谁，谁调用this指向谁，Vue监听事件，所以Vue调用事件处理函数
				methods:{
						fn(){
							console.log(this.isShow);//this 即Vue实例
							this.isShow=!this.isShow;
					}
				}
			
		v-for
			vue对象中可以包含数组，也可以包含对象
				<li v-for="(item,index) of arr">//遍历数组
				<li v-for="(value,key) in girl">//遍历对象
				
		v-bind  给元素绑定一个属性(自定义的属性或元素系统属性)，属性值从Vue对象中取，如果取不到则不显示该绑定的属性
				单向数据绑定
				<div v-bind:class="className2">1</div>//把引号中的内容当做一个表达式，表达式的结果为变量className2，以该变量为key从Vue对象中取值，如果取不到,则不显示该绑定的属性
				<div v-bind:class="'demo'"></div>//把引号中内容当做一个表达式，表达式的结果为‘demo’,所以浏览器加载html后为，<div v-bind:class="demo"></div>
				<div v-bind:class="{demo:false}">abcdefg</div>//当类名属性为true 表示应用该类样式 当类名属性为false 表示移除该样式
		v-model vue绑定元素的value，可以双向更改， 一般只用于表单控件 带有value属性的表单
				vue监听元素的input事件，一旦用户输入内容，vue调用事件处理函数，处理函数中可以传入一个e参数，e.target代表事件源，即元素     
				<input type="text" v-model="msg">
　　　　　　　　　　　　　　　　　v-model.number，自动将用户的输入值转为数值类型

事件：
　　　　　　　　　　v-on监听事件指令
　　　　　　　　　　　　　　v-on:click="clickHandler"
　　　　　　　　　　　　　　v-on是Vue指令，监听事件指令
　　　　　　　　　　　　　　v-on:click是Vue监听click事件
　　　　　　　　　　　　　　"clickHandler"：key，从Vue取数据时用的key

　　　　　　　　　　　　　　<!--v-on指令为元素绑定事件处理函数-->
　　　　　　　　　　　　　　<button v-on:click="clickHandler">点我</button>
　　　　　　　　　　　　　　<!--简写形式-->
　　　　　　　　　　　　　　<button @click="clickHandler2">点我</button>