关键词搜索

全站搜索×
密码登录在这里
×
注册会员

已有账号? 请点击

使用其他方式登录

Vue2局部和全局自定义指令区别详解

发布2022-06-16浏览399次

详情内容

vue以有几种定义方式,在什么地方定义,里面有几种钩子,钩子中有哪些参数、使用场景来阐述,分为全局自定义指令和局部自定义指令,局部和全局自定义指令区别在哪里呢。


全局自定义指令

全局自定义指令最简单的写法实在main.js直接书写全局自定义指令是通过Vue.directive('第一个参数是指令的名称,第二个是对象,对象里面有钩子函数,钩子函数分别有

inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。

bind:只调用一次,指令第一次绑定到元素时调用。使用场景:在这里可以进行一次性的初始化设置。

update:所在组件的 VNode 更新时调用,等...

钩子函数的形参有el,vnode,binding,el是绑定的元素、vnode虚拟dom,binding是被赋值的结果,要用binding.value来接收调用指令时赋的值,对象里操作逻辑

定义:

在页面使用: 

 

局部自定义指令:
局部自定义指令是定义在组件内部的,只能在当前组件中使用,directives后是一个对象,对象里面key是指令名字,值是一个对象,这个对象里面有钩子函数update,bind,inserted,参数是el,binding,vnode,钩子函数里面书写逻辑



全局自定义指令

1 在mian.js写

 2 在需要的组件使用

局部自定义指令

directives全局没有s 局部加s 写法也不同

script>
export default {
  data() {
    return {
      color: "red",//为 变量背景色局部自定义指令 写值
    };
  },
  methods: {},

  components: {},
  created() {},
  //局部 的自定义指令directives与data同级
  //  <input type="text"  v-focus />
  //  <div v-bgcolor="color"> 变量背景色局部自定义指令 </div>//在data中定义 color:'red',
  // <div v-bgcolor="'#000'" v-color="'#fff'"> 直接写值 字符串要加引号 </div>
  directives: {
    focus: {
      inserted(el, binding, vnode) {
        // 生命周期解释:绑定到节点
        el.focus();
      },

     
    },
    bgcolor: {
      inserted(el, binding, vnode) {
        // 生命周期解释:绑定到节点
        el.style.backgroundColor = binding.value; //驼峰
      },
    },
    color: {
      inserted(el, binding, vnode) {
        // 生命周期解释:绑定到节点
        el.style.color = binding.value;
      },
    },
  },
};
</script>


使用:

      <input type="text" v-focus />
      <div v-bgcolor="color"> 变量背景色局部自定义指令 </div>
      <div v-bgcolor="'#000'" v-color="'#fff'"> 直接写值 字符串要加引号 </div>
点击QQ咨询
开通会员
返回顶部
×
  • 微信支付
  • 支付宝付款
微信扫码支付
微信扫码支付
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载