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>
页面效果：
方法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>
页面效果：
方法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>
页面效果：
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>
页面效果：
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>
页面显示效果：
注意：若时间和日期之间的链接符号想改变的话，可以通过传参的方式更改。例如，在过滤器的处理函数中添加除了默认参数（这里是time）的第二个参数(这里是seprator), 并且在return 中替换原有的符号（‘-’），同时在使用过滤器的数据中的过滤器添加参数（此参数为要更改的符号）
原文地址：https://www.cnblogs.com/lirun-rainbow/p/9833806.html
时间： 2024-10-09 10:57:14