创建和使用vue自定义指令的示例分析

本文阐述了vue自定义指令的创建和使用。分享给大家参考，如下：

第一，自定义指令的创建和使用

Vue中有很多指令，比如v-for/v-if/v-else/v-else-if/v-model/v-bind/v-on/v-show/v-html/v-text.但是这些指令往往是工具性的，有时在实现特定的业务逻辑时发现它们是不够的。

1.自定义指令

1)创建

newvue({ instructions : { Change : { bind : Function(){ }，Update : Function () {}，Unbind : Function () {}})自定义指令时，在指令对应的配置对象中，有三个操作对应于指令

将解除绑定指令绑定到元素更新时要执行的操作如果在调用指令时传递了参数，当参数发生变化时，将执行通过解除绑定更新指定的方法来执行的操作

(2)使用自定义指令

指令： { hello : { bind : function(){ }，update : function () {}，unbind : function () {}}使用：

你好

注意事项：

建议说明书以小驼峰的形式命名，如changeBackgroundColor，使用时以串串v-change-background-color的形式书写

(方法：参数，返回值)

bind方法和update方法都有参数，一个是el，对应调用指令的元素，另一个是bindings，是一个对象：name/rawName/value/oldValue.

！doctype html headlang=' en ' metacarset=' utf-8 ' script src=' http:https://cdn.bootcss.com/vue/2.0.1/vue.min.js'/script titlewww.jb51.net vue自定义指令/title/headsdydivid=' container ' p-准备实现需求：在h1标签上增加一个按钮，点击该按钮时，实现对计数的自动递增操作；当计数等于5时，Output '它是一个测试'-button @ Click=' handleclick ' Click me/button h1v-if=' count 6 ' v-change=' count '它是一个自定义指令/h1/divscript//单击方向性newvue ({el:' # container ')，data: {msg:' hello vue '，count33600}，methods 3: { handleclick : function(){//，count将增加这个计数。}，directives : { change : { bind : function(El，bindings) {console.log('指令已绑定到元素')；console . log(El)；console.log(绑定)；//准备在调用指令的元素的innerhtml El . innerhtml=bindings . value上显示传递的参数//；}，更新：函数(El，bindings) {console.log('指令数据已更改')；console . log(El)；console.log(绑定)；El . innerHTMl=bindings . value；if(bindings . value==5){ console . log('这是一个测试')；}}，解除绑定：函数(){console.log('未绑定')；} } } })/script/body/HTML使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试，可以得到如下运行结果：

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 ' Script src=' http :3359 cdn . bootscs.com/Vue/2 . 0 . 1/Vue . min . js '/Script titlewww.jb51.net Vue自定义指令/title/headsdydiv id=' container ' p { { msg } }/p h1v-change-background-color=' my bgcolor '它是一个header 1/h1/div Script new Vue({ El : ')console . log(bindings . value)；El . style . background COlOr=bindings . value；} } } })/script/body/HTML使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试，可以得到如下运行结果：

H4 v-change-background-color=' red '背景色/h4这个可以，但是写死了不好。

希望本文对vue.js程序的设计有所帮助。