1. Vue指令

image.png

1. 基础指令

指令带有前缀 v-（Angular指令带有前缀 ng-），表示是由 Vue 提供的专用属性。基本的Vue指令有：v-bind，v-if，v-for，v-on，v-mode，v-show，v-text，v-html，v-bind:class，v-style，v-once，v-cloak，v-pre

① v-bind：绑定DOM元素属性（还可通过插值的方式绑定），可以将数据绑定到文本和属性，也可以将数据绑定到 DOM结构

② v-if：条件指令 (v-else,v-else-if) 【和v-show对比的区别 就是是否删除dom节点 默认值为false】

image.png

③ v-for：循环指令 【格式 v-for="字段名 in(of) 数组json"】

image.png

④ v-on：添加事件监听 【快捷方法 ----@click*】

image.png

⑤ v-mode：数据和状态之间进行双向绑定

image.png

⑥ v-show：显示与隐藏 【传递的值为布尔值 true false 默认为false】

image.png

⑦ v-text：解析文本【不能解析html标签】

image.png

⑧ v-html：解析文本,能解析html标签

image.png

⑨ v-bind:class：样式类名

image.png

⑩ v-style：样式

⑪ v-once：加载一次

image.png

⑫ v-cloak：防止闪烁

image.png

⑬ v-pre：把标签内部的元素原位输出

image.png

2.****自定义指令

自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念，但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展，不仅可用于定义任何的DOM操作，并且是可复用的。

① 语法格式：

image.png

传入的两个参数，id是指指令ID，definition是指定义对象。其中，定义对象可以提供一些钩子函数

② 相关钩子函数

image.png

③ 指令钩子函数参数

image.png

除了 el 之外的其他参数，都应该是只读的，并且永远不要去修改它们。如果你需要通过钩子函数共享信息数据，推荐通过元素的 dataset 来实现

④ 示例

image.png image.png

⑤ 常见使用例子

image.png

在许多情况下，可能只需要在 bind 和 update 钩子函数上定义过相同的行为就足够了，而无需关心其他钩子函数。例如：

image.png

如果指令需要多个值，你还可以向指令传入 JavaScript 对象字面量（包围在一对花括号中的零或多个”名/值“对）。记住，指令能够接收所有有效的 JavaScript 表达式

image.png

⑥ 自定义指令的使用示例