全局注册和局部注册

2.1 全局注册

需求: 定义color指令-传入一个颜色, 给标签设置文字颜色

main.js定义处修改一下

// 目标: 自定义指令传值
Vue.directive('color', {
  inserted(el, binding) {
    el.style.color = binding.value
  },
  update(el, binding) {
    el.style.color = binding.value
  }
})

<p v-color="colorStr" @click="changeColor">修改文字颜色</p>
​
<script>
  data() {
    return {
      theColor: "red",
    };
  },
  methods: {
    changeColor() {
      this.theColor = 'blue';
    },
  },
</script>

总结: v-xxx, 自定义指令, 获取原生DOM, 自定义操作

2.2 局部注册

• 局部指令，需要定义在directives 的选项 用法和全局用法一样

• 局部指令只能在当前组件里面使用

• 当全局指令和局部指令同名时以局部指令为准

  //局部指令，需要定义在  directives 的选项
  directives: {
      color: {
          bind: function(el, binding){
              el.style.backgroundColor = binding.value.color;
          }
      },
      focus: {
      inserted: function(el) {
          el.focus();
          }
      }
  }