Vue自定义全局和局部的指令方法，例如: v-if,v-for

最新推荐文章于 2022-11-21 16:44:41 发布

原创最新推荐文章于 2022-11-21 16:44:41 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript

本文介绍了如何在Vue中创建自定义指令，包括在当前组件内定义的局部指令和在main.js中全局注册的指令。通过`directives`对象声明指令，并在`inserted`钩子函数中操作DOM。全局指令则通过`Vue.directive()`方法定义，之后可以在项目任何组件中使用。

(1)当前组件化的自定义指令：

在组件中的用directives声明一个对象，在对象中声明要创建的新
指令的名字,等于一个对象，在对象中的用inserted的方法来进行配置指令的操作，用两个参数，第一个为el，代表当前元素，方便了DOM的操作，第二个是binding，代表的是一个对象，有传过来的值，名字等等，而配置完成之后，直接在的当前组件调用的v-新的指令名字就可以了

<template>
  <div style="font-size:20px">
    <h1 v-rong='msg'></h1> <!--直接在当前组件用v-新指令即可-->
  </div>
</template>
<script>
  export default{
    data(){
      return {
            msg:"自定义指令成功了"
      }
    },
    directives:{ 
      rong:{ //自定义指令的名字
        inserted(el,binding){ /*用inserted方法来进行的指令的操作，el为当前元素为了方便DOM的操作，
                              binding是一个对象，有传来的值等一些基本信息*/
          el.innerHTML=binding.value
        }
      }
    }
  }
</script>

效果如图：
在这里插入图片描述

(2)自定义全局的指令

在Vue项目中的main.js中的定义全局的自定义指令，用Vue.directive(‘自定义新指令的名字’,{ inserted(el,binding){ el.style.background=binding.value } //第一个为el，代表当前元素，方便了DOM的操作，第二个是binding，代表的是一个对象，有传过来的值，名字等等 })
创建完成之后，在全局组件中直接使用v-新指令的名字就可以了

在main.js中:


Vue.directive('col',{ /*用Vue.directive方法来创建全局的自定义指令，
                       第一个参数是自定义指令的新名字，
                       第二个是一个对象，在对象中inserted用来配置新指令的操作*/
  inserted:function(el,binding){
      el.style.background=binding.value;
  }
});
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

在全局组建中引入

<template>
  <div style="font-size:20px">
    <h1 v-col="'#0aa1ed'">123</h1> <!--直接在当前组件用v-新指令即可-->
  </div>
</template>

效果如图:
在这里插入图片描述
完事儿！