vm是什么?
- 是一个调度者,监听数据,渲染页面
插值表达式可用来干什么的?
- 渲染数据
v-text使用:
- 更新元素的
textContent - 只能被使用在元素的属性节点上,不能用在元素的内容区域
- 会覆盖掉元素之前的内容
- 会把元素内部的内容都替换掉
- 在网速慢的情况下,存在闪烁的问题
v-html使用:
- 更新元素的
innerHTML, 渲染带标签的文本
v-bind使用:
- 绑定属性
v-for使用:
-
渲染数组
-
v-for="item in arr",item是数组中的每一项,arr是需要循环的数组 -
v-for="(item, index) in arr",index是索引
-
-
渲染对象
-
v-for="value in obj",value是对象键的值,obj表示需要遍历的对象 -
v-for="(value, key, index) in obj",index表示索引
-
v-for能够根据数据的变化自动刷新视图-
注意,以下两种情况不会触发视图更新
- 当使用数组的
length属性去改变数组的时候，不会触发视图更新 - 使用数组下标(索引)的方式去改变数组的时候，也不会触发视图更新
- 当使用数组的
-
解决上述问题
- 使用
Vue.set(arr, index, newVal),arr是需要改变的数组，index是数组里面的项，newVal是改变后的值 Array.prototype.splice()
- 使用
-
:key-
v-for必须结合key属性来使用，它会唯一标识数组中的每一项，未来当数组中的那一项改变的时候，它会只更新那一项 - 好处就是提升性能
- 注意
key的值唯一,不能重复
-
v-model使用:
- 双向数据绑定
-
v-model只能在input/textarea/selet使用
v-on使用: (监听DOM事件)
-
使用方法：
- 在标签的属性位置写上
v-on:任意的事件类型="执行的函数" - 简写：
@任意的事件类型="执行的函数"（推荐） - 通过执行函数添加参数
- 通过执行函数中添加
$event参数传递事件对象，注意只能是$event,并且不能加引号 - 事件修饰符可以给事件添加特殊功能
.stop,.prevent - 可以给和按键相关的事件添加按键修饰符 常用的有
.enter
- 在标签的属性位置写上
v-if和v-show使用:
v-if和v-show指令可以用来控制元素的显示和隐藏v-if="布尔值",v-show="布尔值", 布尔值为true元素显示，false隐藏-
区别：
-
v-if通过控制dom来控制元素的显示和隐藏 -
v-show通过控制样式display:none来控制元素的显示与隐藏
-
-
使用场景区别
- 涉及到大量
dom操作的时候，我们需要使用v-show - 涉及到异步数据渲染的时候就要使用
v-if
- 涉及到大量
