文章目录
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>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
