vue指令02---自动获取焦点（全局自定义指令Vue.directive()）和全局过滤器Vue.filter() 的学习...
2024-05-10 06:52:56
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
vue指令02---自动获取焦点（全局自定义指令Vue.directive()）和全局过滤器Vue.filter() 的学习...相关推荐
- Vue.js：el-input自动获取焦点通过自定义指令实现v-focus
文档 https://v2.cn.vuejs.org/v2/guide/custom-directive.html 使用 el-input组件提供的参数autofocus 自动获取焦点,效果不是很好 ...
- vue从入门到进阶：自定义指令directive，插件的封装以及混合mixins（七）
一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...
- 【Vue基础】自动获取焦点功能
方法一:用特殊字符ref操作DOM 解决的问题: 在vue中操作DOM元素 步骤: 给DOM元素设置ref属性的值 在Vue中的mounted选项下通过this.$refs.属性 获取到要操作的DOM ...
- vue全局自定义指令
知识点:指令定义函数提供了几个钩子函数(可选): bind: 只调用一次,指令第一次绑定到元素时调用,可以定义一个在绑定时执行一次的初始化动作. inserted: 被绑定元素插入父节点时调用(父节点 ...
- vue 全局动态修改title、keywords、description；vue常用挂载的方法，自定义指令；
vue 全局动态修改title.keywords.description 路由: {path: "xxx",name: "xxx",component: () ...
- vue 实现 web端滚动刷新 自定义指令
vue 实现 web端滚动刷新 想实现web端的滚动刷新,我们需要判断滚动已经到达最低部,利用addEventListener监听滚动高度,触发相应的回调函数,激发加载更多数据,那么我们该怎样计算滚动 ...
- vue点击改变data_vue 中自定义指令改变data中的值
通过局部自定义指令实现了一个拖动的指令 html: script: methods:{ set(x,y){ this.data.x=x; this.data.y=y; } }, directives: ...
- input获取焦点vue_在Vue中输入框自动获取焦点的三种方式
原生JS操作DOM 使用mounted钩子函数,它表示页面一加载进来就执行函数里面的内容(和window.onload类似) 1 //html部分 编号: //vue对象 var vm = new V ...
- Vue中输入框自动获取焦点-移动端ios不能唤起键盘解决办法
实现自动唤起键盘 方式一(推荐) this.$nextTick(() => {this.$refs.input.focus() })方式二 setTimeOut(()=>{this.$re ...
最新文章
- [ CCO 2015 ] Artskjid
- linux播放视频的最简单方法
- 接口请求时params与data的区别
- Python3 turtle海龟绘图入门代码示例
- 二叉搜索树与双向链表
- 你连简单的枚举类都不知道，还敢说自己会Java？？？滚出我的公司
- mac json工具_工具类封装的思路 | 钉钉群机器人为例
- 搞定 Linux 命令之进程与数据流，不服来辩！| 原力计划
- android中json解析及使用 （下）
- android应用开发实验报告_聚焦 Android 11: Android 11 应用兼容性
- 总结---Django部分
- 5000系列组装拆卸单成本
- Fibonacci Heaps
- 十三、学习分布式爬虫之字体反爬
- postgresql源码学习（十三）—— 行锁①-行锁模式与xmax
- #微信小程序# 在小程序里面退出退出小程序（navigator以及API--wx.exitMiniProgram）
- Untiy添加水印并保存（包含文字转图片并打水印）
- 剪辑视频怎么学？手把手教你自学视频剪辑
- 2022-2027年中国人力资源外包服务行业市场全景评估及发展战略规划报告
- pythonapp推荐_初学python编程，有哪些不错的软件值得一用？