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