Vue--由自動獲取焦點引出的DOM、mounted、自定義指令

本文轉載自查看原文 2017-11-19 07:45 8744 Vue.js

一.自動獲取焦點的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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 VUE自定義指令獲取焦點 vue自定義指令實現element中input 自動獲取焦點 Vue--鍵盤修飾符、輸入框自動獲取焦點、搜索監聽、全局(局部)自定義過濾器與指令、some、splice、findIndex、filter、includes、padStart的使用自定義指令----focus獲取焦點事件 vue自定義指令input獲取焦點，及不生效解決辦法 VUe鍵盤修飾符及自定義指令獲取焦點自定義獲取焦點的TextView 頁面一刷新讓文本框自動獲取焦點-- 和自定義v-focus指令 vue--自定義驗證指令 Vue自定義指令獲取DOM元素