过滤器
概念:Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示;
过滤器调用时格式 {{ name | 过滤器的名称}}
1.可用于替换元素
如下,将善良替换成美丽,动人
<body>
<div id="app">
<p>{{ msg | msgFormat('美丽', '动人') | test}}</p>
</div>
<script type="text/javascript">
//定义一个过滤器,叫 msgFormat,要在 Vue实例之前定义
Vue.filter('msgFormat', function(msg, arg, arg2){
//字符串replace方法,第一个参数,除了写一个字符串还可以写一个正则
return msg.replace(/善良/g, arg +arg2)//g是指全局匹配
})
Vue.filter('test', function(msg){
return msg + '+++++++++'
})
var vm=new Vue({
el:'#app',
data:{
msg: '曾经我是一个善良的少年,善良的我'
},
methods:{},
})
</script>
</body>
私有过滤器
HTML代码
<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>
filters:{
// 定义私有过滤器私有局部过滤器,只能在 当前 VM 对象所控制的 View 区域进行使用
dateFormat: function(dateStr, pattern)
{
var dt = new Date(dateStr) //转化
var y = dt.getFullYear()
var m = (dt.getMonth()).toString().padStart(2, '0') //用String的padStart方法补齐 2是指填充到两位,0指用0填充
var d = (dt.getDate()).toString().padStart(2,'0')
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} 私有`
}
}
},
全局过滤器
// 定义一个全局过滤器
Vue.filter('dataFormat', function (input, pattern = '') {
var dt = new Date(input);
// 获取年月日
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart(2, '0');
var d = dt.getDate().toString().padStart(2, '0');
// 如果 传递进来的字符串类型,转为小写之后,等于 yyyy-mm-dd,那么就返回 年-月-日
// 否则,就返回 年-月-日 时:分:秒
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`;
} else {
// 获取时分秒
var hh = dt.getHours().toString().padStart(2, '0');
var mm = dt.getMinutes().toString().padStart(2, '0');
var ss = dt.getSeconds().toString().padStart(2, '0');
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}
});
筛选
- 筛选框绑定到 VM 实例中的 searchName 属性:
<hr> 输入筛选名称:
<input type="text" v-model="searchName">
- 在使用 v-for 指令循环每一行数据的时候,不再直接 item in list,而是 in 一个 过滤的methods 方法,同时,把过滤条件searchName传递进去:
<tbody>
<tr v-for="item in search(searchName)">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td>
<a href="#" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
- search 过滤方法中,使用 数组的 filter 方法进行过滤:
search(name) {
return this.list.filter(x => {
return x.name.indexOf(name) != -1;
});
}
自定义修饰符
//自定义全局按键修饰符
Vue.config.keyCodes.f2 = 113
自定义指令
自定义全局和局部的
// 自定义全局指令 v-focus,为绑定的元素自动获取焦点:
Vue.directive('focus', {
inserted: function (el) { // inserted 表示被绑定元素插入父节点时调用
el.focus();
}
});
// 自定义局部指令 v-color 和 v-font-weight,为绑定的元素设置指定的字体颜色 和 字体粗细:
directives: {
color: { // 为元素设置指定的字体颜色
bind(el, binding) {
el.style.color = binding.value;
}
},
'font-weight': function (el, binding2) { // 自定义指令的简写形式,等同于定义了 bind 和 update 两个钩子函数
el.style.fontWeight = binding2.value;
}
}
使用方法
<input type="text" v-model="searchName" v-focus v-color="'red'" v-font-weight="900">
Vue实例的生命周期
- 什么是生命周期:从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期!
生命周期钩子:就是生命周期事件的别名而已; 生命周期钩子 = 生命周期函数 = 生命周期事件 主要的生命周期函数分类:
创建期间的生命周期函数: beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好 data 和 methods 属性
created:实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,此时还没有开始 编译模板
beforeMount:此时已经完成了模板的编译,但是还没有挂载到页面中
mounted:此时,已经将编译好的模板,挂载到了页面指定的容器中显示 运行期间的生命周期函数:
beforeUpdate:状态更新之前执行此函数, 此时 data 中的状态值是最新的,但是界面上显示的
数据还是旧的,因为此时还没有开始重新渲染DOM节点 updated:实例更新完毕之后调用此函数,此时 data 中的状态值 和
界面上显示的数据,都已经完成了更新,界面已经被重新渲染好了! 销毁期间的生命周期函数:
beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。 destroyed:Vue 实例销毁后调用。调用后,Vue
实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
本文转载于这个博客,可跳转阅读
https://blog.csdn.net/qq_42068550/article/details/89636098