Vue--由自动获取焦点引出的DOMmounted自定义指令
Posted TigerZhang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue--由自动获取焦点引出的DOMmounted自定义指令相关的知识，希望对你有一定的参考价值。
一.自动获取焦点的DOM实现
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>编号</th> 51 <th>品牌名称</th> 52 <th>创立时间</th> 53 <th>操作</th> 54 </tr> 55 <tr v-if="list.length <= 0"> 56 <td colspan="4">没有品牌数据</td> 57 </tr> 58 <!--加入: key="index" 时候必须把所有参数写完整 --> 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 <!-- 使用vue来注册事件时，我们在dom元素中是看不到的 --> 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 //将id和namepush到list数组中 91 this.list.push({ "id": this.id, "name": this.name, "ctime": Date() }); 92 }, 93 del:function(id) { 94 95 // 根据id得到下标 96 // 默认去遍历list集合，将集合中的每个元素传入到function的item里， 97 var index = this.list.findIndex(function(item){ 98 //根据item中的id属性来判断这个item是否是上面id中 99 //对应的数据，如果是返回一个true ,否返回false,继续下面的一条数据的遍历，以此类推 100 return item.id ==id; //如果返回true，那么findIndex方法会将这个item对应的id返回到外面接受 101 }); 102 // 根据下标在list集合中将对应的数据删除 103 // splice(开始删除的下标，删除的长度) 104 this.list.splice(index,1); 105 }, 106 // 得到元素的焦点 107 //这个事件没人触发 108 // 解决方案：在vue中有一个事件叫做mounted，这个事件当vue中的代码加载完成后会自动触发 109 myFocus:function(){ 110 // 通过js得到的id对象 111 var idObj = document.getElementById(‘id‘); 112 idObj.focus(); 113 } 114 } 115 }); 116 117 </script>
二.自动获取焦点vue中ref属性实现
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>编号</th>
51 <th>品牌名称</th>
52 <th>创立时间</th>
53 <th>操作</th>
54 </tr>
55 <tr v-if="list.length <= 0">
56 <td colspan="4">没有品牌数据</td>
57 </tr>
58 <!--加入: key="index" 时候必须把所有参数写完整 -->
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 <!-- 使用vue来注册事件时，我们在dom元素中是看不到的 -->
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 //将id和name push到list数组中
91 this.list.push({ "id": this.id, "name": this.name, "ctime": Date() });
92 },
93 del:function(id) {
94
95 // 根据id得到下标
96 // 默认去遍历list集合，将集合中的每个元素传入到function的item里，
97 var index = this.list.findIndex(function(item){
98 //根据item中的id属性来判断这个item是否是上面id中
99 //对应的数据，如果是返回一个true ,否返回false,继续下面的一条数据的遍历，以此类推
100 return item.id ==id; //如果返回true，那么findIndex方法会将这个item对应的id返回到外面接受
101 });
102 // 根据下标在list集合中将对应的数据删除
103 // splice(开始删除的下标，删除的长度)
104 this.list.splice(index,1);
105 },
106 // 得到元素的焦点
107 //这个事件没人触发
108 // 解决方案：在vue中有一个事件叫做mounted，这个事件当vue中的代码叫做完成后会自动触发
109 myFocus:function(){
110 // 通过js得到的id对象
111 // var idObj = document.getElementById(‘id‘); //方法一： dom操作view与model又耦合在一起了
112 // 方法二:通过 设置ref="‘id" 通过$refs.id设置事件
113 this.$refs.id.focus();
114 }
115 }
116 });
117
118 </script>
三.自动获取焦点用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>编号</th>
51 <th>品牌名称</th>
52 <th>创立时间</th>
53 <th>操作</th>
54 </tr>
55 <tr v-if="list.length <= 0">
56 <td colspan="4">没有品牌数据</td>
57 </tr>
58 <!--加入: key="index" 时候必须把所有参数写完整 -->
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 <!-- 使用vue来注册事件时，我们在dom元素中是看不到的 -->
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 // 先将自定义指令定义好
76 // directives有两个参数
77 //参数一： 自定义指令 v-focus
78 //参数二： 对象，对象中可以添加很多方法
79 // 添加一个inserted方法:而这个方法中又有两个参数：
80 //参数一:el 当前使用自定义指令的对象
81 //参数二：obj 是指它(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 //将id和namepush到list数组中
114 this.list.push({ "id": this.id, "name": this.name, "ctime": Date() });
115 },
116 del:function(id) {
117
118 // 根据id得到下标
119 // 默认去遍历list集合，将集合中的每个元素传入到function的item里，
120 var index = this.list.findIndex(function(item){
121 //根据item中的id属性来判断这个item是否是上面id中
122 //对应的数据，如果是返回一个true ,否返回false,继续下面的一条数据的遍历，以此类推
123 return item.id ==id; //如果返回true，那么findIndex方法会将这个item对应的id返回到外面接受
124 });
125 // 根据下标在list集合中将对应的数据删除
126 // splice(开始删除的下标，删除的长度)
127 this.list.splice(index,1);
128 }
129 }
130 });
131
132 </script>
以上是关于Vue--由自动获取焦点引出的DOMmounted自定义指令的主要内容，如果未能解决你的问题，请参考以下文章
vue指令03---自动获取焦点（自定义指令）和过滤器的学习