Vue指令(一)
4. 指令
什么是指令?
指令
(Directives)
是带有
v
-
前缀的特殊属性。例如在入门案例中的
v-model
,代表双向绑定
4.1. 插值表达式
4.1.1.
花括号
格式:
说明:
该表达式支持
JS
语法,可以调用
js
内置函数(必须
有返回值
)
表达式必须有返回结果。例如
1 + 1
,没有结果的表达式不允许使用,如:
var a = 1 + 1;
可以直接获取
Vue
实例中定义的数据或函数
4.1.2.
插值闪烁
使用
{{}}
方式在网速较慢时会出现问题。在数据未加载完成时,页面会显示出原始的
{{}}
,加载完毕后才显示正确数
据,称为插值闪烁。类似如下的效果(最新
vue
是几乎没有此问题):
4.1.3. v-text
和
v-html
使用
v-text
和
v-html
指令来替代
{{}}
说明:
- v-text:将数据输出到元素内部,如果输出的数据有HTML代码,会作为普通文本输出
- v-html:将数据输出到元素内部,如果输出的数据有HTML代码,会被渲染
4.2. v-model
刚才的
v-text
和
v-html
可以看做是单向绑定,数据影响了视图渲染,但是反过来就不行。接下来学习的
v-model
是双
向绑定,视图(
View
)和模型(
Model
)之间会互相影响。
既然是双向绑定,一定是在视图中可以修改数据,这样就限定了视图的元素类型。目前
v-model
的可使用元素有:
- input
- select
- textarea
- checkbox
- radio
- components(Vue中的自定义组件)
- 多个 checkbox 对应一个model时,model的类型是一个数组,单个checkbox值是boolean类型
- radio对应的值是input的value值
- input 和 textarea 默认对应的model是字符串
- select 单选对应字符串,多选对应也是数组
4.3. v-on
4.3.1.
基本用法
v-on
指令用于给页面元素绑定事件。
语法:
简写语法:
v-on:
事件名
="js
片段或函数名
"
4.3.2.
事件修饰符
在事件处理程序中调用
event.preventDefault()
或
event.stopPropagation()
是非常常见的需求。尽管我们
可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理
DOM
事件细节。
为了解决这个问题,
Vue.js
为
v
-
on
提供了
事件修饰符
。之前提过,修饰符是由点开头的指令后缀来表示的。
- .stop :阻止事件冒泡
- .prevent :阻止默认事件发生
- .capture :使用事件捕获模式
- .self :只有元素自身触发事件才执行。(冒泡或捕获的都不执行)
- .once :只执行一次
4.4. v-for
遍历数据渲染页面是非常常用的需求,
Vue
中通过
v-for
指令来实现。
4.4.1.
遍历数组
语法:
v-for="item in items"
- items:要遍历的数组,需要在vue的data中定义好。
- item:循环变量
4.4.2.
数组角标
在遍历的过程中,如果需要知道数组角标,可以指定第二个参数:
语法
- items:要迭代的数组
- item:迭代得到的数组元素别名
- index:迭代到的当前元素索引,从0开始。
4.4.3.
遍历对象
v-for
除了可以迭代数组,也可以迭代对象。语法基本类似
- 1个参数时,得到的是对象的值
- 2个参数时,第一个是值,第二个是键
- 3个参数时,第三个是索引,从0开始
4.4.4. key
当
Vue.js
用
v
-
for
正在更新已渲染过的元素列表时,它默认用
“
就地复用
”
策略。如果数据项的顺序被改变,
Vue
将
不会移动
DOM
元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过
的每个元素。
如果使用
key
这个功能可以有效的提高渲染的效率;
key
一般使用在遍历完后,又增、减集合元素的时候更有意义。
但是要实现这个功能,你需要给
Vue
一些提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需
要为每项提供一个唯一
key
属性。理想的
key
值是每项都有的且唯一的
id
。 也就是
key
是该项的唯一标识。
示例:
- 这里使用了一个特殊语法: :key="" 后面会讲到,它可以让你读取vue中的属性,并赋值给key属性
- 这里绑定的key是数组的索引,应该是唯一的