Vue.directive
自定义指令的五个钩子函数
下面展示一些 内联代码片。
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-focus="msg" v-model="msg">
</div>
<script src="./vue.js"></script>
<script>
Vue.directive('focus', {
// 五个钩子函数
// 只调用一次, 在指令 和 元素第一次绑定时执行, 此时元素不一定渲染了
// 一般在bind中可以进行指令的初始化 (具体初始化什么内容, 和功能相关)
bind() {
console.log('bind')
},
// 在指令所在元素, 插入到页面中时, 执行 (元素肯定是渲染了)
inserted() {
console.log('inserted')
},
// 当指令的值发生修改时, 触发
update() {
console.log('update')
},
// 会等待当前组件以及子组件的节点都更新完成后, 调用
componentUpdated() {
console.log('componentUpdated')
},
// 当指令 和 元素解绑时触发
unbind() {
console.log('unbind')
}
})
const vm = new Vue({
el: '#app',
data: {
msg: 'hello vue'
}
})
</script>
</body>
</html>
钩子函数的参数
钩子函数有俩个参数
参数1: el 指令所在的元素
参数2: binding 指令相关的信息的对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="app">
<p v-demo:aa.bb.cc.dd="msg">{{ msg }}</p>
</div>
<script src="./vue.js"></script>
<script>
// v-model="msg"
// v-text="msg"
// 完整的指令: v-on:click.prevent.stop="fn"
Vue.directive('demo', {
// 5个钩子函数, 钩子函数的参数
// 5个钩子函数的参数一个样
// 参数1: el 指令所在的元素
// 参数2: binding 指令相关的信息的对象
// (1) name 指令名 => demo
// (2) value 指令的值
// (3) arg 指令的参数 :aa
// (4) modifiers 指令的修饰符 .bb.cc
bind(el, binding) {
console.log(el)
console.log(binding)
}
})
const vm = new Vue({
el: '#app',
data: {
msg: 'hello vue'
}
})
/*
钩子函数的参数
el: 指令所在的当前元素
binding: 指令相关信息的对象
(1) name 指令名
(2) value 指令值
(3) arg 指令的参数 :click
(4) modifiers 指令的修饰符 .prevent.stop
*/
</script>
</body>
</html>
下面是对应参数
下面是自定义指令的用法
- value 的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="app">
<h1 v-red>{{ msg }}</h1>
<h2 v-color="color">你好哇</h2>
<hr>
<p v-text="msg"></p>
<p v-mytext="msg"></p>
</div>
<script src="./vue.js"></script>
<script>
// var div = document.createElement('div')
// div.style.backgroundColor = 'blue'
// 需求1: v-red 指令, 给哪个元素加, 这个元素字体颜色就变成红色
Vue.directive('red', {
// 一般指令的初始化, 都会放到bind中
bind(el, binding) {
el.style.color = 'red'
}
})
// 需求2: v-color = '值'
// el 当前指令所在的元素
// binding 指令相关的信息对象
// (1) name 指令名
// (2) value 指令值
// (3) arg 指令参数 :click
// (4) modifiers 指令的修饰符 .aa.bb
Vue.directive('color', {
bind(el, binding) {
console.log(binding);
// console.log(binding.value)
el.style.color = binding.value
},
update(el, binding) {
el.style.color = binding.value
}
})
// 实现 v-mytext
Vue.directive('mytext', {
bind(el, binding) {
el.innerText = binding.value
},
update(el, binding) {
el.innerText = binding.value
}
})
const vm = new Vue({
el: '#app',
data: {
msg: 'hello vue',
color: 'green'
}
})
</script>
</body>
</html>
- arg 的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="app">
<h1 v-bind:title="msg" v-bind:str="str">{{ msg }}</h1>
<h1 v-mybind:title="msg" v-mybind:str="str">{{ msg }}</h1>
<hr>
<p v-color:bg="bgColor">我是文本, 我希望设置背景颜色</p>
<p v-color:font="fontColor">我是文本, 我希望设置字体颜色</p>
</div>
<script src="./vue.js"></script>
<script>
// el 指令所在的元素
// binding 指令相关的信息
// (1) name 指令名
// (2) value 指令值
// (3) arg 指令参数 :title 属性名
// (4) modifiers 指令的修饰符 .bb .cc
// v-bind:title="msg" 设置元素的 title属性, 值就是 msg的值
Vue.directive('mybind', {
bind(el, binding) {
console.log(binding.arg) // 属性名
// console.log(binding.value) // 属性值
// getAttribute 获取标签属性, setAttribute(name, value)
el.setAttribute(binding.arg, binding.value)
},
update(el, binding) {
el.setAttribute(binding.arg, binding.value)
}
})
// 需求: 对于 v-color 进阶
// v-color:bg="值" :bg就是设置背景颜色
// v-color:font="值" :font就是设置字体颜色
Vue.directive('color', {
bind(el, binding) {
// 可能设置背景, 也可能设置是字体, 判断一下
if (binding.arg === 'bg') {
el.style.backgroundColor = binding.value
}
if (binding.arg === 'font') {
el.style.color = binding.value
}
},
update(el, binding) {
if (binding.arg === 'bg') {
el.style.backgroundColor = binding.value
}
if (binding.arg === 'font') {
el.style.color = binding.value
}
}
})
const vm = new Vue({
el: '#app',
data: {
msg: 'hello vue',
str: '你好哇',
bgColor: 'pink',
fontColor: 'red'
}
})
</script>
</body>
</html>
- modifiers 的使用(修饰符)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="app">
<p v-color:bg.bold.italic="bgColor">我是加粗的文本, 我希望设置背景颜色</p>
<p v-color:font.italic="fontColor">我是倾斜的文本, 我希望设置字体颜色</p>
</div>
<script src="./vue.js"></script>
<script>
// el 指令所在的元素
// binding 指令相关的信息
// (1) name 指令名
// (2) value 指令值
// (3) arg 指令参数 :title 属性名
// (4) modifiers 指令的修饰符 .bb .cc
// 需求: 对于 v-color 进阶
// v-color:bg.bold="值" .bold 字体要加粗
// v-color:font.italic="值" .italic 字体要倾斜
Vue.directive('color', {
bind(el, binding) {
// 可能设置背景, 也可能设置是字体, 判断一下
if (binding.arg === 'bg') {
el.style.backgroundColor = binding.value
}
if (binding.arg === 'font') {
el.style.color = binding.value
}
console.log(binding.modifiers)
if (binding.modifiers.bold) {
el.style.fontWeight = 700
}
if (binding.modifiers.italic) {
el.style.fontStyle = 'italic'
}
},
update(el, binding) {
if (binding.arg === 'bg') {
el.style.backgroundColor = binding.value
}
if (binding.arg === 'font') {
el.style.color = binding.value
}
}
})
const vm = new Vue({
el: '#app',
data: {
msg: 'hello vue',
str: '你好哇',
bgColor: 'pink',
fontColor: 'red'
}
})
</script>
</body>
</html>
自定义指令小技巧
当bind和updata 逻辑一样是可以简写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="app">
<h1 v-color="color">{{ msg }}</h1>
</div>
<script src="./vue.js"></script>
<script>
// Vue.directive('color', {
// bind() {...},
// update() {...}
// })
// 如果配置的钩子函数, bind 和 update 的逻辑, 是一模一样的, 可以简写
// Vue.directive(指令名, 函数) 这个函数表示直接统一配置了 bind 和 update
Vue.directive('color', (el, binding) => {
el.style.color = binding.value
})
const vm = new Vue({
el: '#app',
data: {
msg: 'hello vue',
color: 'red'
}
})
</script>
</body>
</html>