指令(Directives)是 vue 为开发者提供的模板语法,用于辅助开发者渲染页面的基本结构。
vue 中的指令按照不同的用途可以分为如下 6 大类:
内容渲染
指令属性绑定
指令事件绑定
指令双向绑定
指令条件渲染
指令列表渲染
指令
内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。
常用的内容渲染指令有如下 3 个:
v-text
性别:
注意:v-text 指令会覆盖掉标签原本的内容
{{}}
vue 提供的 {{}}
语法专门用来解决 v-text 会覆盖默认文本的问题。
这种 {{}}
语法的专业名称是 插值表达式(英文名为 Mustache)
姓名:{{username}}
性别:{{gender}}
v-html
性别:
姓名:{{username}}
性别:{{gender}}
{{ info }}
如果需要为元素的属性动态绑定属性值,则需要用到 v-bind
属性绑定指令
<-- v-bind: 缩写 -->
在 vue 提供的模板渲染语法中,除了支持绑定简单的数据值之外,还支持 JavaScript 表达式的运算
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
vue 提供了 v-on
事件绑定指令用来辅助开发者为 DOM 元素绑定事件监听
count = {{ count }}
注意:
原生 DOM 对象有
onclick
、oninput
、onkeyup
等原生事件,替换为 vue 的事件绑定形式 分别为:v-on:click
、v-on:input
、v-on:keyup
可以简写为:
@click
@input
@keyup
在事件处理函数中调用 event.preventDefault()
或 event.stopPropagation()
是非常常见的需求。
因此,Vue 提供了事件修饰符的概念,来辅助程序员更方便的对事件的触发进行控制。
常用的 5 个事件修饰符:
事件修饰符 | 说明 |
---|---|
.prevent |
阻止默认行为(例如:阻止 a 链接的跳转,阻止表单的提交等) |
.stop |
阻止事件冒泡 |
.capture |
以捕获模式触发当前的事件处理函数 |
.once |
绑定的事件只触发一次 |
.self |
仅当 event.target 是元素本身时才会触发事件处理器 |
...
使用修饰符时需要注意调用顺序,因为相关代码是以相同的顺序生成的。因此使用
@click.prevent.self
会阻止元素及其子元素的所有点击事件的默认行为,而@click.self.prevent
则只会阻止对元素本身的点击事件的默认行为。
.capture
、.once
和 .passive
修饰符与原生 addEventListener
事件相对应:
...
...
.passive
修饰符一般用于触摸事件的监听器,可以用来改善移动端设备的滚屏性能。
请勿同时使用
.passive
和.prevent
,因为.passive
已经向浏览器表明了你不想阻止事件的默认行为。如果你这么做了,则.prevent
会被忽略,并且浏览器会抛出警告。
在监听键盘事件时,我们经常需要判断详细的按键。
此时,可以为键盘相关的事件添加按键修饰符,例如:
Vue 为一些常用的按键提供了别名:
.enter
.tab
.delete
(捕获“Delete”和“Backspace”两个按键)
.esc
.space
.up
.down
.left
.right
系统按键修饰符
你可以使用以下系统按键修饰符来触发鼠标或键盘事件监听器,只有当按键被按下时才会触发。
.ctrl
.alt
.shift
.meta
鼠标按键修饰符
.left
.right
.middle
这些修饰符将处理程序限定为由特定鼠标按键触发的事件。
vue 提供了 v-model
双向数据绑定指令,用来辅助开发者在不操作 DOM 的前提下,快速获取表单的数据。
用户名是:{{ username }}
选中的省份是:{{ province }}
v-model 指令的修饰符
为了方便对用户输入的内容进行处理,vue 为 v-model
指令提供了 3 个修饰符,分别是:
修饰符 | 作用 | 示例 |
---|---|---|
.number |
自动将用户的输入值转为数值类型 |
|
.trim |
自动过滤用户输入的首尾空白字符 |
|
.lazy |
在“change”时而非“input”时更新 |
|
+ = {{ n1 + n2 }}
条件渲染指令是用来辅助开发者按需控制 DOM 元素的显示与隐藏。
条件选指令有如下两个:
v-if
v-show
v-if
是通过动态增删元素实现控制元素的显示与隐藏
v-show
是通过为元素添加display:none
样式实现控制元素的显示与隐藏故若元素需要频繁的显示与隐藏,则选择
v-show
更合适,对于内存的消耗更小若刚进入页面时,元素默认不需要展示,且后续的使用很大可能不需要展示,则选择
v-if
更合适
1
2
3
vue 提供了 v-for
列表循环指令,用来辅助开发者基于一个数组来循环渲染一个列表结构。
v-for
指令需要使用 item in items
形式的特殊语法,其中
items
是待循环的数组
item
是被循环的每一项
索引
ID
姓名
{{ index }}
{{ item.id }}
{{ item.name }}
v-for 指令还支持一个可选的第二个参数,即当前项的索引。
语法格式为:
(item,index) in items
注意:v-for 指令中的 item 和 index 都是形参,可以根据需要进行重命名
key 值的注意事项:
key 的值只能是字符串或数字类型
key 的值必须具有唯一性(不能重复)
建议把数据项 id 属性的值作为 key 的值
使用 index 的值当作 key 的值没有任何意义
建议使用 v-for 指令时一定要指定 key 的值(既能提升性能、又能防止列表状态紊乱)
一 叶 知 秋,奥 妙 玄 心