1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <script src="./lib//Vue2.5.17.js"></script>
9 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
10 <link rel="stylesheet" href="./lib/bootstrap-3.3.7-dist/css/bootstrap.css">
11 </head>
12 <body>
13 <div id="app">
14 <div class="panel panel-primary">
15 <div class="panel-heading">
16 <h3 class="panel-title">Panel title</h3>
17 </div>
18 <div class="panel-body table-inline">
19 <label for="id">id:
20 <input type="text" class="form-control">
21 </label>
22
23 <label for="name">name:
24 <input type="text" class="form-control" id="name" v-focus>
25 </label>
26 </div>
27 </div>
28
29 </div>
30
31 <script>
32 //定义全局指定,focus为自定义指令名称，调用时必须加 v-
33 Vue.directive("focus",{
34 //如果focus绑定到哪个元素，el就代表被绑定的那个元素。
35 //注意：在每个函数中，第一个参数，永远是el，el是一个原和一的js对象。
36 bind : function(el){ //当指定一绑定到元素上的时候就会立即执行这个bind函数，只触发一次
37
38 },
39 inserted : function(el){ //inserted表示元素插入到DOM中的时候，会执行inserted函数，只触发一次
40 el.focus();
41 },
42 updated : function(){ //当VNode更新的时候会执行updated，可能会触发多次
43
44 }
45
46 })
47
48 var vm = new Vue({
49 el : "#app"
50 })
51 </script>
52 </body>
53 </html>
原文地址：https://www.cnblogs.com/winter-shadow/p/10171297.html
时间： 2024-10-12 05:19:18