VUE2的自定义指令

目录

1- 私有自定义指令

2- 全局自定义指令

---

1- 私有自定义指令

在每个vue 组件中，可以在directives节点下声明私有自定义指令。

bind 函数 只调用1次：当指令第一次绑定到元素时调用，当DOM更新时bind函数不会被触发。

update函数 会在每次DOM更新时被调用。

简写形式：如果bind和update函数中的逻辑完全相同，则对象格式的自定义指令可以简写成函数格式。

App.vue： 

2- 全局自定义指令

main.js

import Vue from 'vue'
import App from './App.vue'
// 导入 bootstrap 样式表
import 'bootstrap/dist/css/bootstrap.css'

Vue.config.productionTip = false

//注册全局自定义指令
/* 
Vue.directive('color', {
  bind (el, binding) {
    el.style.color = binding.value
  },
  update (el, binding) {
    el.style.color = binding.value
  }
}) 
*/
//简写形式
Vue.directive('color', function (el, binding) {
  el.style.color = binding.value
})
new Vue({
  render: h => h(App)
}).$mount('#app')

效果：