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>
