Vue基础（2）

class,style绑定的几种写法:

			<!-- 对象 -->
			<div :class="{box1: true,box2:true}">22</div>
			<!-- 表达式 -->
			<div :class="true ? 'box1' : 'box2'">11</div>
			<!-- 数组语法 -->
			<div :class="[nowClass,nowClass1]">121</div>

			var vm = new Vue({
				el:'#app',
				data:{
					classs: 'box1',
					nowClass:{box1: true},
					nowClass1:{box2: true}
				}
			})

v-for列表渲染

<!-- v-for列表渲染数组或对象  item in list, (item,index) in list 得到索引-->
		<!-- for of 比for 循环性能好(循环数组和字符串,默认不能循环对象) 
			对象转换成数组 Object.values()属性值,Object.keys()属性名
			Object.entries()返回复合数组，属性名和属性值分别存在两个数组中
		-->
		<div id="app">
			<ul>
				<li  v-for="(item,index) in list">
					{{item}}--{{index+1}}
				</li>
				<li  v-for="(item,key,index) in obj">
					{{item}}--{{key}}--{{index}}
				</li>
			</ul>
		</div>
		<script>
			var vm = new Vue({
				el:'#app',
				data:{
					list: [111,222,333],
					obj:{
						name:'dg',
						age: 23,
						tall: 160
					}
				}
			})
		
		var objs = {
			name:'dg',
			age: 23,
			tall: 160
		}
		
		for(v of (Object.entries(objs))){
			console.log(v);
			console.log(v[0])
			console.log(v[1])
		}
		</script>

v-if,v-show
主要区别：v-show控制的是display属性，适合做频繁的隐藏显示操作，开销较小。 v-if决定是否在页面上加载，删除及创建会造成大量开销， 不适合频繁使用。v-if比v-show功能强大,可以和v-else 配合(必须紧挨)

template是vue自带标签,用于显示html结构，但是不会被渲染,充当容器 ，占位标签，不会在页面上渲染。

v-model双向绑定，以及watch监听
computer相对watch简单使用简单

				computed:{
					sum : function(){
						return this.x+this.y;
					}
				},
				//watch 分别监听x和y 根据值的变化进行执行 
				//相对computed较复杂
				//watch比较适合做异步操作,computed不太适合异步(计算熟悉是立即执行)
				watch:{
					x(a,b){
						this.z = a + this.y
					},
					y(a,b){
						this.z = a + this.x
					}
				}

@click=事件触发，加括号和不加括号的区别加括号得不到event对象，不加可以得到的解决方法 @click="events($event)。