1. 程式人生 > >Vue系列之 => 使用鉤子函式的第二個引數傳參

Vue系列之 => 使用鉤子函式的第二個引數傳參

 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>