在main.js中使用Vue.directive({‘directiveName‘,bind(el,binding,vnode)});

註：Vue.directive要寫在new Vue之前

參數說明：el 是使用自定義指令的標簽

　　　　　binding.value是指令中等號後的值

　　　　　binding.arg是指令中冒號後值

例子:

main.js

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

Vue.config.productionTip = false
Vue.directive("test",{
  bind(el,binding,vnode){
    el.style.background 
 
= "red"
  }
})

//bind.value 是指指令等號後的內容
Vue.directive(‘green‘,{
  bind(el,binding,vnode){
    if(binding.value=="200"){
      el.style.background = "green"
      el.style.width = "200px"
      el.style.height = "200px"
    }
    
  }
})

//bind.value 是指指令冒號後面的內容
Vue.directive(‘orange‘,{
  bind(el,binding,vnode){
    
 
if(binding.arg =="set"){
      el.style.background = "orange"
      el.style.width = "200px"
      el.style.height = "200px"
    }
  }
})
/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  components: { App },
  template: ‘<App/>‘
})

Home.vue

<template>
<div>
    <
 
div class="one" v-test></div>
    <div v-green="200"></div>
    <div v-orange:set></div>
</div>
</template>
<script>
export default {
  name: "Home",
  data () {
    return {
    };
  }
}
</script>
<style lang="css" scoped>
.one{
    width: 200px;
    height: 200px;
}
</style>

Vue的自定義指令