Vue.js自定义指令的用法与实例

import Vue from ‘vue‘
import App from ‘./App‘

Vue.config.productionTip = false

Vue.directive(‘colorTwo‘, {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function(el, binding) {
    el.style.color = binding.value;
  }
});

/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  template: ‘<App/>‘,
  components: { App }
});

<template>
  <div id="app">
    <p v-color-two="‘blue‘">自定义指令：v-colorTwo</p>
  </div>
</template>

<script>
export default {
  name: ‘app‘,
  components: {},
  directives: {
    // 指令的定义
    color: function(el, binding) {
      el.style.color = binding.value;
    }
  },
  data() {
    return {}
  },
  mounted: function() {},
  methods: {}
}
</script>

<template>
  <div id="app">
    <p v-color="‘red‘">自定义指令：v-color</p>
  </div>
</template>