vue的基础

1.双大括号表达式取值

<p>{{msg}}</p>

2.vue的指令

//1.解析成文本
<p v-text="msg"></p>
//2.解析成html代码
<p v-html="msg"></p>
//3.强制数据绑定v-bind:语法糖简写：
<p v-bind:src="imgUrl"></p>
<p :src='imgUrl'></p>
//4.绑定事件监听v-on:语法糖简写@
<p v-on:click="test"></p>
<p @click="test"></p>
//双向绑定v-model
<input v-model="firstName">
//5.条件渲染v-if,dom标签不展示
<p v-if="show"></p>
//6.v-show，通过style的display显示隐藏，当有大量的dom或操作时用v-show较好
<p v-show="show"></p>
//7.循环条件渲染
<p v-for="item in items" :key="item.id"></p>
//8.防止闪动 v-clock配合[v-clcok]:{display:'none'}
<div v-clock></div>
//9.enter事件简便写法
<input @keyup:enter="search" />

3.计算属性
在computed计算属性对象中定义计算属性的方法，要有返回值
计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值，这就意味着只要firstName还没有发生改变，多次访问fullName计算属性会立即返回之前的计算结果，而不必再次执行函数。

	computed:{
	//什么时候执行，初始化显示，相关的data属性数据发生改变
		//fullName1是要计算使用的data值，需要有return返回值
		fullName1(){
			return this.firstName+this.lastName
		}
	}

4监听属性
通过vm对象的watch配置来监视指定的属性，当属性变化时，回调函数自动调用，在函数内部进行计算，当需要在数据变化执行异步或开销较大的操作时，这个方式是最有用的（lodash的debounce方法防多次访问）

	watch:{
		//监听的是变化的data
		firstName:function(value){
			this.fullName1=value+this.lastName
		}
	}

5.计算属性高级
通过getter/setter实现对属性数据的显示和监视
计算属性存在缓存，多次读取只执行一次getter计算

	computed:{
		fullName3:{
		//回调函数 当需要读取当前属性值时回调，根据相关的数据计算并返回当前属性的值
			get(){
				return this.firstName+' '+this.lastName
			},
			//监视当前属性值的变化，当属性值发生改变时回调，更新相关的属性数据
			set(value){
				const names=value.split(' ')
				this.firstName=names[0]
				this.lastName=names[1]
			}
		}
	}

6.Class 与 Style 绑定
class/style绑定专门用来实现动态样式效果的技术
1.class绑定:class=‘xxx’
xxx是字符串

	<p :class='a'></p>

xxx是对象

	<p :class="{aClass:isA,bClass:isB}"></p>

xxx是数组

	<p :class="['aClass','cClass']"></p>

2.style绑定

	<p :style="{color:activeColor,fontSize:fontSize+'px'}"></p>
	<p :style="{color:'red',fontSize:'20px'}"></p>
	//直接绑定到一个样式对象会更清晰
	<p :style=styleObj></p>
	data: {
	  styleObj: {
	    color: 'red',
	    fontSize: '13px'
	  }
}

7vue的生命周期

1.创建 beforeCreate created
2.挂载 beforeMount Mounted
3.更新beforeUpdate Updated
4.销毁beforeDestory Destoryed