- 在Vue中，使用事件绑定机制，绑定方法调用时，添加小括号，可以给方法传递参数
- 数组遍历 this.list.some查询到指定元素终止循环
- 数组删除 this.list.splice(i, 1) 删除指定索引位置的元素起的第1个元素，不插入新的数据，不写第三个参数
- 数组查找指定元素的索引this.list.findIndex当返回ture时返回指定的索引
//删除指定元素的方式一
var index = this.list.some((item, i) => {
if(item.id == id){
this.list.splice(i, 1)
return true;
}
})
//删除指定元素的方式二
var index = this.list.findIndex(item => {
if(item.id == id ){
return true;
}
})
this.list.splice(index, 1);
- 安装dev-tool
- this.list.filter做过滤查询
//es6提供了新方法 string.prototype.include('要包含的字符串')
var newList = this.list.filter(item => {
if(item.name.includes(keywords)){
return item;
}
})
- 过滤器
- Vue.js允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用再两个地方：mustache插值和v-bind表达式。过滤器应该被添加在javascript表达式的尾部，由管道符指示，接多个管道
- 全局过滤器定义语法,全局过滤器代码必须得放在vm 定义之前
Vue.filter('过滤器的名称', function(data){
return data + '123'
})
//应用代码
{{ data|fitler }}
- 全局过滤器，可以被所有的vm使用
- 私有过滤器，只能被某个vm使用
var vm = new Vue({
el : '#app',
data : {},
methods : {},
filters : {
dateFormat: function(dateStr, pattern){
//todo 过滤器内容
}
}
})
- 过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致，此时私有过滤器优先被调用
- 字符串填充：String.prototype.padStart(maxLength,fillString='')或者String.prototype.padEnd(maxLength,fillString='')
- 自定义全局按键修饰符
Vue.config.keyCodes.f2 = 113;
@keyup.f2 = "add"
- vue的初始加载方法的办法，在vm中定义create或者mounted属性
mounted: function(){
this.search()
}
- 品牌列表代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01商品管理示例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app">
<div class="panel panel-default">
<label>id</label>: <input type="text" v-model="id">
<label>车型</label>: <input type="text" v-model="type" @keyup.enter="add">
<input type="button" value="添加" @click="add">
<input type="text" v-model="searchKey" @keyup.enter="search" v-focus v-color="'blue'">
<input type="button" value="查询" @click="search">
</div>
<table class="table">
<thead>
<tr>
<th>id</th>
<th>车型</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="car in searchResult" :key="car.id">
<td>{{ car.id }}</td>
<td>{{ car.type }}</td>
<td>{{ car.time|chineseDateFilter|fullDateStrFilter }}</td>
<td>
<a href=";" @click.prevent="delCar(car.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
//全局过滤器，必须写在vm 定义前
Vue.filter('chineseDateFilter', function(date){
var y = date.getFullYear();
var m = date.getMonth() + 1 + '';
var d = date.getDay() + '';
return y + '-' + m + '-' + d;
})
Vue.directive('focus', {
inserted: function(el, binding){
el.focus()
}
})
var vm = new Vue({
el: '#app',
data: {
id: '',
type: '',
searchKey: '',
cars: [
{id : '1', type: '宝马', time: new Date()},
{id : '2', type: '奔驰', time: new Date()},
{id : '3', type: '奔奔', time: new Date()}
],
searchResult: []
},
mounted: function(){ //初始加载调用方法
this.search()
},
methods: {
add(){
this.cars.push({id: this.id, type: this.type, time: new Date()})
this.searchResult.push({id: this.id, type: this.type, time: new Date()})
},
delCar(carId){
let delIndex = this.cars.findIndex(item => item.id == carId)
if(delIndex != -1){
this.cars.splice(delIndex, 1)
}
console.log(this.cars)
this.search()
},
search(){
this.searchResult = [];
var totalCars = this.cars;
var _this = this;
totalCars.forEach(car => {
if(car.type.indexOf(_this.searchKey) > -1){
_this.searchResult.push(car);
}
});
}
},
filters: { //局部过滤器
fullDateStrFilter(str){
dateArray = str.split('-');
var y = dateArray[0];
var m = dateArray[1];
m = m.padStart(2, 0);
var d = dateArray[2];
d = d.padStart(2, 0);
return y + '-' + m + '-' + d;
}
},
directives: {
'fontweight':{
bind: function(el, binding){
el.style.fontWeight = binding.value
}
},
'fontsize':function(el, binding){ //bind和updated的简写
el.style.fontSize = binding.value + 'px'
},
'color':function(el,binding){
el.style.color = binding.value
}
}
})
</script>
</body>
</html>
网友评论