当前位置：网站首页>Custom Directive Register Custom Directive

Custom Directive Register Custom Directive

2022-08-06 22:24:00 【HUAWEI CLOUD】

1.全局注册
在vueWrite before the instance,如:

Vue.directive('focus',{inserted:function(el){el.focus()//添加焦点事件,也可以给domelements to add others,比如input标签中用到el.value='请输入内容'}})

注意:Global registration is nodirective是没有s,Partial registration is availables.

2.局部注册
在vue实例里面写,如:

    directives:{      content:{          inserted:el=>{            el.value='请输入内容';          }      }  }

在页面中用v-The command name can be referenced.

<input type="text" v-focus v-content/>

Both global and local registrations can use arrow functions;
insertedThe hook is called when the bound element is inserted into the parent node,There are other hook functionsbind,update,componentUpdated,unbind.These can be viewed on the official website,

总结:

1.全局注册自定义指令:它作用在全局,写法是在vue实例之前,用VueClick on onedirective()方法,directive不用加s,Pass in two parameters to this method,The first is the command name,The command name is required to be a string,第二个参数是一个对象,Write hook functions in properties of objects,It's a lot like usajax里面的success回调函数,Pass parameters in the hook function(如el,binding,vnode,oldVnode),Do what we want based on the parameters.

2.局部注册自定义指令:作用在局部,默认只会在当前页面的vue实例生效,Writing is different from global,它是写在vue实例里面,里面是用directives,This is to adds变为复数,Command names are also not in string format,指令名和directives都是以对象的形式来写,The hook function is written in the same way as the global one.

3.After the command is written,直接在html元素里使用v-command name

传送门:https://cn.vuejs.org/v2/guide/custom-directive.html

The complete code is attached above:

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <meta http-equiv="X-UA-Compatible" content="ie=edge" />    <title>Document</title>  </head>  <body>    <div id="app"><input type="text" v-focus v-content  /></div>  </body></html><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>  //自定义指令  // 1.全局注册  Vue.directive('focus',{      inserted:function(el){          el.focus()//添加焦点事件      }  })  let app = new Vue({    el: '#app',    data: {},    //2.局部注册自定义指令   // directives:{     // content:{        //  inserted:el=>{         //   el.value='请输入内容';         // }     // } // }      })</script>

3.注册自定义指令

The second parameter is in addition to the incoming object,It also supports passing in command functions.

There is an introduction on the official website:

https://cn.vuejs.org/v2/api/#Vue-directive
在这里插入图片描述
4.Pass in command function usage:很多时候,我们想在bind(Called when the directive is first bound to an element)和update(所在组件的VNode更新时调用)triggers the same behavior,We can write as follows:
在这里插入图片描述
The official website summarizes the custom command hook function5个:
在这里插入图片描述
The custom hook function is also called the life cycle of the custom instruction:
在这里插入图片描述

The usage of the constructor life cycle is demonstrated below:
在这里插入图片描述

There are three corresponding constructor parameters:el,binding,vnode
el:指令所绑定的元素,可以用来直接操作dom;
bingding:是一个对象,It contains a lot of information about custom directives;
vnode:Vue编译生成的虚拟节点;
The detailed constructor parameters are as follows:
在这里插入图片描述

原网站

版权声明
本文为[HUAWEI CLOUD]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/218/202208062149403990.html

边栏推荐

猜你喜欢

随机推荐