指令
形式：元素的属性
自定义指令允许你对DOM元素进行底层操作(其实Vue作为一个框架是面向数据的，它更支持你面向数据编程)
内置指令和自定义指令，通过自己定义指令可以了解指令的实质
常见的内置指令
- v-show| v-if|v-else-if (区别：前者：CSS:display-none控制加入了DOM Tree， 后者是没有加入DOM Tree)
2. v-for: 遍历列表，对象，整数（从1开始） (是否设置key值，动态双向绑定)
3. v-cloak结合 display:none; 防止抖动
4. v-bind: 动态绑定 缩写 ：
5. v-model: 一些表单元素的双向绑定
6. v-html （XSS警告）
7. v-text
8. v-once
9.** v-on 事件处理（敲黑板！划重点）** 缩写 @
10. v-pre
自定义指令使用方式：先注册后使用
- 符合注册指令：全局，局部(只可以在绑定的视图中使用)
// 全局注册
Vue.directive(id,[definition])
// 局部注册 v-focus
new Vue({
el:"#app",
directives: {
focus: {
}
}
})
- 使用指令：与Vue提供的内置指令使用方式一样。
<div v-mydirective></div>
// v-mydirective为自己定义的指令
自定义指令的钩子函数
- bind 只调用一次，指令第一次绑定到元素时调用。适合做一些一次性的初始化操作
- inserted 被绑定元素插入父节点的时候调用。
- update 所在组件的vnode更新时调用，
- componentUpdated 指令所在组件的VNode及其子VNode全部更新后调用
- unbind 只调用一次，指令与该元素解绑时调用。
<div id="app">
<input type="text" v-focus>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
// 注册全局的自定义属性
Vue.directive('focus', {
inserted: function(el) {
// 聚焦元素
el.focus();
}
});
const app = new Vue({
el: "#app",
});
</script>
钩子函数中的参数
- el: 指令所绑定的元素，可以用来直接操作DOM
- binding: 一个对象，含有一下属性:
- name 指令名字（除去v-前缀的,v-focus中 name为focus）
- value 指令绑定的值，v-focus="1+2" value = 2
- oldValue 前一个值 仅仅在 update和componentUpdated钩子中可以用。
- expression 字符串形式的指令表达式， v-focus="1+2" expression="1+1"
- arg 指令传递的参数 v-my:foo 其中arg为foo
- modifiers 修饰符
- vnode Vue编译后生成的虚拟节点
- odlVnode上一个虚拟节点 仅仅在update和componentUpdated钩子中使用
<body>
<div id="app" v-demo:foo.a.b="message">
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
// 定义全局的指令
Vue.directive('demo', {
bind: function(el, binding, vnode) {
var s = JSON.stringify;
el.innerHTML =
'1. name: ' + s(binding.name) + '<br />' +
'2. value: ' + s(binding.value) + '<br />' +
'3. expression: ' + s(binding.expression) + '<br />' +
'4. argument: ' + s(binding.arg) + '<br />' +
'5. modifiers: ' + s(binding.modifiers) + '<br />' +
'6. vnode keys: ' + Object.keys(vnode).join(', ') + '<br />';
}
// Object.keys() 获取对象的全部属性
});
const app = new Vue({
el: "#app",
data: {
message: "Vue.js很牛逼！"
},
methods: {
}
})
</script>
</body>
函数简写
如果bind和update的行为相同，且该自定义指令只需要使用这两个函数，可以简写。
<div id="app">
<p v-color-swatch="color">我就是很帅！</p>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
// 这里的function代替了bind和update钩子函数
Vue.directive('color-swatch', function(el, binding) {
console.log(el, binding);
el.style.backgroundColor = binding.value;
});
const app = new Vue({
el: "#app",
data: {
color: "red"
}
})
</script>
给指令传入对象字面量
传给指令的值可以使任何合法的JavaScript表达式
传入对象字面量
<div id="app">
<div v-demo="{color:'white',text:'hello!'}"></div>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
Vue.directive('demo', function(el, binding) {
const {
color,
text
} = binding.value;
console.log(color);
console.log(text);
})
const app = new Vue({
el: "#app"
})
</script>
自定义指令的实战：模拟天猫导航
https://github.com/suckitfa/dropdown-menu.git
参考
- 《Vue.js从入门到实战》
- Vue官方文档