【Vue】（2）基础知识 | 过滤器 | 指令
【相关文章】
- 【Vue】（1）基础知识 | MVVM | 基础指令 | v-model | v-for | v-if | v-show | 实例
过滤器
Vue允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在2个地方：mustache插值和v-bind表达式。过滤器应该被添加在Javascript表达式的尾部，有管道符 "|"指示。
- 过滤器定义语法
- 过滤器的function的第一个参数，已被规定了，永远是过滤器管道符前面传递过来的数据
Vue.filter('过滤器的名称',function(data){
});
示例
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<script src="../lib/vue.js">script>
head>
<body>
<div id="app">
<p>{{ msg | msgFormat('我') | test }}p>
div>
<script>
// 定义一个Vue全局的过滤器，名字叫做 msgFormat
Vue.filter('msgFormat',function(msg,arg){
return msg.replace(/你/g,arg);
});
Vue.filter('test',function(msg){
return msg + '==='
})
var vm = new Vue({
el: '#app',
data: {
msg: '曾经的你'
},
methods: {}
});
script>
body>
html>
- 全局过滤器：所有的VM实例都能共享
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<script src="../lib/vue.js">script>
head>
<body>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加品牌h3>
div>
<div class="panel-body form-inline">
<label for="">
id: <input type="text" class="form-control" v-model="id">
label>
<label for="">
name: <input type="text" class="form-control" v-model="name">
label>
<input type="button" value="添加" class="btn btn-primary" @click="add">
<label for="">
搜索关键字: <input type="text" value="搜索" v-model="keywords">
label>
div>
div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>idth><th>Nameth><th>Ctimeth><th>Operationth>
tr>
thead>
<tbody>
<tr v-for="item in search(keywords)" :key="item.id">
<td v-text="item.id">td>
<td v-text="item.name">td>
<td>{{ item.ctime | dateFormat('')}}td>
<td>
<input type="button" value="删除" @click.prevent="del(item.id)">
td>
tr>
tbody>
table>
div>
<script>
//全局过滤器：所有的VM实例都能共享
Vue.filter('dateFormat',function(dateStr,pattern=''){
//根据给定的时间字符串，得到特定的时间
let dt = new Date(dateStr);
// yyyy-mm-dd
let y = dt.getFullYear();
let m = dt.getMonth() + 1;
let d = dt.getDate();
if(pattern && pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`;
}else {
let h = dt.getHours();
let m = dt.getMinutes();
let s = dt.getSeconds();
return `${y}-${m}-${d} ${h}:${m}:${s}`;
}
})
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
keywords: '',
list: [
{id:1,name:'科比',ctime: new Date()},
{id:2,name:'詹姆斯',ctime: new Date()}
]
},
methods: {
add() {
//分析:
//1.获取到id和name,直接从data上获取
//2.组织处一个对象
//3.把这个对象，调用数组的相关方法，添加到当前data上的list中
//4.注意：在Vue中，已经实现数据的双向绑定，每当我们修改了data中的数据，Vue会默认监听到数据的改动，自动把最新的数据，应用到页面上
let data = {id:this.id,name:this.name,ctime:new Date};
this.list.push(data)
this.id = this.name = '';//清空
},
del(id) {
// this.list.some((item,i)=>{
// if(item.id === id) {
// this.list.splice(i,1);
// return true;
// }
// })
let index = this.list.findIndex(item => {
if(item.id === id) {
return true;
}
});
this.list.splice(index,1);
},
search(keywords) {//根据关键字进行数据的搜索
// let newList = [];
// this.list.forEach(item=>{
// if(item.name.indexOf(keywords) !== -1) {
// newList.push(item);
// }
// })
// if(keywords.trim() === '') {
// return this.list;
// }else {
// return newList;
// }
return this.list.filter(item => {
return item.name.includes(keywords) === true ? item : false;
})
}
}
})
script>
body>
html>
自定义私有过滤器(局部): filters对象属性
- 过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致，这时优先调用私有过滤器
var vm = new Vue({
el: '#app',
data: {
dt : new Date()
},
methods: {},
filters: { //自定义私有过滤器，过滤器有两个条件 ：【过滤器名称 、处理函数】
dateFormat: function(dateStr, pattern = '') {
// todos
}
}
})
字符串padStart、padEnd方法
ES6 中字符串新方法： String.prototype.padStart(maxLength, fillString= ’ ’ )或
String.prototype.padEnd(maxLength,fillString=’ ')来填充字符串
// YYYY-MM-DD
var dt = new Date(dateStr);
var y = dt.getFullYear()
var m = (dt.getMonth()+1).toString().padStart(2,'0');//补0
var d = (dt.getDate().toString().padStart(2,'0'));
自定义按键修饰符
<input type="text" v-model="name" @keyup.enter="add" />
Vue内置按键修饰符：
- enter
- tab
- delete (删除、退格 键 )
- esc
- space
- up
- down
- left
- right
除此之外，可以通过全局config.keyCodes对象自定义键值修饰符别名：
Vue.config.keyCodes.f1 = 112; //112是f1的键盘码，可以在网上查询
//使用
v-on:keyup.f1="" 或 v-on:key.112=""
指令
自定义全局指令: 使用Vue.directive() 定义全局的指令
- 参数1：指令的名称，注意：在定义的时候，指令的名称前面，不需要加 v- 前缀；但是，在调用的时候，必须在指令名称前加上 v- 前缀来进行调用。
- 参数2：是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
- 注意：在每个函数中，第一个参数，永远是el，表示被绑定了指令的那个元素，这个el参数，是一个元素的js对象
<input v-focus />
Vue.directive('focus',{
// 每当指令绑定到元素上的时候，会立即执行这个bind函数 【只执行一次】。和样式有关的行为，可以放在这个函数。
bind: function(el,binding,vnode,oldVnode) {
//在元素刚绑定了指令的时候，还没有插入到DOM中区，这时候调用focus方法不起作用
//因为一个元素，只有插入DoM后，才能获取焦点
//样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联样式
el.style.color = 'red'
},
//当元素插入到Dom中时执行inserted 【触发1次】。和js行为有关的行为，最好放在这个函数执行，防止不生效
inserted: function(el,binding,vnode,oldVnode) {
el.focues();
},
// 当VNode更新的时候，会执行updated 【可能会触发多次】
updated: function(el,binding,vnode,oldVnode) {
}
})
//除此之外，还可以给指令传值
<input v-color="'blue'" />
自定义私有指令:使用 directives属性
<h3 v-fontweight="200">
var vm = new Vue({
el: '#app',
directives: {
'fontweight': {
bind: function(el,binding,vnode,oldVnode){
el.style.fontWeight = binding,value;
}
}
}
})
指令简写：等同于 把代码写到 bind 和 update 中去
var vm = new Vue({
el: '#app',
directives: {
//这个function 等同于 把代码写到 bind 和 update 中去
'fontsize': function(el,binding,vnode,oldVnode){
el.style.fontSize = parseInt(binding,value) + 'px';
}
}
})