Vue--由自動獲取焦點引出的DOM、mounted、自定義指令
阿新 • • 發佈：2017-11-19
order spl type bottom fcc auto 表達式 hit 默認
一.自動獲取焦點的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; 22color: 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--由自動獲取焦點引出的DOM、mounted、自定義指令