1. DOM implementation of automatic focus
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 <style>
10 #app {
11 width: 600px;
12 margin: 10px auto;
13 }
14
15 .tb {
16 border-collapse: collapse;
17 width: 100%;
18 }
19
20 .tb th {
21 background-color: #0094ff;
22 color: white;
23 }
24
25 .tb td,
26 .tb th {
27 padding: 5px;
28 border: 1px solid black;
29 text-align: center;
30 }
31
32 .add {
33 padding: 5px;
34 border: 1px solid black;
35 margin-bottom: 10px;
36 }
37 </style>
38 </head>
39
40 <body>
41 <div id="app">
42 <div class="add">
43 编号: <input id="id" type="text" v-model="id">品牌名称: <input v-model="name" type="text">
44 <button @click="add">添加</button>
45 </div>
46 <div class="add">品牌名称：<input type="text"></div>
47 <div>
48 <table class="tb">
49 <tr>
50 <th>number</th>
51 <th>Brand Name</th>
52 <th>Founded</th>
53 <th>Operation</th>
54 </tr>
55 <tr v-if="list.length <= 0">
56 <td colspan="4">No brand data</td>
57 </tr>
58 <!-- When adding: key="index", all parameters must be written completely -->
59 <tr v-for="(item,key,index) in list" :key="index">
60 <td>{{item.id}}</td>
61 <td>{{item.name}}</td>
62 <td>{{item.ctime}}</td>
63 <!-- When using vue to register events, we can't see it in the dom element -->
64 <td><a href="javascript:void(0)" @click="del(item.id)">删除</a></td>
65 </tr>
66 </table>
67 </div>
68
69 </div>
70 </body>
71
72 </html>
73 <script src="vue2.4.4.js"></script>
74 <script>
75 var vm = new Vue({
76 el: "#app",
77 data: {
78 id: 0,
79 name: '',
80 list: [
81 { "id": 1, "name": "itcast", "ctime": Date() },
82 { "id": 2, "name": "黑马", "ctime": Date() }
83 ]
84 },
85 mounted(){
86 this.myFocus()
87 },
88 methods: {
89 add: function () {
90 //Push the id and name to the list array
91 this.list.push({ "id": this.id, "name": this.name, "ctime": Date() });
92 },
93 del:function(id) {
94
95 // Get the subscript according to the id
96 // By default, traverse the list collection and pass each element in the collection into the function's item,
97 var index = this.list.findIndex(function(item){
98 //According to the id attribute in the item to determine whether the item is in the above id
99 //Corresponding data, if it returns a true, otherwise returns false, continue to traverse the following data, and so on
100 return item.id ==id; //If it returns true, the findIndex method will return the id corresponding to this item to the outside for acceptance
101 });
102 // Delete the corresponding data in the list set according to the subscript
103 // splice (start to delete the subscript, delete the length)
104 this.list.splice(index,1);
105 },
106 // get the focus of the element
107 //No one triggers this event
108 // Solution: There is an event called mounted in vue, this event will be triggered automatically when the code in vue is loaded
109 myFocus:function(){
110 // The id object obtained by js
111 var idObj = document.getElementById('id');
112 idObj.focus();
113 }
114 }
115 });
116
117 </script>
2. Automatically obtain the focus of the ref attribute implementation in 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 <style>
10 #app {
11 width: 600px;
12 margin: 10px auto;
13 }
14
15 .tb {
16 border-collapse: collapse;
17 width: 100%;
18 }
19
20 .tb th {
21 background-color: #0094ff;
22 color: white;
23 }
24
25 .tb td,
26 .tb th {
27 padding: 5px;
28 border: 1px solid black;
29 text-align: center;
30 }
31
32 .add {
33 padding: 5px;
34 border: 1px solid black;
35 margin-bottom: 10px;
36 }
37 </style>
38 </head>
39
40 <body>
41 <div id="app">
42 <div class="add">
43 编号: <input id="id" ref="id" type="text" v-model="id">品牌名称: <input v-model="name" type="text">
44 <button @click="add">添加</button>
45 </div>
46 <div class="add">品牌名称：<input type="text"></div>
47 <div>
48 <table class="tb">
49 <tr>
50 <th>number</th>
51 <th>Brand Name</th>
52 <th>Founded</th>
53 <th>Operation</th>
54 </tr>
55 <tr v-if="list.length <= 0">
56 <td colspan="4">No brand data</td>
57 </tr>
58 <!-- When adding: key="index", all parameters must be written completely -->
59 <tr v-for="(item,key,index) in list" :key="index">
60 <td>{{item.id}}</td>
61 <td>{{item.name}}</td>
62 <td>{{item.ctime}}</td>
63 <!-- When using vue to register events, we can't see it in the dom element -->
64 <td><a href="javascript:void(0)" @click="del(item.id)">删除</a></td>
65 </tr>
66 </table>
67 </div>
68
69 </div>
70 </body>
71
72 </html>
73 <script src="vue2.4.4.js"></script>
74 <script>
75 var vm = new Vue({
76 el: "#app",
77 data: {
78 id: 0,
79 name: '',
80 list: [
81 { "id": 1, "name": "itcast", "ctime": Date() },
82 { "id": 2, "name": "黑马", "ctime": Date() }
83 ]
84 },
85 mounted(){
86 this.myFocus()
87 },
88 methods: {
89 add: function () {
90 // Push the id and name to the list array
91 this.list.push({ "id": this.id, "name": this.name, "ctime": Date() });
92 },
93 del:function(id) {
94
95 // Get the subscript according to the id
96 // By default, traverse the list collection and pass each element in the collection into the function's item,
97 var index = this.list.findIndex(function(item){
98 //According to the id attribute in the item to determine whether the item is in the above id
99 //Corresponding data, if it returns a true, otherwise returns false, continue to traverse the following data, and so on
100 return item.id ==id; //If it returns true, the findIndex method will return the id corresponding to this item to the outside for acceptance
101 });
102 // Delete the corresponding data in the list set according to the subscript
103 // splice (start to delete the subscript, delete the length)
104 this.list.splice(index,1);
105 },
106 // get the focus of the element
107 //No one triggers this event
108 // Solution: There is an event called mounted in vue, this event will be triggered automatically when the code in vue is called completed
109 myFocus:function(){
110 // The id object obtained by js
111 // var idObj = document.getElementById('id'); //Method 1: dom operation view and model are coupled together again
112 // Method 2: Set the event through $refs.id by setting ref="'id"
113 this.$refs.id.focus();
114 }
115 }
116 });
117
118 </script>
3. Automatic focus is achieved by using custom instructions in 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 <style>
10 #app {
11 width: 600px;
12 margin: 10px auto;
13 }
14
15 .tb {
16 border-collapse: collapse;
17 width: 100%;
18 }
19
20 .tb th {
21 background-color: #0094ff;
22 color: white;
23 }
24
25 .tb td,
26 .tb th {
27 padding: 5px;
28 border: 1px solid black;
29 text-align: center;
30 }
31
32 .add {
33 padding: 5px;
34 border: 1px solid black;
35 margin-bottom: 10px;
36 }
37 </style>
38 </head>
39
40 <body>
41 <div id="app">
42 <div class="add">
43 编号: <input id="id" v-color="color" v-focus type="text" v-model="id">品牌名称: <input v-model="name" type="text">
44 <button @click="add">添加</button>
45 </div>
46 <div class="add">品牌名称：<input type="text"></div>
47 <div>
48 <table class="tb">
49 <tr>
50 <th>number</th>
51 <th>Brand Name</th>
52 <th>Founded</th>
53 <th>Operation</th>
54 </tr>
55 <tr v-if="list.length <= 0">
56 <td colspan="4">No brand data</td>
57 </tr>
58 <!-- When adding: key="index", all parameters must be written completely -->
59 <tr v-for="(item,key,index) in list" :key="index">
60 <td>{{item.id}}</td>
61 <td>{{item.name}}</td>
62 <td>{{item.ctime}}</td>
63 <!-- When using vue to register events, we can't see it in the dom element -->
64 <td><a href="javascript:void(0)" @click="del(item.id)">删除</a></td>
65 </tr>
66 </table>
67 </div>
68
69 </div>
70 </body>
71
72 </html>
73 <script src="vue2.4.4.js"></script>
74 <script>
75 // First define the custom instruction
76 // directives have two parameters
77 //Parameter 1: Custom instruction v-focus
78 //Parameter two: object, many methods can be added to the object
79 // Add an inserted method: and this method has two parameters:
80 //Parameter 1: el The object currently using the custom command
81 //Parameter two: obj refers to the expression set after it (v-color="color" )
82 //{expression:"color",value:"red",}
83 Vue.directive("focus",{
84 inserted:function(el,obj){
85 // console.log(el);
86 el.focus ();
87 }
88 });
89 Vue.directive("color",{
90 inserted:function(el,obj){
91 // obj.style.color = "red";
92 obj.style.color = obj.value;
93 console.log(obj.value);
94 }
95 });
96
97 var vm = new Vue({
98 el: "#app",
99 data: {
100 color:"green",
101 id: 0,
102 name: '',
103 list: [
104 { "id": 1, "name": "itcast", "ctime": Date() },
105 { "id": 2, "name": "黑马", "ctime": Date() }
106 ]
107 },
108 // mounted(){
109 // this.getFocus()
110 // },
111 methods: {
112 add: function () {
113 //Push id and name to the list array
114 this.list.push({ "id": this.id, "name": this.name, "ctime": Date() });
115 },
116 del:function(id) {
117
118 // Get the subscript according to the id
119 // By default, traverse the list collection and pass each element in the collection into the function's item,
120 var index = this.list.findIndex(function(item){
121 //According to the id attribute in the item to determine whether the item is in the above id
122 //Corresponding data, if it returns a true, if it returns false, continue to traverse the following data, and so on
123 return item.id ==id; //If it returns true, the findIndex method will return the id corresponding to this item to the outside for acceptance
124 });
125 // Delete the corresponding data in the list set according to the subscript
126 // splice (start to delete subscript, delete length)
127 this.list.splice(index,1);
128 }
129 }
130 });
131
132 </script>