文章目录

1 vuejs过滤器1.1 定义及语法1.2 传递参数1.3 使用连续过滤器1.4 私有过滤器1.5 过滤器实际使用1.5.1 格式化日期1.5.2 使用momentjs 2 按键修饰符2.1 普通按键修饰符2.2 自定义按键修饰符 3 vue实例生命周期3.1 生命周期定义3.2 生命周期图示3.3 生命周期函数示例

1 vuejs过滤器

1.1 定义及语法

过滤器 概念：Vue.js允许自定义过滤器，可被用作一些常见的文本格式化。 过滤器可以用在两个地方：mustache即{{ }}插值和v-bind 表达式。过滤器应该被添加在JavaScript表达式的尾部，由管道符：|指示；

过滤器的定义语法：Vue.filter('过滤器的名称', function(msg){})，该函数function第一个参数是过滤器管道符前面传递过来的数据

// 全局过滤器名称 // 过滤器中的 function ，第一个参数，已经被规定死了，永远都是 过滤器 管道符前面 传递过来的数据 Vue.filter('过滤器的名称', function (data) { return data + '123' })

以下例子所需要的实例：

// 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { msg: '你好，你很好啊' }, methods: {} });

1.2 传递参数

<div id="app"> <p>{{ msg | msgFormat('haha','123') }}</p> </div> // 定义一个 Vue 全局的过滤器，名字叫做 msgFormat Vue.filter('msgFormat', function (msg,arg,arg1) { // 字符串的 replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则 return msg.replace(/你好/g, arg) })

1.3 使用连续过滤器

<div id="app"> <p>{{ msg | msgFormat('疯狂', '123') | test('你坏') }}</p> </div> // 定义一个 Vue 全局的过滤器，名字叫做 msgFormat Vue.filter('msgFormat', function (msg, arg, arg1) { // 字符串的 replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则 return msg.replace(/你好/g, arg + arg1) }) Vue.filter('test', function (msg,arg) { return msg + '========'+arg; })

vuejs中的过滤器在使用时，可以带小括号也可以不带小括号，带括号就是传递参数，否则就是不传递参数

1.4 私有过滤器

自定义私有过滤器时，如果是私有过滤器，若和全局重名那么优先私有过滤器

// 如何自定义一个私有的过滤器（局部） var vm = new Vue({ el: '#app', data: { dt: new Date() }, methods: {}, filters: { // 定义私有过滤器 过滤器有两个 条件 【过滤器名称 和 处理函数】 // 过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候 优先调用私有过滤器 dateFormat: function (dateStr, pattern = '') { // 根据给定的时间字符串，得到特定的时间 return dataStr + pattern; } } },

1.5 过滤器实际使用

1.5.1 格式化日期

// 全局的过滤器， 进行时间的格式化 // 所谓的全局过滤器，就是所有的VM实例都共享的 Vue.filter('dateFormat', function (dateStr, pattern = "") { // 根据给定的时间字符串，得到特定的时间 var dt = new Date(dateStr) // yyyy-mm-dd var y = dt.getFullYear() var m = dt.getMonth() + 1 var d = dt.getDate() if (pattern.toLowerCase() === 'yyyy-mm-dd') { return `${y}-${m}-${d}` } else { var hh = dt.getHours() var mm = dt.getMinutes() var ss = dt.getSeconds() return `${y}-${m}-${d} ${hh}:${mm}:${ss}` } })

1.5.2 使用momentjs

moment.js（js date）日期格式化处理插件强大，moment.js中文api，当前日期格式化、当前日期向前或者向后推的日期格式化、指定日期格式化调用演示，例如：

//当前日期格式化 moment().format('MMMM Do YYYY, h:mm:ss a'); -> 四月 6日 2015, 3:55:57 下午 moment().format('dddd'); -> 星期一 moment().format("MMM Do YY"); -> 4月 6日 15 moment().format('YYYY [escaped] YYYY'); -> 2015 escaped 2015 moment().format(); -> 2015-04-06T15:55:57+08:00 //--------------------------------------------------- moment().format('YYYY-MM-DD'); -> 2015-04-06 moment().format('YYYY-MM-DD h:mm:ss a'); -> 2015-04-06 03:55:57 下午 //指定日期格式化 moment("20111031", "YYYYMMDD").fromNow(); -> 3年前 moment("20120620", "YYYYMMDD").fromNow(); -> 3年前 moment().startOf('day').fromNow(); -> 16小时前 moment().endOf('day').fromNow(); -> 8小时内 moment().startOf('hour').fromNow(); -> 1小时前 // 当前日期向前或者向后推的日期格式化 moment().subtract(10, 'days').calendar(); -> 2015年3月27日 moment().subtract(6, 'days').calendar(); -> 上周二下午3点55 moment().subtract(3, 'days').calendar(); -> 上周五下午3点55 moment().subtract(1, 'days').calendar(); -> 昨天下午3点55 moment().calendar(); -> 今天下午3点55 moment().add(1, 'days').calendar(); -> 明天下午3点55 moment().add(3, 'days').calendar(); -> 本周四下午3点55 moment().add(10, 'days').calendar(); -> 2015年4月16日 //也可以使用下面方式日期格式化 moment().format('L'); -> 2015-04-06 moment().format('l'); -> 2015-04-06 moment().format('LL'); -> 2015年4月6日 moment().format('ll'); -> 2015年4月6日 moment().format('LLL'); -> 2015年4月6日下午3点55 moment().format('lll'); -> 2015年4月6日下午3点55 moment().format('LLLL'); -> 2015年4月6日星期一下午3点55 moment().format('llll'); -> 2015年4月6日星期一下午3点55

此处使用的是 es6的模板字符串方法：es6新增方法

2 按键修饰符

2.1 普通按键修饰符

常用的按键码如下：

.enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right .ctrl .alt .shift .meta

使用时如下：

// 按空格键触发Dosomething事件 <input type="text" @keyup.space="Dosomething">

2.2 自定义按键修饰符

通过Vue.config.keyCodes.名称 = 按键值来自定义案件修饰符的别名： Vue.config.keyCodes.f2 = 113;，此处的f2的键盘码值是113

<label> Name: <input type="text" class="form-control" v-model="name" @keyup.f2="add"> </label> // 自定义全局按键修饰符 Vue.config.keyCodes.f2 = 113

3 vue实例生命周期

3.1 生命周期定义

什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期 生命周期钩子：就是生命周期事件的别名而已； 生命周期钩子 = 生命周期函数 = 生命周期事件 主要的生命周期函数分类：

创建期间的生命周期函数： beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性 created：实例已经在内存中创建OK，此时data 和 methods已经创建OK，此时还没有开始编译模板 beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中 mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示运行期间的生命周期函数： beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点 updated：实例更新完毕之后调用此函数，此时 data 中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了销毁期间的生命周期函数： beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。 destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁

3.2 生命周期图示

如果觉得图片太小看不清，可以在浏览器中单击后放大

3.3 生命周期函数示例

<div id="app"> <input type="button" value="修改msg" @click="msg='No'"> <h3 id="h3">{{ msg }}</h3> </div> <script> var vm = new Vue({ // 创建 Vue 实例，得到 ViewModel el: '#app', data: { msg: 'ok' }, methods: { show() { console.log('执行了show方法') } }, beforeCreate() { // console.log(this.msg) // this.show() }, created() { // console.log(this.msg) // this.show() }, beforeMount() { // console.log(document.getElementById('h3').innerText) // 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串 }, mounted() { // 这是遇到的第4个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了 // console.log(document.getElementById('h3').innerText) // 注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动 }, beforeUpdate() { // 这时候，表示 我们的界面还没有被更新【数据被更新了吗？ 数据肯定被更新了】 /* console.log('界面上元素的内容：' + document.getElementById('h3').innerText) console.log('data 中的 msg 数据是：' + this.msg) */ // 得出结论： 当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和 最新的数据保持同步 }, updated() { console.log('界面上元素的内容：' + document.getElementById('h3').innerText) console.log('data 中的 msg 数据是：' + this.msg) // updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的 } }); </script>