Vue.js的各种指令更方便我们用数据驱动DOM，比如v-bind、v-on、v-model、v-if、v-for、v-once等内置指令。这些指令的职责是在表达式发生变化时，对DOM应用一定的行为，尽量不要对DOM进行操作、添加、删除和修改。通过了解如何定制指令，您可以想象如何完成内置指令。

内置指令

指令名描述使用v-model将数据输入v-model='message' v-text绑定到输出文本，但无法解析label P v-text=' message '/P v-html来输出文本，可以解析label P v-html=' message '/P v-once来仅绑定数据一次 P v-once {{message}}/p v-bind绑定属性 img v-bind : src=' http 3360 imgurl '或 img :src=' http3如果更改，显示： none/block div v-show=' true '/diiv v-对于通过数组的循环，arr“{ val } }/Li v-斗篷中的object li v-for='(val，Key)在vue代码执行前隐藏元素，可以解决'闪烁'问题 p v-斗篷{{message}}/p自定义指令

当需要特殊函数时，使用自定义指令在DOM上执行底层操作

注册

自定义指令的注册分为全局注册和局部注册，这两种注册类似于组件的注册，不同的是该方法称为directive，编写如下：

//全局注册自定义指令vue.directive ('mydir '，{//instruction option })；//全局注册自定义指令函数Vue.directive('mydir '，函数(){//将由' bind '和' update `}调用)//是本地注册的(只针对组件中的元素)。导出默认{指令3360 { mydir 3360 {//指令选项}}需要注意的是，Vue.directive()注册了初始化实例中新Vue()的指令。Hump writing在定义指令时会报告错误，所以通常是小写的。

命令选项

自定义指令的选项由几个钩子函数组成(可选)，可以根据需要选择不同的钩子。例如，当全局注册指令时：

Vue.directive ('mydir '，{ bind : function(){//只调用一次，在指令第一次绑定到元素时调用，在元素绑定时用于执行一次初始化操作。}，第一次绑定后立即调用update:函数(){//得到的参数是绑定的初始值。//之后在绑定元素所在的模板更新时调用，不管绑定值是否变化，不必要的模板更新可以忽略。}，inserted:函数(){//在绑定元素插入父节点时调用(父节点存在时可以调用，文档中不需要存在)。}，当绑定元素的模板完成一个更新周期时，调用component updated : function(){//调用。}，unbind:函数(){//只调用一次，当指令与元素解除绑定时调用。}})上面的每个钩子函数都有几个可用的参数：

El:指令绑定的元素，可以用来直接操作DOM；绑定：包含指令信息的对象；Vnode:生成VUE编译的虚拟节点；OldVnode:最后一个虚拟节点，仅在update和componentUpdated钩子函数中可用。例子

//一个元素div v-mytest : foo . m1 . m2=' 1 1 ' my directive/div//JS代码的一部分export default { directives : { mytest 3360 { bind : function(El，Binding，vnode){ console . log(El)console . log(Binding)console . log(vnode)} }控制台输出的截图：

其中，绑定对象的输出属性有：

rawname 3360 ' v-mytest : foo . m1 . m2 '/自定义指令名3360' mytest'/指令名arg: 'foo' /指令参数modifiers: { m1: true，M2: true} //指令表达式的修饰符3360 ' 1 1 1 '/指令绑定值的字符串形式： 2 //指令绑定值v-bind | | 3360绑定属性

Vue内置指令v-bind用于动态更新HTML元素属性，当某些数据发生变化时，可以使用v-bind:someAttr='someData '或语法sugar :someAttr='someData '来更新绑定的someAttr属性。

基本用法

绑定单个属性值

a : href=' URL ' rel=' external nofollow ' rel=' external nofollow ' : id=' linkid '链接/a测试数据如下：

//jsdata : { URL : ' https://www.baidu.com/',linkid:' myid ' }元素呈现输出：

a href=' https://www.baidu.com/'rel=' external nofollow ' rel=' external nofollow ' id=' myid '链接/a对象语法

V-bind最常用于绑定类或样式属性以动态更改样式。例如，您可以为：类设置一个对象，以动态切换类的值：

！-class binding-div : class=' { colorred : is read } '/div当isred3360为true时呈现输出：

Div class=' colored '/可以在div对象中传递多个属性值，以动态切换类：

！-类绑定，传入多个属性-div : { class a : isA，classB: isB} '当ISa和isB发生变化时，类a和类b将被动态更新。当两者都为真时，显然渲染结果是：

同样，对于样式，可以传入对象属性，并且可以使用字符串拼接：

！-style binding-div : style=' { font size : size ' px ' } '/div可以用v-bind绑定元素中的所有对象：

！-使用属性绑定对象-div v-bind=' {id : someprop，' other-attr ' : other prop } '/div数组语法

类可以传入多个值，并且可以通过将数组绑定到：类来使用类列表

Div: class=' [activea，activeb]'/div例如，当{activea:' class 1 '，activeb:' class 2'}时，呈现结果为：

Div还可以使用三元表达式在数组语法中切换类，例如：

div :class='[isA？ActiveA : ' '，activeB ']当类有多个条件时，使用三元表达式很麻烦，因此可以在数组语法中使用对象语法：

Div:类=' [{activea: isa}，activeb]'修饰符

V-bind的修饰符很少，只有。道具。骆驼和。sync是在API中提供的，主要用于组件。用法示例：

！-使用prop修饰符绑定DOM属性-div v-bind : text-content . prop=' text '/div！- .camel修饰符(2.1.0)将v-bind属性名kebab-case隆起成camel case-SVG : view-box . camel=' viewbox '/SVG！- .sync修饰符(2.3.0)语法糖，将扩展为v-on监听器，用于更新父组件-text-document v-bind : title . sync=' doc . title '/text-document的绑定值！-批量绑定，将doc对象中的每个属性(如title)作为一个独立的道具，添加一个v-on监听器-text-document v-bind . sync=' doc '/text-document v-on | | @监听事件

V-on用来动态绑定事件监听器，on: someEvent=' SomeFunction '或者语法sugar @someEvent='someFunction '可以用来监听someEvent进行交互。

基本用法

@ someEvent调用的方法名后面不能跟()，例如：

A : href=' URL' rel='外部nofollow' rel='外部nofollow' : id=' linkid '链接/a！-听一个事件-button @ click=' change fun ' change button/button可以在方法中添加功能：

//部分JS代码methods : { change fun 3360 function(){ this。linkid=' changeid '//指向当前组件本身}}单击按钮后，元素a的id发生了变化：

a href=' https://www.baidu.com/'rel=' external nofollow ' rel=' external nofollow ' id=' changeid ' link/a当然，v-on也可以使用对象语法来监听多个事件：

！-v 2 . 4 . 0-button v-on=' { mouse down : dothis，mouse up 3360 do the } '/button对于HTML元素上监视的事件，当ViewModel被销毁时，所有事件处理程序都将被自动删除，无需自行清理。

修饰语

Vue可以将本机事件对象参数事件传递到事件方法中，并提供一个特殊的变量$event来访问元素DOM事件。此外，特定事件可以通过一些事件修饰符来实现，例如。停下来。防止，捕捉。一次，等等。常见的用法示例有：

！-停止单击事件冒泡并调用事件。stoppropagation ()-button @ click。stop=' dot this '/按钮！-若要防止默认行为，请调用event . prevent default()-button @ submit . prevent=' dot this '/button！-添加事件侦听器时使用捕获事件捕获模式-button @ click . capture=' dot this '/button！-单击回调只会触发一次-button @ click . once=' dot this '/button！-(2.2.0)仅在单击鼠标左键时触发-button @ click . left=' dot this '/button！-串联修饰符-按钮@点击。停下来。prevent=' dothis '/按钮此外，v-on还提供了按键修饰符来监听键盘事件，键值为。键码，通常用作。入口，删除，选项卡，esc，空间，向下等。如下所示：

！-调用` VM . submit()`-输入on:keyup.5=' submit '仅当keyCode '为5时！-为重要的键码提供别名，如enter-input v-: keyup。输入='提交'！-缩写语法-input @ keyup.enter=' submit '另外，还有系统修饰符来监听键盘事件，不同的系统有不同的键盘/系统修饰符。这些键修饰符可以任意组合使用。

V-if，v-show条件渲染

条件呈现v-if根据表达式值的真和假条件呈现元素，当表达式为真时呈现，当表达式为假时移除。

P v-if='status===1 '当状态为1时显示此行/p v-else-if=' status==1 '当状态为2时显示此行/pp v-else在其他情况下默认显示此行。/pv-show也是条件渲染，但仅切换元素的CSS属性显示，与v-相比，无论条件为真还是假，都会编译元素。

P v-show='status===1 '该行在status为1 /p时显示，在data: {status33602}时隐藏，但仍会被编译，呈现结果为：

p style=' display: none'当状态为1时，显示该行。/p显然，v-if可以用在Vue.js内置的模板元素上，但是v-show不能用。你可以想想为什么。

v-用于列表渲染

列表呈现指令v-for通常用于遍历数组或枚举对象的循环显示，必须与in组合使用表达式中的特定语法别名，为当前遍历的元素提供别名：

！-遍历items“{ item }”中的array-div v-for='项。text}}/div！-提供第二个参数作为项“{ index } }-{ { item }中array-div v-for=' (item，index)的索引。text}}/div！-遍历对象属性-div v-for='对象中的值“{value}}/div！-提供第二个可选参数：对象“{ key }”: { { value } }/div中的object-div v-for=' (value，key)的键名！-提供第三个可选参数：对象“{index}”中object-div v-for='(值、键、索引)的索引。{{key}} : {{value}}/div可以使用代替in作为分隔符

当v-for和v-if在同一个节点上一起使用时，v-for的优先级高于v-if。

v-model表单控件的双向绑定

其实v-model也是一种特殊的语法糖。事实上，数据的双向绑定也可以通过v-bind和v-on来实现，但是v-model在不同的形式下会有更智能的处理。

文字框

一个典型的用例是输入文本框和文本区域文本框的双向数据绑定：

！-输入框-输入类型=' text' v-model=' message '占位符=' edit me '！-文本字段-textarea v-model=' message '占位符=' edit me'/textarea！-实时更新-pMEssage is : { { message } }/p }/p动态选择

对于单选按钮、复选框和选择框的选项，v-model和Vue实例的数据作为值属性值来实现不同的效果，即忽略所有表单元素的值、选中和选中属性的值。

！-单选按钮的互斥效果-div id=' example-radio '输入类型=' radio' id=' one '值=' one' v-model=' picked '标签为=' one' one/label输入类型='radio' id='two '值='Two' v-model='picked '标签为='two'Two/label！- picked显示value的值-p picked : {{picked}}/p/div！-多选按钮-div id='示例-checkbox '输入类型=' checkbox' id=' one '值=' one' v-model=' checked names '标签为=' jack' jack/label输入类型='checkbox' id='two '值='Two' v-model='checkedNames '标签为='john'John/label！- Checked显示值数组-pchecked : { { Checked name } }/p/div修饰符

v-model修改器的使用仅限于输入、选择、textarea和组件。懒惰——不要输入，而是倾听变化事件。number-将输入字符串转换为数字。修剪-输入前导和尾随空格以过滤v-pre、v-斗篷和v-once

这三个指令的共同点是不需要表达式，用法如下：

！-在实例初始化之前不要显示未编译的标记-div v-斗篷{{message}}/div！-需要配合CSS隐藏样式【v-斗篷】{ display: none} - !-仅渲染一次，后续渲染将被视为静态内容并跳过-div v-once {{message}}/div！-不会被编译，将直接显示原始的{{}}标记。-div v-pre {{message}}/div以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。