【自定义指令】

最新推荐文章于 2024-05-18 21:57:13 发布

大嘴猴..

最新推荐文章于 2024-05-18 21:57:13 发布

阅读量103

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_47838418/article/details/127606956

版权

使用这个方法进行全局定义：Vue.directive(两个参数)

指令的名字（定义的时候不加v-,使用vue指令的时候加上v-）
对象，里面包含三个钩子方法
私有定义

实例里有个directives属性，这个属性是个对象

里面放的就是我们指令，这个对象键就是指令的名字，后面的对象就是指令的内容，和全局定义是一样的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自定义指令</title>
  <script src="../vue-2.4.0.js"></script>
</head>
<body>
  <div id="app">
    <div v-color="color">啊啊啊啊啊啊啊啊啊啊啊</div>
    <div v-color>啊啊啊啊啊啊啊啊啊啊啊</div>
    <input type="text" v-color v-model="value">
  </div>
  
</body>
<script>
  Vue.directive('color',{
    //第一个参数，指令的名字 定义时不用加-v
    //第二个参数，对象
    //bind 只调用一次，指令第一次绑定元素时调用。在这里可以进行一次性的初始设置
    //el：el：当前的DOM元素 
    //binding:对象
    bind(el,binding){
      console.log(el);
      console.log(binding);
      el.style.color = 'blue';  //第一种写法
      // el.style.color = binding.value;  //第二种写法
      el.style.color = binding.value;
      console.log(binding.value);
    },
    //inserted :这个元素已经渲染到界面上执行
    inserted(el){
      console.log(el);
    },
    //update：当元素有更新时候执行
    update(el){
      console.log(el);
    }
  })
  let vm = new Vue({
    el:'#app',
    data:{
      color:'',
    },
    methods:{
    },
    //私有定义
    directives:{
      color:{
        bind(el,binding){
          el.style.color = binding.value
        },
        inserted(el){
          console.log(el);
        },
        update(el){
          console.log(el);
        }
      }
    }
  })
</script>
</html>