vue 的指令

目录

一、vue 的指令

1、v-text

2、v-html

3、v-show

4、v-if/v-esle-if/v-else

（1）、v-if

（2）、v-if 与 v-show

5、v-for

（1）、v-for 渲染一个数组

（2）、 v-for 渲染一个对象

（3）、v-if 与 v-for

（4）、v-for 之 key

（5）、显示过滤/排序后的结果

6、v-on

（1）、v-on 指令的修饰符

（2）、在内联事件处理器中访问事件参数

（3）、vue 中的特殊事件

7、v-bind

8、v-model

（1）、双向绑定的语法糖

（2）、v-model 的修饰符——表单

9、v-slot

10、v-pre（使用频率很低）

11、v-once（使用频率很低）

二、自定义指令 与 指令的生命周期

1、注册自定义指令

（1）、注册全局指令——Vue.directive() 方法

（2）、注册局部指令——directives 属性

2、案例

---

一、vue 的指令

指令的本质：语法糖，标志位。在编译阶段 render 函数里，会把指令编译成 JavaScript 代码。

vue 的指令：

• v-text
• v-html（不建议使用）
• v-show
• v-if / v-else-if / v-else
• v-for
• v-bind
• v-on
• v-model
• v-slot
• v-pre（使用频率很低）
• v-once（使用频率很低）
• v-cloak（使用频率极低，不细介绍）

1、v-text

v-text 指令，会把该元素下面的所有内容替换掉。

hello world

现实结果是：hello vue

2、v-html

v-html 指令，会用一个HTML标签字符串，替换该元素下面的所有内容。

但是，不建议使用v-html指令，因为它会导致被恶意者进行XSS攻击的潜在风险。

hello vue'">

  hello world

现实结果是：字体颜色为红色的 hello vue

3、v-show

v-show 指令，控制元素的显示隐藏，元素存在并占据空间。

元素隐藏时，相当于给该元素添加了 CSS 样式：display:none;

hello vue

changeShow

4、v-if/v-esle-if/v-else

（1）、v-if

v-if指令，控制元素是否加载。

v-esle-if/v-else指令不能单独使用，必须配合v-if一起使用。

hello vue {{number}}

hello world {{number}}