<div id="app">
<input type="text" v-focus>
<div v-demo:foo.a.b='message'></div>
<p v-pin:left='300'>远离direction 300px</p>
<p v-abbreviation="'blue'">在bind和update时触发相同的行为,不关心其他钩子,此时可以使用简写形式</p>
<!-- 传入对象字面量 -->
<p v-literal="{a: '1', b: '2'}"></p>
</div>
// 钩子函数
// 1.bind 只调用一次,指令第一次绑定到元素时调用
// 2.inserted 被绑定的元素插入到父节点时调用
// 3.update 所在组件的VNode更新时调用,可能发生在其子组件VNode更新之前
// 4.componentUpdated 指令所在组件的VNode及其子VNode全部更新后调用
// 5.unbind 只调用一次,指令与元素解绑时调用
// Vue.directive('focus',{
// inserted: function(el) {
// el.focus();
// console.log(el, binding);
// }
// })
Vue.directive('abbreviation', function(el ,binding){
el.style.color = binding.value;
})
var vm = new Vue({
el: '#app',
data: {
message: 'hello!',
// blue: 'blue'
},
directives: {
focus: {
inserted: function(el, binding, vnode, oldNode) {
el.focus();
console.log(el, binding, vnode, oldNode);
}
},
demo:{
bind: function(el, binding, vnode, oldNode) { //除了el外,其余的参数都是可选的, el 是指令所绑定的元素
var s = JSON.stringify;
el.innerHTML = `
name: ${s(binding.name)} 指令名<br>
value: ${s(binding.value)} 指令的绑定值 v-demo='1 + 1',绑定值为2<br>
expression: ${s(binding.expression)} 自字符串形式的指令表达式 v-demo="1 + 1", 表达式为"1 + 1"<br>
argument: ${s(binding.arg)} 传给指令的参数,可选 v-demo:foo ,参数为foo <br>
modifiers: ${s(binding.modifiers)} 一个包含修饰符的对象 v-demo.a.b 修饰符对象为{a:true, b:true}<br>
vnode key: ${Object.keys(vnode).join(', ')}
`;
}
},
pin: {
bind:function(el, binding, vnode){
el.style.position= 'fixed';
var s = (binding.arg == 'left' ? 'left' : 'top');
el.style[s] = binding.value + 'px';
}
},
// bind 和 update 时触发相同行为的简写形式
abbreviation: function(el, binding) {
el.style.color = binding.value;
},
literal: function(el, binding){
console.log(binding.value.a);
console.log(binding.value.b);
}
}
})