目录
（2）通过 watch 监听 obj 数据的变化（深度监听 deep）
一、插值语法
（1）用于解析标签体内容
（2）语法：{ {}}，xxx会作为js表达式解析
二、数据绑定
1.单向数据绑定
语法：v-bind:href ="xxx" 或简写为 :href
特点：数据只能从 data 流向页面
2.双向数据绑定
语法：v-model:value="xxx" 或简写为 v-model="xxx"
特点：数据不仅能从 data 流向页面，还能从页面流向 data
三、事件处理
1.绑定监听
语法：
- v-on:xxx="fun"
- @xxx="fun"
- @xxx="fun(参数)"
2.事件修饰符
prevent : 阻止事件的默认行为 event.preventDefault()
stop : 停止事件冒泡 event.stopPropagation()
四、计算属性computed和监视属性watch
1.计算属性-computed
- 要显示的数据不存在,要通过计算得来
- 在 computed 对象中定义计算属性
- 在页面中使用{ {方法名}}来显示计算的结果
<div id="root">
姓：<input type="text" v-model="firstName"> <br/><br/>
名：<input type="text" v-model="lastName"> <br/><br/>
全名：<span>{
{fullName}}</span> <br/><br/>
</div>
data:{
firstName:'张',
lastName:'三',
},
computed:{
//简写
fullName(){
console.log('get被调用了')
return this.firstName + '-' + this.lastName
}
}2.监视属性-watch
- watch 配置来监视指定的属性
- 当属性变化时, 回调函数自动调用, 在函数内部进行计算
（1）通过 watch 监听 msg 数据的变化
watch: {
msg(oldValue, newValue) {
console.log(oldValue)
console.log(newValue)
}
}（2）通过 watch 监听 obj 数据的变化（深度监听 deep）
data（） {
return {
obj: {
'name': "赵",
'age': 18
},
}
},
watch: {
obj: {
handler(oldValue,newVal) {
console.log(oldValue)
console.log(newValue)
},
deep: true // 深度监听
}
}五、class 与 style 绑定
1. class 绑定
- :class='xxx'
- 表达式是字符串: 'classA'
- 表达式是对象: {classA:isA, classB: isB}
2. style 绑定
- :style="{ color: activeColor, fontSize: fontSize + 'px' }"
- 其中 activeColor/fontSize 是 data 属性
六、 条件渲染
1.v-if
写法：
v-if="表达式
"v-else-if="表达式
"v-else="表达式"
适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”
2.v-show
写法：v-show="表达式"
适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到
七、 列表渲染
1.v-for指令
- 用于展示列表数据
- 语法：v-for="(item, index) in xxx" :key="yyy"
- 可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
八、指令总结
- v-bind : 单向绑定解析表达式, 可简写为 :xxx
- v-model : 双向数据绑定
- v-for : 遍历数组/对象/字符串
- v-on : 绑定事件监听, 可简写为@
- v-if : 条件渲染（动态控制节点是否存存在）
- v-else : 条件渲染（动态控制节点是否存存在）
- v-show : 条件渲染 (动态控制节点是否展示)
- v-text指令：1.作用：向其所在的节点中渲染文本内容。
2.与插值语法的区别：v-text会替换掉节点中的内容，{ {xx}}则不会。
<div v-text="str"></div>
data:{
str:'<h3>你好啊！</h3>'
} 
- v-html指令：
1.作用：向指定节点中渲染包含html结构的内容。
2.与插值语法的区别：
(1).v-html会替换掉节点中所有的内容，{ {xx}}则不会。
(2).v-html可以识别html结构。
<div v-html="str"></div>
data:{
str:'<h3>你好啊！</h3>',
}- v-once指令：
1.v-once所在节点在初次动态渲染后，就视为静态内容了。
2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。