Vue常用特性-过滤器和生命周期
时间:2020-11-30
本文章向大家介绍Vue常用特性-过滤器和生命周期,主要包括Vue常用特性-过滤器和生命周期使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1.过滤器
1.1过滤器的作用是什么?
格式化数据,比如将字符串格式化为首字母大写,将日期格式化为指定的格式等
1.2自定义过滤器
1.3过滤器的使用
1.4局部过滤器
1.5带参数的过滤器
1.6过滤器的使用
-
Vue.js允许自定义过滤器,可被用于一些常见的文本格式化。
-
过滤器可以用在两个地方:双花括号插值和v-bind表达式。
-
过滤器应该被添加在JavaScript表达式的尾部,由“管道”符号指示
-
支持级联操作
-
过滤器不改变真正的
data
,而只是改变渲染的结果,并返回过滤后的版本 -
全局注册时是filter,没有s的。而局部过滤器是filters,是有s的
<div id="app"> <input type="text" v-model='msg'> <!-- upper 被定义为接收单个参数的过滤器函数,表达式 msg 的值将作为参数传入到函数中 --> <div>{{msg | upper}}</div> <!-- 支持级联操作 upper 被定义为接收单个参数的过滤器函数,表达式msg 的值将作为参数传入到函数中。 然后继续调用同样被定义为接收单个参数的过滤器 lower ,将upper 的结果传递到lower中 --> <div>{{msg | upper | lower}}</div> <div :abc='msg | upper'>测试数据</div> </div> <script type="text/javascript"> // lower 为全局过滤器 Vue.filter('lower', function(val) { return val.charAt(0).toLowerCase() + val.slice(1); }); var vm = new Vue({ el: '#app', data: { msg: '' }, //filters 属性 定义 和 data 已经 methods 平级 // 定义filters 中的过滤器为局部过滤器 filters: { // upper 自定义的过滤器名字 // upper 被定义为接收单个参数的过滤器函数,表达式 msg 的值将作为参数传入到函数中 upper: function(val) { // 过滤器中一定要有返回值 这样外界使用过滤器的时候才能拿到结果 return val.charAt(0).toUpperCase() + val.slice(1); } } }); </script>
过滤器中传递参数
<div id="box"> <!-- filterA 被定义为接收三个参数的过滤器函数。 其中 message 的值作为第一个参数, 普通字符串 'arg1' 作为第二个参数,表达式 arg2 的值作为第三个参数。 --> {{ message | filterA('arg1', 'arg2') }} </div> <script> // 在过滤器中 第一个参数 对应的是 管道符前面的数据 n 此时对应 message // 第2个参数 a 对应 实参 arg1 字符串 // 第3个参数 b 对应 实参 arg2 字符串 Vue.filter('filterA',function(n,a,b){ if(n<10){ return n+a; }else{ return n+b; } }); new Vue({ el:"#box", data:{ message: "哈哈哈" } }) </script>
案例:使用过滤器格式化日期
<body> <div id="app"> <div>{{times | format('yyyy-MM-dd hh:mm:ss')}}</div> </div> <script src="vue.js"></script> <script> Vue.filter('format', function (value, arg) { function dateFormat(date, format) { if (typeof date === "string") { var mts = date.match(/(\/Date\((\d+)\)\/)/); if (mts && mts.length >= 3) { date = parseInt(mts[2]); } } date = new Date(date); if (!date || date.toUTCString() == "Invalid Date") { return ""; } var map = { "M": date.getMonth() + 1, //月份 "d": date.getDate(), //日 "h": date.getHours(), //小时 "m": date.getMinutes(), //分 "s": date.getSeconds(), //秒 "q": Math.floor((date.getMonth() + 3) / 3), //季度 "S": date.getMilliseconds() //毫秒 }; format = format.replace(/([yMdhmsqS])+/g, function (all, t) { var v = map[t]; if (v !== undefined) { if (all.length > 1) { v = '0' + v; v = v.substr(v.length - 2); } return v; } else if (t === 'y') { return (date.getFullYear() + '').substr(4 - all.length); } return all; }); return format; } return dateFormat(value, arg); }) var vm = new Vue({ el: '#app', data: { times: new Date }, methods: { } }) </script> </body>
2.生命周期
1.主要阶段
-
挂载(初始化相关属性)
① beforeCreate
② created
③ beforeMount
④ mounted
-
更新(元素或组件的变更操作)
① beforeUpdate
② updated
-
销毁(销毁相关属性)
① beforeDestroy
② destroyed
2.Vue实例的产生过程
-
事物从出生到死亡的过程
-
Vue实例从创建 到销毁的过程 ,这些过程中会伴随着一些函数的自调用。我们称这些函数为钩子函数
常用的 钩子函数
beforeCreate | 在实例初始化之后,数据观测和事件配置之前被调用 此时data 和 methods 以及页面的DOM结构都没有初始化 什么都做不了 |
---|---|
created | 在实例创建完成后被立即调用此时data 和 methods已经可以使用 但是页面还没有渲染出来 |
beforeMount | 在挂载开始之前被调用 此时页面上还看不到真实数据 只是一个模板页面而已 |
mounted | el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子。 数据已经真实渲染到页面上 在这个钩子函数里面我们可以使用一些第三方的插件 |
beforeUpdate | 数据更新时调用,发生在虚拟DOM打补丁之前。 页面上数据还是旧的 |
updated | 由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子。 页面上数据已经替换成最新的 |
beforeDestroy | 实例销毁之前调用 |
destroyed | 实例销毁后调用 |
<body> <div id="app"> <div>{{msg}}</div> <button v-on:click='red'>更新</button> <button @click='destroy'>销毁</button> </div> <script src="vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { msg: '生命周期' }, methods: { red: function () { this.msg = 'hello生命周期' }, destroy: function () { this.$destroy(); } }, // 挂载(初始化相关属性) beforeCreate: function () { console.log('beforeCreate'); }, created: function () { console.log('created'); }, beforeMount: function () { console.log('beforeMount'); }, mounted: function () { console.log('mounted'); }, // 更新(元素或组件的变更操作) beforeUpdate: function () { console.log('beforeUpdate'); }, updated: function () { console.log('updated'); }, // 销毁(销毁相关属性) beforeDestroy: function () { console.log('beforeDestroy'); }, destroyed: function () { console.log('destroyed'); } }) </script> </body>
原文地址:https://www.cnblogs.com/bky-/p/14061307.html
- 获取可视区域高度赋值给div(解决document.body.clientHeight的返回值为0的问题)
- 根据rpt文件打印报表
- 请善待你身边的“人工智能”
- Java8新日期处理API
- 从MapX到MapXtreme2004[8]-加入文字
- Vue-cli教程
- 动态加载控件
- 一个可以解析嵌套IIF语句的代码
- 快速制作边框的心得
- 通过Nethogs查看服务器网卡流量情况
- 美国国会关于人工智能的提案
- update的多表更新的试验
- silverlight中如何得到ComboBox的选中值(SelectedValue)?
- kvm虚拟化管理平台WebVirtMgr部署-完整记录(安装ubuntu虚拟机)-(5)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- ubuntu配置tftp服务的步骤小结
- CentOS7下GitLab跨大版本升级的方法
- 解决Linux system v 共享内存问题
- Linux下core文件的使用方法详解
- 使用Kubeadm在CentOS7.2上部署Kubernetes集群的方法
- linux systemctl命令详解
- CentOS7使用dnf安装mysql的方法
- Linux中crontab定时任务不执行的原因
- Linux系统为什么要吃掉我的“内存”
- 教你如何修改Linux远程登录欢迎提示信息
- 详解linux 定时任务 crontabs 安装及使用方法
- 解决Centos7安装nginx后提示“Welcome to nginx on Fedora!”,conf.d目录下无default.conf文件
- 详解Linux中PostgreSQL和PostGIS的安装和使用
- 检测ip和port是否可连接的方法
- Linux关机时执行指定脚本功能实现