Vue.js 指令

指令的本质就是 HTML 自定义属

Vue.js 的指令就是以 v- 开头的自定义属 性

内容处理

• v-once 指令

使元素内部的插值表达式只生效一次

• v-text 指令

元素内容整体替换为指定纯文本数据

 • v-html 指令

元素内容整体替换为指定的 HTML 文本

 属性绑定

• v-bind 指令

v-bind 指令用于动态绑定 HTML 属性

Vue.js 还为 v-bind 指令提供了简写方法

 如果需要一次绑定多个属性，还可以绑定对象

与插值表达式类似，v-bind 中也允许使用表达式

 • Class 绑定

class 是 HTML 属性，可以通过 v-bind 进行绑定，并且可以与 class 属性共存

 对于 class 绑定， Vue.js 中还提供了特殊处理方式。

 

• Style 绑定

style 是 HTML 属性，可以通过 v-bind 进行绑定，并且可以与 style 属性共存

 当我们希望给元素绑定多个样式对象时，可以设置为数组

 渲染指令

• v-for 指令

用于遍历数据渲染结构，常用的数组与对象均可遍历

 使用 v-for 的同时，应始终指定唯一的 key 属性，可以提高渲 染性能并避免问题

 通过 标签设置模板占位符，可以将部分元素或内容 作为整体进行操作

• v-show 指令

用于控制元素显示与隐藏，适用于显示隐藏频繁切换时使用

• 注意： • 无法使用 v-show 指令。  

• v-if 指令

用于根据条件控制元素的创建与移除

 给使用 v-if 的同类型元素绑定不同的 key

 出于性能考虑，应避免将 v-if 与 v-for 应 用于同一标签

 自定义指令

指令用于简化 DOM 操作，相当于对基础 DOM 操作的一种封装，当我们希望使用一些内置指令不具备的 DOM 功能时，可以进行自定义指令设置

• 自定义全局指令

指的是可以被任意 Vue 实例或组件使用的指令。

  • 自定义局部指

指的是可以在当前 Vue 实例或组件内使用的指令。

过滤器

过滤器用于进行文本内容格式化处理。

过滤器可以在插值表达式和 v-bind 中使用

• 全局过滤器

可以将一个数据传入到多个过滤器中进行处理。

一个过滤器可以传入多个参数

• 局部过滤器

局部过滤器只能在当前 Vue 实例中使用

 计算属性

计算属性使用时为属性形式，访问时会自动执行对应函数

 methods 与 computed 区别

• computed 具有缓存型，methods 没有。

• computed 通过属性名访问，methods 需要调用。

• computed 仅适用于计算操作

计算属性的 setter

• 计算属性默认只有 getter，Vue.js 也允许给计算属性设置 setter 。

 侦听器

侦听器用于监听数据变化并执行指定操作

 为了监听对象内部值的变化，需要将 watch 书写为对象，并设置 选项 deep: true，这时通过 handler 设置处理函数

 • 注意：当更改（非替换）数组或对象时，回调函数中的新值与旧 值相同，因为它们的引用都指向同一个数组 、对象。 • 注意：数组操作不要使用索引与length，无法触发侦听器函数。