vue怎样自定义指令

自定义指令可以去官网查看更多内容 

https://cn.vuejs.org/v2/guide/custom-directive.html
指令可以用来操作元素，非常方便

在vue单文件组件里面用directives来定义一个指令,这样定义的就是局部指令

如图，append表示指令名，指令名随意起的， 它有一些钩子函数给我们调用

这里说一下inserted钩子函数，借用vue官网的说法——被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)

el表示的就是使用了指令的元素，如图，可以使用指令在插入元素的时候赋值

 

binding.value则是指令等号后面的参数

这个参数可以是一个函数

如果想要函数接受参数则可以用v-指令:参数进行传递

<template>
  <div>
    <span v-append:abc="showText"></span>
  </div>
</template>

<script>
export default {
  name: "Full",
  directives: {
    append: {
      inserted: (el, binding) => {
        let temp = binding.value;
        let arg = binding.arg;
        temp(arg);
      }
    }
  },
  methods: {
    showText(arg) {
      console.log(arg);
    }
  }
};
</script>

<style>
</style>