码迷,mamicode.com
首页 > 其他好文 > 详细

Vue--由自动获取焦点引出的DOM、mounted、自定义指令

时间:2017-11-19 11:05:17      阅读:192      评论:0      收藏:0      [点我收藏+]

标签:doctype   initial   method   ted   auto   false   UI   type   cti   

一.自动获取焦点的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--由自动获取焦点引出的DOM、mounted、自定义指令

标签:doctype   initial   method   ted   auto   false   UI   type   cti   

原文地址:http://www.cnblogs.com/mrszhou/p/7858996.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!