Vue基礎篇-自定義指令
阿新 • • 發佈:2018-12-12
1.指令介紹
(a)方便執行某種邏輯關係;
(b)初始化的有些操作使用自定義指令執行不錯;
(c)自定義指令一定避免自帶指令的名稱;
(d)與元件類似,自定義指令也分全域性指令&區域性指令,可根據上一篇進行理解;
2.基本寫法
註冊指令:Vue.directive( 指令名稱 ,配置項)
使用指令:<input v-指令名稱 />
3.全域性元件&區域性元件
//全域性自定義指令 <div id="app"> <p>頁面載入自動獲取焦點:</p> <input v-focus> </div> <script> Vue.directive('focus', { // 註冊一個全域性自定義指令 v-focus inserted: function (el) { // 當繫結元素插入到 DOM 中。 el.focus() } }) new Vue({ el: '#app' }) </script> //區域性自定義指令 <div id="app"> <p>頁面載入自動獲取焦點:</p> <input v-focus> </div> <script> new Vue({ el: '#app', directives: { // 註冊一個區域性的自定義指令 v-focus focus: { inserted: function (el) { el.focus() } } } }) </script>