当前位置: 首页 > Web前端 > HTML

vue自定义指令

时间:2023-04-02 20:03:19 HTML

vue官网自定义指令https://cn.vuejs.org/v2/guide/custom-directive.html全局自定义指令Vue.directive('focus',{inserted:function(){el.focus()}})在dom中使用v-focus使用这个自定义指令

部分自定义指令directives:{focus:{inserted:function(el){el.focus()}}}inserted函数:调用绑定元素插入父节点(只保证父节点存在,不一定插入到文档中)bind:只调用一次,第一次调用时指令绑定到元素.可以在这里进行一次性的初始化设置。示例:使用自定义指令跳转页面指令:{gopage:{bind:(el,binding,vnode)=>{//el获取对应元素的dom//vnodevue生成的虚拟节点vnode.contextcompilationisVue对象就是我们用的这个el.onclick=()=>{vode.context.$router.path({name:'page'})//跳转到对应的页面}}}}是最项目中重要的指令最好单独写在一个文件里,用到的地方直接引用。