玩转Vue_品牌实例+过滤器
2019-02-12 本文已影响0人
伍陆柒_
练习实例：品牌列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>
<script type="text/javascript" src="../js/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>
Id : <input type="text" class="form-control" v-model="id"/>
</label>
<label>
Name : <input type="text" class="form-control" v-model="name"/>
</label>
<!-- add函数加不加括号都可以，需要传参时必须加括号 -->
<button type="button" class="btn btn-primary" @click="add">添加</button>
</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 list" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td>
<!-- 阻止默认行为,传参id -->
<a href="" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
id : '',
name : '',
list : [
{id:1,name:'奔驰',ctime:new Date()},
{id:2,name:'奥迪',ctime:new Date()}
]
},
methods: {
add(){ // 添加方法
// 获取id和name,直接从data中获取
// 组织一个对象
// 把这个对象添加到data中的list中
var brand = {id : this.id,name : this.name,ctime : new Date()};
this.list.push(brand);
// 清空内容
this.id = this.name = '';
},
del(id){ // 根据id删除数据
// 正常情况下可能是操作数据库执行sql语句
// 第一种删除处理方式
// this.list.forEach((elem,i)=>{
// if(elem.id == id){
// this.list.splice(i,1);
// }
// })
// 第二种删除处理方式,some()与forEach基本一致,some() return true 就立即停止了
// this.list.some((item,i) => {
// if(item.id == id){
// this.list.splice(i,1);
// return true;
// }
// })
// 第三种,使用findIndex,专门用来查找索引
var index = this.list.findIndex(item => {
if(item.id == id){
return true;
}
})
this.list.splice(index,1)
}
}
})
</script>
</body>
</html>
关键字过滤
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>
<script type="text/javascript" src="../js/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>
Id : <input type="text" class="form-control" v-model="id"/>
</label>
<label>
Name : <input type="text" class="form-control" v-model="name"/>
</label>
<!-- add函数加不加括号都可以，需要传参时必须加括号 -->
<button type="button" class="btn btn-primary" @click="add">添加</button>
<label>
搜索名称关键字 : <input type="text" class="form-control" v-model="keywords"/>
</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>
<!-- 注意：关键字过滤要根据最新的关键字，重新渲染数据，所以这里不能遍历list -->
<!-- 现在我们定义了一个serch方法，同时把所有关键字通过传参传递给serch方法 -->
<!-- 在serch方法内部通过执行for循环，把所有符合搜索关键字的数据保存到一个新数组中返回，遍历 -->
<tr v-for="item in serch(keywords)" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td>
<!-- 阻止默认行为,传参id -->
<a href="" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
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(){ // 添加方法
// 获取id和name,直接从data中获取
// 组织一个对象
// 把这个对象添加到data中的list中
var brand = {id : this.id,name : this.name,ctime : new Date()};
this.list.push(brand);
// 清空内容
this.id = this.name = '';
},
del(id){ // 根据id删除数据
// 正常情况下可能是操作数据库执行sql语句
// 第一种删除处理方式
// this.list.forEach((elem,i)=>{
// if(elem.id == id){
// this.list.splice(i,1);
// }
// })
// 第二种删除处理方式,some()与forEach基本一致,some() return true 就立即停止了
// this.list.some((item,i) => {
// if(item.id == id){
// this.list.splice(i,1);
// return true;
// }
// })
// 第三种,使用findIndex,专门用来查找索引
var index = this.list.findIndex(item => {
if(item.id == id){
return true;
}
})
this.list.splice(index,1)
},
serch(keywords){ // 根据关键字进行数据的搜索
// 第一种方式(forEach,some,filter,findIndex都属于数组的新方法)
// forEach不能中途终止
// some只要返回true,就代表终止
// filter返回一个数组
// findIndex可以返回索引
// var newList = [];
// this.list.forEach(item=>{
// if(item.name.indexOf(keywords) != -1){
// newList.push(item);
// }
// })
// return newList;
// filter的方式
var newList = this.list.filter(item=>{
if(item.name.includes(keywords)){
return item;
}
})
return newList;
}
}
})
</script>
</body>
</html>
过滤器
Vue中允许自定义过滤器，可被用作一些常见的文本格式化；
过滤器可用在两个地方：mustache插值{{}}和v-bind表达式，过滤器应该被添加在JavaScript表达式的尾部，由“管道”符表示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- msg是要处理的数据，msgFormat的第一个参数是要处理的数据 -->
<p>{{msg | msgFormat}}</p>
<!-- 过滤器也可以传参 -->
<p>{{msg | msgFormat('踢')}}</p>
<!-- 过滤器的链式操作，msgFormat处理完数据后交给test过滤器再进行处理 -->
<p>{{msg | msgFormat('踢') | test}}</p>
</div>
<script type="text/javascript">
// 不能写vm后
// 定义一个全局过滤器,名字叫msgFormat,data是要处理的数据
// arg0是传过来的参数
Vue.filter('msgFormat',function(data,arg0){
// 此处只能替换第一个
// return data.replace('削','盘');
// 此处是正则表达式,g代表全局匹配,
return data.replace(/削/g,'盘'+arg0);
})
Vue.filter('test',function(data){
return data+'==================';
})
var vm = new Vue({
el: '#app',
data: {
msg : '皱皱巴巴，麻麻赖赖，一点儿不圆润，削他，削他，削他'
},
methods: {}
})
</script>
</body>
</html>
过滤器实现时间格式化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>
<script type="text/javascript" src="../js/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>
Id : <input type="text" class="form-control" v-model="id"/>
</label>
<label>
Name : <input type="text" class="form-control" v-model="name"/>
</label>
<!-- add函数加不加括号都可以，需要传参时必须加括号 -->
<button type="button" class="btn btn-primary" @click="add">添加</button>
<label>
搜索名称关键字 : <input type="text" class="form-control" v-model="keywords"/>
</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>
<!-- 注意：关键字过滤要根据最新的关键字，重新渲染数据，所以这里不能遍历list -->
<!-- 现在我们定义了一个serch方法，同时把所有关键字通过传参传递给serch方法 -->
<!-- 在serch方法内部通过执行for循环，把所有符合搜索关键字的数据保存到一个新数组中返回，遍历 -->
<tr v-for="item in serch(keywords)" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<!-- 利用过滤器格式化时间 -->
<td>{{item.ctime | dateFormat}}</td>
<td>
<!-- 阻止默认行为,传参id -->
<a href="" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
function format(date){
return date < 10 ? '0'+date : date;
}
// 时间格式化过滤器
Vue.filter('dateFormat',function(dateStr){
var dt = new Date(dateStr);
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 `${format(y)}-${format(m)}-${format(d)} ${format(hh)}:${format(mm)}:${format(ss)}`;
})
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(){ // 添加方法
// 获取id和name,直接从data中获取
// 组织一个对象
// 把这个对象添加到data中的list中
var brand = {id : this.id,name : this.name,ctime : new Date()};
this.list.push(brand);
// 清空内容
this.id = this.name = '';
},
del(id){ // 根据id删除数据
// 正常情况下可能是操作数据库执行sql语句
// 第一种删除处理方式
// this.list.forEach((elem,i)=>{
// if(elem.id == id){
// this.list.splice(i,1);
// }
// })
// 第二种删除处理方式,some()与forEach基本一致,some() return true 就立即停止了
// this.list.some((item,i) => {
// if(item.id == id){
// this.list.splice(i,1);
// return true;
// }
// })
// 第三种,使用findIndex,专门用来查找索引
var index = this.list.findIndex(item => {
if(item.id == id){
return true;
}
})
this.list.splice(index,1)
},
serch(keywords){ // 根据关键字进行数据的搜索
// 第一种方式(forEach,some,filter,findIndex都属于数组的新方法)
// forEach不能中途终止
// some只要返回true,就代表终止
// filter返回一个数组
// findIndex可以返回索引
// var newList = [];
// this.list.forEach(item=>{
// if(item.name.indexOf(keywords) != -1){
// newList.push(item);
// }
// })
// return newList;
// filter的方式
var newList = this.list.filter(item=>{
if(item.name.includes(keywords)){
return item;
}
})
return newList;
}
}
})
</script>
</body>
</html>
私有过滤器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{date | dateFormat}}</p>
</div>
<div id="box">
<p>{{date | dateFormat}}</p>
</div>
<script type="text/javascript">
function format(date){
return date < 10 ? '0'+date : date;
}
// 全局过滤器是每一个vue实例都可用的
// date（第一个参数）永远是需要处理的数据
Vue.filter('dateFormat',function(data){
var dt = new Date(data);
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 `${format(y)}-${format(m)}-${format(d)} ${format(hh)}:${format(mm)}:${format(ss)}`;
})
var vm = new Vue({
el: '#app',
data: {
date : new Date()
},
methods: {}
})
var vm2 = new Vue({
el : '#box',
data : {
date : new Date()
},
methods: {},
// 私有过滤器,就近原则,优先级高于全局过滤器
filters:{
dateFormat : function(data){
var dt = new Date(data);
var hh = dt.getHours();
var mm = dt.getMinutes();
var ss = dt.getSeconds();
return `${format(hh)}:${format(mm)}:${format(ss)}`;
}
}
})
</script>
</body>
</html>
OK,这里格式化时间的时候，我们定义了format函数去格式化不足两位的时间数字
function format(date){
return date < 10 ? '0'+date : date;
}
过于笨重，因此我们可以使用字符串的一个方法padStart()（注意：该方法在低版本浏览器中会报错，坑啊）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{date | dateFormat}}</p>
</div>
<div id="box">
<p>{{date | dateFormat}}</p>
</div>
<script type="text/javascript">
// 全局过滤器是每一个vue实例都可用的
// date（第一个参数）永远是需要处理的数据
// padStart(length,str),length是填充长度，str是要填充的字符串，注意：这是字符串的方法，响应的还有padEnd(length,str)
Vue.filter('dateFormat',function(data){
var dt = new Date(data);
var y = dt.getFullYear();
var m = (dt.getMonth()+1).toString().padStart(2,"0");
var d = dt.getDate().toString().padStart(2,"0");
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}`;
})
var vm = new Vue({
el: '#app',
data: {
date : new Date()
},
methods: {}
})
var vm2 = new Vue({
el : '#box',
data : {
date : new Date()
},
methods: {},
// 私有过滤器,就近原则,优先级高于全局过滤器
filters:{
dateFormat : function(data){
var dt = new Date(data);
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 `${hh}:${mm}:${ss}`;
}
}
})
</script>
</body>
</html>
自定义按键修饰符
还以品牌实例为例，这里我们要点击enter键时也触发add函数
<!DOCTYPE html>
<html>
<label>
<!-- @keyup绑定键盘抬起事件，.enter确定Enter按键 -->
<!-- 每个按键都有键码，也可以用按键的键码代替 -->
Name : <input type="text" class="form-control" v-model="name" @keyup.enter="add"/>
Name : <input type="text" class="form-control" v-model="name" @keyup.13="add"/>
</label>
</html>
全部的按键别名
.enter
.tab
.delete (注意：捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
键值码固然好用，但好用不好记，所以我们可以自定义全局按键修饰符(了解即可)
Name : <input type="text" class="form-control" v-model="name" @keyup.f2="add"/>
<script type="text/javascript">
Vue.config.keyCodes.f2 = 113;
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>
<script type="text/javascript" src="../js/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>
Id : <input type="text" class="form-control" v-model="id"/>
</label>
<label>
<!-- @keyup绑定键盘抬起事件，.enter确定Enter按键 -->
<!-- 每个按键都有键码，也可以用按键的键码代替 -->
<!-- Name : <input type="text" class="form-control" v-model="name" @keyup.enter="add"/> -->
Name : <input type="text" class="form-control" v-model="name" @keyup.f2="add"/>
</label>
<!-- add函数加不加括号都可以，需要传参时必须加括号 -->
<button type="button" class="btn btn-primary" @click="add">添加</button>
<label>
搜索名称关键字 :
<!-- 注意：Vue中所有指令，在调用的时候都以 v- 开头，包括自定义的指令 -->
<input type="text" class="form-control" v-model="keywords" v-focus />
</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>
<!-- 注意：关键字过滤要根据最新的关键字，重新渲染数据，所以这里不能遍历list -->
<!-- 现在我们定义了一个serch方法，同时把所有关键字通过传参传递给serch方法 -->
<!-- 在serch方法内部通过执行for循环，把所有符合搜索关键字的数据保存到一个新数组中返回，遍历 -->
<tr v-for="item in serch(keywords)" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<!-- 利用过滤器格式化时间 -->
<td>{{item.ctime | dateFormat}}</td>
<td>
<!-- 阻止默认行为,传参id -->
<a href="" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
function format(date){
return date < 10 ? '0'+date : date;
}
Vue.config.keyCodes.f2 = 113;
// 使用Vue.directive()定义全局的指令
// 其中,参数1:指令的名称(注意：这里不需要加v-前缀),但在调用时,必须加
// 参数2是一个对象,这个对象有一些指令相关的函数,这些函数可以在特点的阶段执行相关的操作
Vue.directive('focus',{
bind:function(el){ // 每当指令绑定到元素上时,会立即执行且只执行一次
// 注意:每个函数第一个参数,永远是el,表示被绑定了指令的元素,el是一个原生的JS对象
// 但是刚绑定指令时,还没有插入到DOM中去,这时候掉focus方法没有作用
// 因为,只有元素插入DOM后才能获取焦点,所以不适合用bind,应该用inserted
// el.focus();
},
inserted:function(el){ // 元素插入到DOM中时执行
el.focus();
},
updated:function(){ // 当VNode更新时,会执行updated,可能触发多次
}
})
// 时间格式化过滤器
Vue.filter('dateFormat',function(dateStr){
var dt = new Date(dateStr);
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 `${format(y)}-${format(m)}-${format(d)} ${format(hh)}:${format(mm)}:${format(ss)}`;
})
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(){ // 添加方法
// 获取id和name,直接从data中获取
// 组织一个对象
// 把这个对象添加到data中的list中
var brand = {id : this.id,name : this.name,ctime : new Date()};
this.list.push(brand);
// 清空内容
this.id = this.name = '';
},
del(id){ // 根据id删除数据
// 正常情况下可能是操作数据库执行sql语句
// 第一种删除处理方式
// this.list.forEach((elem,i)=>{
// if(elem.id == id){
// this.list.splice(i,1);
// }
// })
// 第二种删除处理方式,some()与forEach基本一致,some() return true 就立即停止了
// this.list.some((item,i) => {
// if(item.id == id){
// this.list.splice(i,1);
// return true;
// }
// })
// 第三种,使用findIndex,专门用来查找索引
var index = this.list.findIndex(item => {
if(item.id == id){
return true;
}
})
this.list.splice(index,1)
},
serch(keywords){ // 根据关键字进行数据的搜索
// 第一种方式(forEach,some,filter,findIndex都属于数组的新方法)
// forEach不能中途终止
// some只要返回true,就代表终止
// filter返回一个数组
// findIndex可以返回索引
// var newList = [];
// this.list.forEach(item=>{
// if(item.name.indexOf(keywords) != -1){
// newList.push(item);
// }
// })
// return newList;
// filter的方式
var newList = this.list.filter(item=>{
if(item.name.includes(keywords)){
return item;
}
})
return newList;
}
}
})
</script>
</body>
</html>
让文本框中的文字直接带颜色
<!-- 注意：Vue中所有指令，在调用的时候都以 v- 开头，包括自定义的指令 -->
<!-- 注意：这里v-color中的blue是加单引号的，代表这是一个字符串，否则会被认作v-color中东一的变量 -->
<input type="text" class="form-control" v-model="keywords" v-focus v-color="'blue'"/>
~~~
Vue.directive('color',{
// 样式可直接绑定给元素,不管是否被插入到页面中去
// 和样式相关的操作,一般可以在bind中执行
bind:function(el){
el.style.color = 'red';
}
})
有些时候我们希望文字颜色是自定义的
<!-- 注意：Vue中所有指令，在调用的时候都以 v- 开头，包括自定义的指令 -->
<!-- 注意：这里v-color中的blue是加单引号的，代表这是一个字符串，否则会被认作v-color中东一的变量 -->
<input type="text" class="form-control" v-model="keywords" v-focus v-color="'blue'"/>
那么自定义指令如何拿到blue这个字符串呢
Vue.directive('color',{
// 样式可直接绑定给元素,不管是否被插入到页面中去
// 和样式相关的操作,一般可以在bind中执行
// binding中有一些数据行可以拿
bind:function(el,binding){
// el.style.color = 'red';
console.log(binding.name);//拿到的是指令名称color
console.log(binding.value);// 拿到的是指令参数的运算结果，即1+1，拿到的是2
console.log(binding.expression);// 拿到的是原值，即带引号的'blue'（1+1，拿到的也是1+1）
el.style.color = binding.value;
}
})
私有自定义指令
<div id="box">
<p v-fontweight="'orange'" v-fontsize="'50px'">{{date}}</p>
</div>
<script type="text/javascript">
var vm2 = new Vue({
el : '#box',
data : {
date : new Date()
},
methods: {},
// 私有自定义指令
directives:{
'fontsize':{
bind:function(el,binding){
el.style.fontSize = binding.value;
}
},
// 简写，如下写法，直接相当于写在了bind和update中
'fontweight':function(el,binding){
el.style.color = binding.value;
}
}
})
</script>
