Vue.js：自定义指令的使用和参数传递

const customDirective = {
  bind: function (el, binding, vnode) {
    el.innerHTML = 'Hello'
  },
}

<!-- 引入Vue 2.7.14 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script> -->
<script src="./vue@2.7.14.js"></script>
<!-- 引入自定义指令 -->
<script src="./directive.js"></script>
<!-- Vue节点 -->
<div id="app">
  <div v-custom></div>
</div>
<!-- 逻辑 -->
<script>
  // 注册指令
  Vue.directive('custom', customDirective)
  // 创建Vue实例
  const app = new Vue({
    el: '#app',
    // 数据
    data() {
      return {}
    },
    // 方法
    methods: {},
  })
</script>

const customDirective = {
  bind: function (el, binding, vnode) {
    el.innerHTML = binding.arg
  },
}

<div v-custom:Hello></div>

<!-- Vue节点 -->
<div id="app">
  <div v-custom:[name]></div>
</div>
<!-- 逻辑 -->
<script>
  // 创建Vue实例
  const app = new Vue({
    el: '#app',
    // 数据
    data() {
      return {
        name: 'Hello'
      }
    },
  })
</script>

const customDirective = {
  bind: function (el, binding, vnode) {
    el.innerHTML = binding.value()
  },
}

<!-- Vue节点 -->
<div id="app">
  <div v-custom="handleBind"></div>
</div>
<!-- 逻辑 -->
<script>
  // 创建Vue实例
  const app = new Vue({
    el: '#app',
    // 数据
    data() {
      return {
        name: 'Hello',
      }
    },
    // 方法
    methods: {
      handleBind() {
        return this.name
      },
    },
  })
</script>

<div v-custom="handleBind()"></div>