话说前端51vue的自定义指令

　　分享兴趣，传播快乐，增长见闻，留下美好！大家好，这里是小编。欢迎大家继续访问学苑内容，我们将竭诚为您带来更多更好的内容分享。
　　Shareinterest，spreadhappiness，increaseknowledge，andleaveagoodimpression！Helloeveryone，thisisXiaobian。WelcometocontinuetovisitthecontentofXueyuan，andwewillwholeheartedlybringyoumoreandbettercontenttoshare。
　　directive（自定义指令）：除了核心功能默认内置的指令（vmodel和vshow），Vue也允许注册自定义指令。注意，在Vue2。0中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通DOM元素进行底层操作，这时候就会用到自定义指令。全局自定义指令：Vue。directive局部自定义指令：directives
　　网址：https：cn。vuejs。orgv2guidecustomdirective。html
　　Directive：Inadditiontothedefaultbuiltininstructions（vmodelandvshow）ofcorefunctions，Vuealsoallowsyoutoregistercustominstructions。NotethatinVue2。0，themainformofcodereuseandabstractioniscomponents。However，insomecases，youstillneedtoperformtheunderlyingoperationsonordinaryDOMelements，andthenyouwillusecustominstructions。Globalcustomizationinstruction：Vue。directiveLocalcustomizationinstruction：directives
　　Website：https：cn。vuejs。orgv2guidecustomdirective。html
　　定义全局指令：自定义全局指令，让页面刚加载完输入光标在第二个输入框
　　Defineglobalcommand：customizetheglobalcommandsothattheinputcursorisinthesecondinputboxjustafterthepageisloaded。
　　定义局部指令：自定义局部指令，让页面刚加载完输入光标在第二个输入框
　　Definelocalinstructions：customizelocalinstructionssothattheinputcursorisinthesecondinputboxjustafterthepageisloaded。
　　钩子函数：一个指令定义对象可以提供如下几个钩子函数（均为可选）：
　　bind
　　只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
　　inserted
　　被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中）。
　　update
　　所在组件的VNode更新时调用，但是可能发生在其子VNode更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
　　Hookfunction：aninstructiondefinitionobjectcanprovidethefollowinghookfunctions（alloptional）：
　　bind
　　Calledonlyonce，whentheinstructionisfirstboundtoanelement。Onetimeinitializationsettingscanbemadehere。
　　inserted
　　Calledwhentheboundelementisinsertedintotheparentnode（onlytheparentnodeisguaranteedtoexist，butnotnecessarilyinsertedintothedocument）。
　　update
　　CalledwhentheVNodeofitscomponentisupdated，butitmayhappenbeforeitschildVNodeisupdated。Thevalueoftheinstructionmayormaynothavechanged。Butyoucanignoreunnecessarytemplateupdatesbycomparingthevaluesbeforeandaftertheupdate。
　　componentUpdated
　　指令所在组件的VNode及其子VNode全部更新后调用。
　　unbind
　　只调用一次，指令与元素解绑时调用。
　　指令钩子函数会被传入以下参数：
　　el
　　指令所绑定的元素，可以用来直接操作DOM。
　　binding
　　一个对象，包含一下这些属性（name、value、oldValue、expression、arg、modifiers）
　　componentUpdated
　　CalledaftertheVNodeofthecomponentwheretheinstructionislocatedanditschildVNodeareallupdated。
　　unbind
　　Calledonlyonce，whentheinstructionisunboundfromtheelement。
　　Theinstructionhookfunctionwillbepassedthefollowingparameters：
　　el
　　DirectivesareboundtoelementsthatcanbeusedtodirectlymanipulateDOM。
　　binding
　　Anobjectthatcontainstheseattributes（name，value，oldValue，expression，arg，modifiers）。
　　vnode
　　vue编译生成的虚拟节点。
　　oldVnode
　　上一个虚拟节点，仅在update和componentUpdated钩子中可用。
　　binding：name：指令名，不包括v前缀。
　　value：指令的绑定值，例如：vmydirective11中，绑定值为2。
　　oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否改变都可用。
　　expression：字符串形式的指令表达式。例如vmydirective11中，表达式为11。
　　arg：传给指令的参数，可选。例如vmydirective：foo中，参数为foo。
　　modifiers：一个包含修饰符的对象。例如：vmydirective。foo。bar中，修饰符对象为｛foo：true，bar：true｝。
　　vnode
　　Virtualnodesgeneratedbyvuecompilation。
　　oldVnode
　　Lastvirtualnode，availableonlyinupdateandcomponentUpdatedhooks。
　　Binding：name：instructionname，excludingvprefix。
　　Value：thebindingvalueoftheinstruction，forexample：vmydirective11，thebindingvalueis2。
　　OldValue：thepreviousvalueoftheinstructionbinding，whichisonlyavailableinupdateandcomponentUpdatedhooks。Availablewhetherthevaluechangesornot。
　　Expression：aninstructionexpressionintheformofastring。Forexample，invmydirective11，theexpressionis11。
　　Arg：parameterpassedtotheinstruction，optional。Forexample，invmydirectional：foo，theparameterisfoo。
　　Modifiers：Anobjectcontainingmodifiers。Forexample，invmydirective。foo。bar，themodifierobjectis｛foo：true，bar：true｝。
　　今天的分享就到这里了
　　如果您对今天的文章有独特的想法
　　欢迎给我们留言
　　让我们相约明天
　　祝您今天过得开心快乐！
　　Thatsallfortodayssharing。Ifyouhaveuniqueideasabouttodaysarticle，pleaseleaveusamessage。Letsmeettomorrow。Iwishyouahappydaytoday！
　　翻译：百度翻译
　　本文由learningyard新学苑原创，部分文字图片来源于他处，如有侵权，请联系删除