vue指令02---自动获取焦点(全局自定义指令Vue.directive())和全局过滤器Vue.filter() 的学习

时间:2023-01-30 16:52:28

1.1 自动获取焦点

   在自动获取焦点的学习中涉及到了一个钩子函数 mounted(),它表示页面一加载进来就执行函数里面的内容,(和window.onload相似,这样有助于理解),mounted 钩子函数的名字不能随便更改,而且不能写在 methods 属性里面

   方法1:  在vue中 通过操作 dom 元素来实现自动获取焦点(即使用原生JS实现)

代码如下:

 1 <html lang="en">
 2   <head>
 3     <title>自动获取焦点</title>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1">
 6     <script src="../lib/vue-2.4.0.js"></script>
 7   </head>
 8   <body>
 9     <div id="app">
10       姓名:<input type="text" id="name">
11     </div>
12     <script>
13       var vm = new Vue({
14         el: '#app',
15         data: {
16         name: 'Jack'
17         },
18         mounted(){ // mounted 是钩子函数,它表示页面一加载进来就执行函数里面的内容,(和window.onload相似)
19                    //mounted 钩子函数的名字不能随便更改,而且不能写在 methods 属性里面
20           //console.log(111);  页面加载完成自动执行 1111
21           document.getElementById('name').focus()   //原生的JS方法实现的
22         }
23       })
24     </script>
25   </body>
26 </html>

  页面效果:

       vue指令02---自动获取焦点(全局自定义指令Vue.directive())和全局过滤器Vue.filter() 的学习

 方法2:  在vue中 通过ref 属性,它表示对Dom 的引用,它的属性值可以随便取,但是不能重复

 1 <html lang="en">
 2   <head>
 3     <title>自动获取焦点</title>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1">
 6     <script src="../lib/vue-2.4.0.js"></script>
 7   </head>
 8   <body>
 9     <div id="app">
10        <!-- 通过ref 属性引用 -->
11       姓名:<input type="text" id="name" ref="nameRef">
12     </div>
13     <script>
14       var vm = new Vue({
15         el: '#app',
16         data: {
17         name: 'Jack'
18         },
19         mounted(){ // mounted 是钩子函数,它表示页面一加载进来就执行函数里面的内容,(和window.onload相似)
20                    //mounted 钩子函数的名字不能随便更改,而且不能写在 methods 属性里面
21           //通过 this.$refs.ref的值 来获取 Dom
22           console.log(this.$refs.nameRef);
23           this.$refs.nameRef.focus()
24         }
25       })
26     </script>
27   </body>
28 </html>

页面效果:

vue指令02---自动获取焦点(全局自定义指令Vue.directive())和全局过滤器Vue.filter() 的学习

 

方法3:  在vue中 通过自定义指令,自动获取焦点

        自定义指令通过一个全局方法Vue.directive()创建,它有两个参数,一是自定义指令的名字,可以随便取,但是全部小写; 另一个是一个对象,表示自定义指令的一些配置项      注:在引用自定义指令是,名字前需要加 v-
 
示例代码:
 1 <html lang="en">
 2   <head>
 3     <title>通过自定义指令自动获取标点</title>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1">
 6     <script src="../lib/vue-2.4.0.js"></script>
 7   </head>
 8   <body>
 9     <div id="app">
10       姓名: <input type="text" v-myfocus>
11     </div>
12     <script>
13       // 自定义指令通过一个全局方法Vue.directive()创建,它有两个参数,一是自定义指令的名字,可以随便取,但是全部小写; 另一个是一个对象,表示自定义指令的一些配置项
14 
15        //创建一个名为 myfocus 的自定义指令,这里实际上创建了一个 v-myfocus 指令,元素中也使用 v-myfocus
16       Vue.directive('myfocus', {
17         inserted(el, binding){ 
18          //inserted 是钩子函数,它表示自定义指令插入到标签的时候就执行
19          //inserted()钩子函数有两个参数,el表示使用自定义指令的元素,binding表示自定义指令的信息
20          console.log(el);
21          console.log(binding);
22          el.focus()
23         }
24       })
25       var vm = new Vue({
26         el: '#app',
27         data: {
28 
29         }
30       })
31     </script>
32   </body>
33 </html>

页面效果:

vue指令02---自动获取焦点(全局自定义指令Vue.directive())和全局过滤器Vue.filter() 的学习

3.1 自定义指令2(自定义指令后面跟一个data中的变量)

实例代码:

 

 1 <html lang="en">
 2   <head>
 3     <title>通过自定义指令自动获取标点</title>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1">
 6     <script src="../lib/vue-2.4.0.js"></script>
 7   </head>
 8   <body>
 9     <div id="app">
10         <!-- 引用自定义指令 v-mycolor -->
11       姓名: <input type="text"  v-mycolor="color">
12     </div>
13     <script>
14       //创建一个名为 mycolor 的自定义指令。
15       Vue.directive('mycolor', {
16         inserted(el, binding){
17           console.log(binding);
18           el.style.color = binding.value
19         }
20       })
21       var vm = new Vue({
22         el: '#app',
23         data: {
24           color: '#f00',    // 在data中定义一个变量
25         }
26       })
27     </script>
28   </body>
29 </html>

 

页面效果:

vue指令02---自动获取焦点(全局自定义指令Vue.directive())和全局过滤器Vue.filter() 的学习

2.  创建过滤器 

创建:通过全局方法 Vue.filter() 方法创建过滤器,他有两个参数,第一个是过滤器的名字,第二个是过滤器的处理函数,这个函数有个默认参数,表示要过滤的数据
过滤器的使用:在过滤的数据后面加上管道符 | 过滤器名称 在过滤器名称后面还可以传参数

练习案例代码:

  1 <html lang="en">
  2   <head>
  3     <title>案例练习</title>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1">
  6     <script src="../lib/vue-2.4.0.js"></script>
  7     <style>
  8       #app {
  9         width: 600px;
 10         margin: 100px auto;
 11       }
 12       .top, .middle {
 13         height: 40px;
 14         line-height: 40px;
 15         border: 1px solid #000;
 16         padding-left: 6px;
 17       }
 18       .middle {
 19         margin: 10px 0;
 20       }
 21       table {
 22         border-collapse:collapse;
 23         width: 100%;
 24       }
 25        td,th {
 26         border: 1px solid #000;
 27         padding: 5px;
 28         text-align: center;
 29       }
 30       table th {
 31         background-color: #0094ff;
 32         color: #fff;
 33       }
 34     </style>
 35   </head>
 36   <body>
 37     <div id="app">
 38       <div class="top">
 39         车型:<input type="text" v-model="newType">
 40         车型价格: <input type="text" v-model="newPrice">
 41         <input type="button" value="添加" @click="addData">
 42       </div>
 43       <div class="middle">
 44         车型搜索: <input type="text" placeholder="请输入搜索名称">
 45       </div>  
 46       <table border="0">
 47         <thead>
 48           <tr>
 49             <th>车型</th>
 50             <th>车型价格(万)</th>
 51             <th>添加时间</th>
 52             <th>操作</th>
 53           </tr>
 54         </thead>
 55         <tbody>
 56           <tr v-for="(item, index) in list" :key="index">
 57             <td>{{item.type}}</td>
 58             <td>{{item.price}}</td>
 59             <!-- 过滤器的使用:在过滤的数据后面加上管道符 | 过滤器名称   在过滤器名称后面还可以传参数-->
 60             <td>{{item.cTime | timeFilter('/')}}</td>
 61             <!-- 将index 作为参数传入 -->
 62             <td><a href="#" @click="delData(index)">删除</a></td>
 63           </tr>
 64           <tr v-if="list.length === 0">
 65             <td colspan="4">没有品牌数据</td>
 66           </tr>
 67         </tbody>
 68       </table>
 69     </div>
 70     <script>
 71       // 通过全局方法Vue.filter()方法创建过滤器,他有两个参数,第一个是过滤器的名字,第二个是过滤器的处理函数,这个函数有个默认参数,表示要过滤的数据
 72 
 73       //创建一个时间过滤器 timeFilter,   time 是默认参数 seprator 参数表示时间之间的间隔符号
 74       Vue.filter('timeFilter', function(time, seprator){
 75         console.log(time);   // 控制台:Mon Oct 22 2018 22:38:05 GMT+0800 (中国标准时间)
 76         var y = time.getFullYear();
 77         var m = time.getMonth()+1;
 78         var d = time.getDate();
 79         var h = time.getHours();
 80         var m = time.getMinutes();
 81         var s = time.getSeconds();
 82         return y + '-' + m + '-' + d +  ' ' + h + ':' + m + ':' + s
 83         //return y + seprator + m + seprator + d +  ' ' + h + seprator + m + seprator + s
 84       })  
 85       var vm = new Vue({
 86         el: '#app',
 87         data: {
 88           newType: '',
 89           newPrice: '',
 90           list: [
 91             {type: '宝马', price: 30, cTime: new Date()},
 92             {type: '奔驰', price: 20, cTime: new Date()},
 93             {type: '奥迪', price: 23, cTime: new Date()}
 94           ]
 95         },
 96         methods: {
 97           delData(ind){
 98             this.list.splice(ind, 1);   //splice(删除项的索引, 删除个数)
 99           },
100           addData(){
101             this.list.push({type: this.newType, price: this.newPrice, cTime: new Date()});
102           }
103         }
104       })
105     </script>
106   </body>
107 </html>

页面显示效果:

vue指令02---自动获取焦点(全局自定义指令Vue.directive())和全局过滤器Vue.filter() 的学习

 

注意:若时间和日期之间的链接符号想改变的话,可以通过传参的方式更改。例如,在过滤器的处理函数中添加除了默认参数(这里是time)的第二个参数(这里是seprator),  并且在return 中替换原有的符号(‘-’),同时在使用过滤器的数据中的过滤器添加参数(此参数为要更改的符号)

vue指令02---自动获取焦点(全局自定义指令Vue.directive())和全局过滤器Vue.filter() 的学习

 

vue指令02---自动获取焦点(全局自定义指令Vue.directive())和全局过滤器Vue.filter() 的学习