Vue.js自定义指令
2020-06-21 本文已影响0人
爱学习的代代
一、指定的定义
1、指令是指带有
v-前缀的特殊实行，指令用于在表达式的值发生变化时，将某些行为应用到DOM上。
<p v-if="seen">现在你能看到我了</p>
...
data: {
seen: true
}
二、除了Vue框架给出的指令之外，我们还可以自定义指令。
使用 Vue.directive('指令名', {
省略的钩子函数等。
})
完整的代码样例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js自定义指令</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app" v-peter:hello.a.b="message"></div>
<script>
Vue.directive('peter', {
bind: function(el, binding, vnode) {
var s = JSON.stringify
el.innerHTML =
'name: ' + s(binding.name) + '<br>' +
'value: ' + s(binding.value) + '<br>' +
'expression: ' + s(binding.expression) + '<br>' +
'argument: ' + s(binding.arg) + '<br>' +
'modifiers: ' + s(binding.modifiers) + '<br>' +
'vnode: ' + Object.keys(vnode).join(', ')
}
}),
new Vue({
el: '#app',
data: {
message: '代代学vue'
}
})
</script>
</body>
</html>
说明：
-
peter为声明的指令名 -
hello为peter指令的参数，跟随指令之后，以：分割。 -
a b为修饰符： 修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。 -
message为表达式
- binding.name 是指令的名 peter
- binding.value 是表达式的值 代代学vue
- binding.expression 是表达式 message
- binding.argument 是指令的参数 hello
- binding.modifiers: 是包含指令的修饰符的对象。为{ "a": true, "b": true}
