Vue2.0文档学习及案例总结之----Custom Directives@慕课网原创_慕课网

vue2.0探索总结之---Custom Directives

直接上干货，文档及注释是最好的介绍
以下皆为最新版本的实例演示，并会及时更新


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Directive</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<h4>Intro</h4>
<p>代码复用的主要形式和抽象是组件——然而，有的情况下,你仍然需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令</p>
<div id="app">
<input v-focus>
<inputs ></inputs>
</div>
<script>
// 注册全局指令 ：v-focus,一般一个页面只能聚焦一个元素
Vue.directive('focus', {
inserted: function (el) {
el.focus()
}
});
Vue.component('inputs',{
template:'<input type="text" v-focus>',
//注册局部指令
directives: {
focus: {
inserted: function () {
//                    el.focus();
console.log('focused');
}
}
}
});
new Vue({
el: '#app',
})
</script>
<h4>Hook Functions</h4>
<ul>
<li>bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。</li>
<li>inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。</li>
<li>update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化</li>
<li>componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。</li>
<li>unbind: 只调用一次， 指令与元素解绑时调用。</li>
</ul>
<div id="hook-arguments-example" v-demo:hello.a.b="message"></div>
<script>
Vue.directive('demo', {
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 keys: ' + Object.keys(vnode).join(', ')
}
});
new Vue({
el: '#hook-arguments-example',
data: {
message: 'hello!'
}
})
</script>
<h4>Directive Hook Arguments(钩子函数参数简写)</h4>
<div id="app1">
<div v-demo="{ color: 'red', text: 'hello!' }"></div>
</div>
<script>
//v-demo利用js的对象字面量
Vue.directive('demo', function (el, binding) {
console.log(binding.value.color);// => "blue"
console.log(binding.value.text);  // => "hello!"
el.style.color = binding.value.color;
el.innerHTML = binding.value.text;
console.log(el.style.backgroundColor);
});
new Vue({
el: '#app1'
})
</script>
</body>

</html>

Vue2.0文档学习及案例总结之----Custom Directives原创