vue自定义指令
(1):钩子函数
- bind()：当指令第一次绑定到元素时被调用，并且只会被调用一次，一般用于初始化配置；
- bind()：当指令第一次绑定到元素时被调用，并且只会被调用一次，一般用于初始化配置；
- inserted()：当绑定的元素被插入到父元素时被调用；
- update()：当绑定的组件被更新时调用，但会在其子组件更新之前被调用；
- componentUpdated()：当绑定的组件及其子组件全部更新之后被调用；
- unbind()：当指令和绑定的元素解绑时被调用，并且只会被调用一次
(2): 钩子函数的第二个参数有如下几种
name 绑定的指令名称
value 绑定的值 比如 v-color="red" ,这个red就是value值
-
expression 表达式 比如 v-color.a="red" ,这个red就是表达式
image.png -
modifiers
image.png
(3):钩子函数的第三个参数是vnode ，Vue 编译生成的虚拟节点
(4):钩子函数的第四个参数是oldVnode,上一个虚拟节点，
(5):自定义指令的两种方式
- 全局自定义指令
Vue.directive("color",{
bind(el,binding) {
console.log("bind",binding);
console.log("el",el);
el.style.color = binding.value
}
})
- 局部自定义指令
directives: {
color: {
inserted(el,binding) {
console.log("bind",binding);
console.log("el",el);
el.style.color = binding.value
}
}
}
(6):全局自定义指令引入的两种方式
1:第一种
- 新建utils文件夹，新建 directive.js
import Vue from 'vue'
Vue.directive("color",{
bind(el,binding) {
console.log("bind",binding);
console.log("el",el);
el.style.color = binding.value
}
})
- main.js中引入
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
// 引入自定义指令
import './utils/directive'
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
页面展示如下
image.png
2: 第二种
- 新建utils文件夹，新建 directive.js
export default (Vue) => {
Vue.directive("color",{
inserted(el,binding) {
console.log("bind",binding);
console.log("el",el);
el.style.color = binding.value
}
})
}
- main.js中引入
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
// 引入自定义指令
import directive from './utils/directive'
Vue.use(directive)
import './assets/css/common.css'
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
页面展示如下
image.png
3:第三种，使用install
- 新建utils文件夹，新建 directive.js
export default {
install(Vue) {
Vue.directive("color",{
inserted(el,binding) {
console.log("bind",binding);
console.log("el",el);
el.style.color = binding.value
}
})
}
}
- main.js中引入
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
// 引入自定义指令
import directive from './utils/directive'
Vue.use(directive)
import './assets/css/common.css'
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
页面展示如下
image.png
4:第四种，批量注册自定义指令
- 新建utils文件夹，新建 index.js
const color = {
inserted(el,binding) {
console.log("bind",binding);
console.log("el",el);
el.style.color = binding.value
}
}
export default color
- 新建utils文件夹，新建 directive.js
import color from './index.js'
// 自定义指令
const directives = {
color,
}
export default {
install(Vue) {
Object.keys(directives).forEach((key) => {
console.log("key",key);
console.log("Object.keys(directives)",Object.keys(directives));
Vue.directive(key, directives[key])
})
}
}
- main.js中引入
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
// 引入自定义指令
import directive from './utils/directive'
Vue.use(directive)
import './assets/css/common.css'
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
页面展示如下
image.png