vue2.0探索总结之---Custom Directives
直接上干货，文档及注释是最好的介绍
以下皆为最新版本的实例演示，并会及时更新<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Directive</title> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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>
點擊查看更多內容
為 TA 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦