vue中品牌列表案例及涉及到的知识点--完整可执行
程序员文章站
2022-05-15 18:41:11
...
这个案列中详述了：自定义按键修饰符，自定义指令，自定义过滤器
复习了v-model v-for
自定义按键修饰符
按键修饰符 .后加键 系统提供的有 enter,tab,delete,esc,space,up,down,left,right;
如果要用别的，则可以使用键盘码（键盘上的每个键都对应一个码 比如113=f2)，则是@keyup.113=“add”
如果不用码则需要自定义按键修饰符,如本例中定义的f2 写法是@keyup.f2=“add”
自定义指令
如果需要给keywords添加默认获得焦点 但不用document.getElementById(“keywordtext”).focus(),则使用自定义指令，详细用法看代码
自定义过滤器
其他
在案例代码中还复习了@click.prevent事件修饰符
this.bandList.forEach
this.bandList.filter
this.bandList.some
this.bandList.findIndex
this.bandList.splice(id,1)
this.bandList.push
这些用法
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<script src="vue.js"></script>
<title>品牌列表</title>
</head>
<body>
<!-- 这个案列中详述了：自定义键盘修饰符，自定义指令，自定义过滤器 -->
<div id="app">
<div>
<h3>品牌列表</h3>
<label>id<input type="text" v-model="newid"></label>
<!-- 按键修饰符 .后加键 系统提供的有 enter,tab,delete,esc,space,up,down,left,right;
如果要用别的，则可以使用键盘码（键盘上的每个键都对应一个码 比如113=f2)，则是@keyup.113="add"
如果不用码则需要自定义按键修饰符,如本例中定义的f2 写法是@keyup.f2="add"
-->
<label>name<input type="text" v-model="newname" @keyup.f2="add"></label>
<input type="button" @click="add" value="添加品牌">
<!-- 如果需要给keywords添加默认获得焦点 但不用document.getElementById("keywordtext").focus(),则使用自定义指令-->
<!-- 如果v-color中不加'',则 -->
<input type="text" v-model="keywords" id="keywordtext" v-focus v-color="'blue'" v-fontWeight="900" v-fontSize="20">
</div>
<table border="1">
<tbody >
<tr>
<th>索引</th>
<th>id</th>
<th>name</th>
<th>ctime</th>
<th>操作</th>
</tr>
<!-- research(keywords) 为什么可以直接拿到keywords-->
<tr v-for="(item,i) in research(keywords)" :key="i">
<td>{{ i }}</td>
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.ctime | timeFormat('yyyy-mm-dd') }}</td>
<td><a href="" @click.prevent="del(i)">删除</a></td>
<!-- <td><a href="" @click.prevent="del(item.id)">删除</a></td> -->
</tr>
</tbody>
</table>
</div>
<script>
//这行代码如果放在script的最上面则没用,放在最下面则可以生效
//document.getElementById('keywordtext').focus()
//不用上面的dom操作，使用自定义指令v-focus 定义的时候不用加v- ，这个自定义指令如果放在vm实例的后面，则加载页面会报错
//参数二是个对象，有一些钩子函数，在特定的阶段执行相关的操作
//这个也可以在vm实例中定义为私有指令
//和js行为有关的在inserted中执行，和样式有关在bind执行
Vue.directive("focus",{
//钩子函数的第一个参数是被绑定了指令的元素，是原生的dom对象
//钩子函数的第二个参数是一个对象binding,里面有属性（name,value,oldvalue,expression,arg,modifiers）
bind:function(el){ //指令绑定到元素上时执行，只执行一次
el.focus() //放在这里不起作用，因为这时元素还没有被渲染
},
inserted:function(el){ //当元素插入到dom中时会执行
el.focus()
},
updated:function(el){ //当vnode更新的时候执行，可能会触发多次
}
})
Vue.directive("color",{
bind:function(el,binding){
console.log(binding.value)
el.style.color = binding.value //这个样式的操作可以在bind中执行
}
})
//定义自定义键盘修饰符 键盘上的每个键都对应一个码 比如113==f2
Vue.config.keyCodes.f2 = 113
//过滤器函数中的第一个参数是固定的是源数据,后面的是参数，提高程序健壮性,可以使用es6 pattern = ''给一个初始值
Vue.filter("timeFormat",function(data , pattern = ''){
var dt = new Date(data)
var y = dt.getFullYear()
var m = dt.getMonth() + 1 //getMonth 返回值是从0 开始的
var d = dt.getDate()
if(pattern.toLowerCase == 'yyyy-mm-dd'){
//return y + '-' + m + '-' + d
return `${y}-${m}-${d}` //模板字符串 ES2015新增的符号
}else{
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:{
bandList:[
{id:1,name:"奥迪",ctime:new Date()},
{id:2,name:"宝马",ctime:new Date()}
],
newid:'',
newname:'',
keywords:''
},
methods: {
add(){
var car = {id:this.newid,name:this.newname,ctime:new Date()}
this.bandList.push(car)
},
research(keywords){
//方法一：使用forEach 循环原数组，符合条件则插入到新数组
//var newList = []
//forEach循环所有元素，some找到就返回
// this.bandList.forEach(item => {
// if(item.name.indexOf(keywords)!=-1){
// newList.push(item)
// }
// });
// return newList
//方法二:使用filter 进行过滤
return this.bandList.filter(item=>{
if(item.name.includes(keywords)){
return item
}
})
},
del(id){ //如果传入的值是item.id，那么该值是id;如果传入的是索引（i）,则该值是索引
//方法一：用some循环删除数组中的元素
// this.bandList.some((item,i)=>{ //some函数需要传一个回调函数
// if(item.id == id){
// this.bandList.splice(i,1) //删除数组中的元素，从i开始，删一个
// //在list的some循环中如果return true会立即终止数组的循环
// return true
// }
// })
//方法二：使用findIndex查找数组中的元素索引，
// var index = this.bandList.findIndex(item=>{
// if(item.id == id){
// return true
// }
// })
// console.log(index)
// this.bandList.splice(index,1)
//方法一和方法二是在id值唯一的情况下，如果id不唯一，则会出错
//方法三：直接传入索引值
this.bandList.splice(id,1)
}
},
filters:{ //私有的过滤器 如果私有和公有的名称一致，优先使用私有的
timeFormat : function(data,pattern){
var dt = new Date(data)
var y = dt.getFullYear()
//var m = dt.getMonth() + 1 //getMonth 返回值是从0 开始的
var m = (dt.getMonth() + 1).toString().padStart(2,'0') //使用es6的padStart函数，总长度为2，不足时在前面补0
var d = dt.getDate()
if(pattern.toLowerCase == 'yyyy-mm-dd'){
//return y + '-' + m + '-' + d
return `${y}-${m}-${d}`
}else{
var hh = dt.getHours()
var mm = dt.getMinutes()
var ss = dt.getSeconds()
return `${y}-${m}-${d} ${hh}:${mm}:${ss}----`
}
}
},
directives:{
'fontweight': {
bind:function(el,binding){
el.style.fontWeight = binding.value
}
},
//自定义指令的函数可以简写，这种写法表示将bind和update上都是执行这个
'fontsize':function(el,binding){ //fontsize 不能写成fontSize
el.style.fontSize = parseInt(binding.value)+'px'
}
}
})
</script>
</body>
</html>
上一篇： 【vue】样式绑定
下一篇： 皇帝赐大将免死铁券，大将回家后立刻*