vue过滤器及键盘修饰符
过滤器:要想使用vue的过滤器,必须先创建一个vue实例,才可以使用过滤器;
全局过滤器
<body>
<div id="app">
<p>{{ msg | msgFormat("123") }}</p>
<!--调用过滤器时带括号可以传入数据-->
<!--调用过滤器的时候不要忘记写管道修饰符-->
</div>
<script>
// 定义一个 Vue 全局的过滤器，名字叫做 msgFormat
/*
Vue.filter('msgFormat', function(可以传入形参) {
处理数据
})
*/
Vue.filter('msgFormat', function(data) {
//replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
// 字符串的 replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
//return data.replace('是','----根本就不是----')//这样只会过滤第一个字符串,但是可以使用正则表达式过滤
return data.replace(/是/g, '----根本就不是----')
})
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: '学的不仅仅是技术,更是梦想'
},
methods: {}
});
</script>
</body>
私有过滤器
<body>
<div id="app">
<p>{{ msg | msgFormat("123") }}</p>
<!--调用过滤器时带括号可以传入数据-->
<!--调用过滤器的时候不要忘记写管道修饰符-->
</div>
<script>
// 定义一个 Vue 全局的过滤器，名字叫做 msgFormat
/*
Vue.filter('msgFormat', function(data,可以传入形参) {//第一个形参是固定死的,就是处理的数据
处理数据
})
*/
Vue.filter('msgFormat', function(data,data2) {
//data2表示要传入的其他实参如 msgFormat("123"),这时data2就等于123
//replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
// 字符串的 replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
//return data.replace('是','----根本就不是----')//这样只会过滤第一个字符串,但是可以使用正则表达式过滤
return data.replace(/是/g, '----根本就不是----')
})
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: '学的不仅仅是技术,更是梦想'
},
methods: {},
//私有过滤器
//私有过滤器定义在vue实例的内部,filters对象中就是存放过滤器的地方
//这个实例控制的区域一旦触发过滤器首先会在自己内部找,找不到就会去全局中找
filters:{
msgFormat:function(data){
return data.replace(/是/g, '+++++根本就不是+++++')
}
}
});
</script>
</body>
注意：当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！
键盘修饰符
vue提供了一些常用的键盘修饰符
.enter()
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
键盘修饰符的使用
<input type="text" :value="msg" @keyup.enter="show"/>
<!--只可以用于键盘事件-->
<input type="text" :value="msg" @keyup.113="show"/>
<!--也可以在后面直接跟键盘码-->
自定义键盘修饰符
Vue.config.keyCodes.f2 = 113;
//或者
Vue.config.keyCodes={
f2:113,
v:86
};
//注意:V大写,在全局中定义;
综合示例:
注意:在mint-ui中使用native添加键盘修饰符@keyup.native.enter="insertData"
<body>
<div id="app">
<input type="text" :value="msg" @keyup.enter="show"/>
<input type="text" :value="msg" @keyup.v="show"/>
</div>
<script>
Vue.config.keyCodes={
f2:113,
v:86
};
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: '学的不仅仅是技术,更是梦想'
},
methods: {
show:function (){
alert(this.msg);
}
}
});
</script>
</body>
内容强化
<!DOCTYPE html>
<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>品牌案例</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap-3.3.7.css" />
<script src="js/vue.js" type="text/javascript" charset="utf-8"></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>Id:<input type="text" class="form-control" v-model="id" v-focus></label>
<label>Name:<input type="text" class="form-control" v-model="name"></label>
<input type="button" value="添加" class="btn btn-primary" @click="add()">
<label><input type="text" class="form-control" v-model="keywords" id="search"></label>
</div>
</div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="item in search(keywords)" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.time | myFilter}}</td>
<td>
<a href="#" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
//--------------------------------定义一个全局的指令---------------------------------
Vue.directive("focus",{
bind: function (el) { //这个函数提供了很多方法,包括获取指令等号后面的值
//注意:指令的名称只能是小写;
// 每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次
// 注意： 在每个 函数中，第一个参数，永远是 el ，表示 被绑定了指令的那个元素，这个 el 参数，是一个原生的JS对象
// 在元素 刚绑定了指令的时候，还没有 插入到 DOM中去，这时候，调用 focus 方法没有作用
// 因为，一个元素，只有插入DOM之后，才能获取焦点
//在这里课以执行设置样式的一些操作
},
inserted: function (el) {
// inserted 表示元素 插入到DOM中的时候，会执行 inserted 函数【触发1次】
el.focus()
// 和JS行为有关的操作，最好在 inserted 中去执行，放置 JS行为不生效
},
updated: function (el) { // 当VNode更新的时候，会执行 updated， 可能会触发多次
}
});
//---------------------------定义全局的过滤器-------------------------
Vue.filter('myFilter',function(data,times){
//处理函数的第一个参数永远是管道符( | )前面的数据
var dt = new Date(data);
// yyyy-mm-dd
var y = dt.getFullYear()
var m = dt.getMonth() + 1
var d = dt.getDate()
var hh = dt.getHours()
var mm = dt.getMinutes()
var ss = dt.getSeconds()
//返回过滤好的数据
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
});
//-----------------------------------------------------------------------
var vm = new Vue({
el: "#app",
data: {
id: "",
name: "",
keywords: '',
list: [{
id: 1,
name: '李四',
time: new Date()
},
{
id: 2,
name: '张三',
time: new Date()
}
]
},
methods: {
add: function() {
if(this.id.length<1 || this.name.length<1){
alert("内容不能为空")
return;
}
var newobj = {
id: this.id,
name: this.name,
time: new Date()
};
this.list.push(newobj);
this.id="";
this.name="";
},
del: function(id) {
/*
*想要删除数组就要找到索引,
* 第一种方法:通过数组的方法some()实现
* some()接收一个函数,函数的第一个形参表示遍历的数组里面的每一个对象,
* 第二个参数表示每一个对象所对应的数组索引;
* 判断点前点击删除的这个元素的id和遍历对象里面的id要是相同,用相对应的索引对数组里的对象使用
* splice()方法从索引在的位置删除一个,因为modul里面的数据绑定到了view里面,所以数组的数据一旦发生变化
* 就会立马渲染到view里面
* 注意:使用this关键字的时候注意指向,er6的写法不会改变this的指向
* */
this.list.some((item,index)=>{
if(item.id = id) {
this.list.splice(index,1);
return true;
}
})
/*
*第二种方法:
* 数组的方法findIndex接收一个函数,函数的形参表示要遍历的数组里面的对象,
* 如果点击传进来的id和遍历时的id相同,就暂停程序,此时变量接收的就是ruturn时找到的数组里面元素的索引,
* 然后在用找到的索引对数组进行截取操作;
* */
/*
var index = this.list.findIndex(function(item){
if(item.id = id) {
return true;
}
})
this.list.splice(index, 1)
*/
},
search:function(keywords) {
// 根据关键字，进行数据的搜索
/* var newList = []
this.list.forEach(item => {
if (item.name.indexOf(keywords) != -1) {
newList.push(item)
}
})
return newList */
// 注意： forEach some filter findIndex 这些都属于数组的新方法，
// 都会对数组中的每一项，进行遍历，执行相关的操作；
return this.list.filter(item => {
// if(item.name.indexOf(keywords) != -1)
// 注意 ： ES6中，为字符串提供了一个新方法，叫做 String.prototype.includes('要包含的字符串')
// 如果包含，则返回 true ，否则返回 false
// contain
if (item.name.includes(keywords)) {
return item
}
})
// return newList
}
}
});
</script>
</body>
</html>
