1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <script src="./lib//Vue2.5.17.js"></script> 10 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 11 <link rel="stylesheet" href="./lib/bootstrap-3.3.7-dist/css/bootstrap.css"> 12 </head> 13 14 <body> 15 <div id="app"> 16 <div class="panel panel-primary"> 17 <div class="panel-heading"> 18 <h3 class="panel-title">Panel title</h3> 19 </div> 20 <div class="panel-body table-inline"> 21 <label for="id">id: 22 <input type="text" class="form-control"> 23 </label> 24 25 <label for="name">name: 26 <!-- 指定傳參要加引號，不然就會被當成變量，也可以以變量形式放在data中 --> 27 <input type="text" class="form-control" id="name" v-focus="'blue'"> 28 </label> 29 </div> 30 </div> 31 32 </div> 33 34 <script> 35 //定義全局指定,focus為自定義指令名稱，調用時必須加 v- 36 Vue.directive("focus", { 37 //如果focus綁定到哪個元素，el就代表被綁定的那個元素。 38 //注意：在每個函數中，第一個參數，永遠是el，el是一個原和一的js對象。 39 //el 和 binding 都是形參名可以自已定義 40 bind: function (el, binding) { //當指定一綁定到元素上的時候就會立即執行這個bind函數，只觸發一次 41 // el.style.color = "red"; 42 el.style.color = binding.value; 43 // console.log(binding.name); //focus 44 // console.log(binding.value); //blue 45 // console.log(binding.expression); // 'blue' 輸出原始值 46 }, 47 inserted: function (el) { //inserted表示元素插入到DOM中的時候，會執行inserted函數，只觸發一次 48 el.focus(); 49 }, 50 updated: function () { //當VNode更新的時候會執行updated，可能會觸發多次 51 52 } 53 54 }) 55 56 var vm = new Vue({ 57 el: "#app", 58 // directives: { //定義私有指令,跟全局指令一樣 59 // "focus": { 60 // bind: function (el, binding) { //當指定一綁定到元素上的時候就會立即執行這個bind函數，只觸發一次 61 // el.style.color = binding.value; 62 // }, 63 // inserted: function (el) { //inserted表示元素插入到DOM中的時候，會執行inserted函數，只觸發一次 64 // el.focus(); 65 // }, 66 // updated: function () { //當VNode更新的時候會執行updated，可能會觸發多次 67 68 // } 69 70 // } 71 // } 72 }) 73 </script> 74 </body> 75 76 </html>
