1.数组添加
- posh(item1,item2,) 在最后添加一项或多项，并返回数组的长度
- unshift(item1,item2,) 在最前面添加一项或多项，并返回数组的长度
2.数组删除
- pop()删除最后一项并返回删除元素的值
- shift（）删除最前一项并返回删除元素的值
3.修改数组
- splice(start,deleteCount,item1,item2,)
4.数组翻转
- reverse()
5.对数组排序
- sort(function(a,b){return a-b}); a-b升b-a降
6.数组截取
- slice(start,end);返回新数组
7.数组遍历
- for循环
- forEach(function(item,index,arr){},thisObject)在数组每个元素项上执行函数
- map(function(item,index,arr){},thisObject)在数组每个元素项上执行函数并将所有结果放入数组中返回
- filter(function(item,index,arr){},thisObject) 函数在这里担任的是过滤器的角色，当元素符合条件，过滤器就返回true，而filter则会返回所有符合过滤条件的元素
- every(function(item,index,arr){}, thisObject]) every其实类似filter，只不过它的功能是判断是不是数组中的所有元素都符合条件，并且返回的是布尔值）
- some(function(item,index,arr){}, thisObject]) 类似every，不过前者要求都符合筛选条件才返回true，后者只要有符合条件的就返回true）。
- indexOf(searchElement,fromIndex)返回第一个匹配的索引从前往后
- lastIndexOf(searchElement,fromIndex)返回第一个匹配的索引从后往前
8.字符串查询
- indexOf(searchElement,fromIndex)从前往后找到返回对应坐标，找不到返回-1
- lastIndexOf(searchElement,fromIndex)从后往前找到返回对应坐标，找不到返回-1
9.键盘事件
- keydovn按下键盘键 keypress 按着键盘键 keyup 释放键盘键
10. 按键修饰符的使用
- 系统功能键 tab enter insert end …
- 键码
- 自定义按键修饰符 eg: Vue.config.keyCodes.f2 = 113
11. 自定义组件
- 自定义组件调用时 v-名称
- 自定义组件定义
– v-directive(名称,{
注意：在每个函数中，第一个参数，永远是el ，表示被绑定了指令的那个元素，这个el参数，是一个元素的对象
注意：第二个参数是调用函数时传过来的参数bindding bindding.name左边名称 bindding.value右边值 bindding.express右边表达式
bind:function(el){
//每当指令绑定到元素上时，会立即执行bind函数，只执行一次
//在元素刚绑定指令的时候，还没有插入到DOM中去，这时候，调用focus方法没有作用，因为一个元素，只有插入DOM中之后，才能获取焦点
//和样式相关
},
inserted:function(el){
//元素插入DOM中时，会执行inserted函数，只执行一次
//和行为有关的
},
updated:function(el){
//当VNode更新时，会执行updated，可执行多次
}
})
12.私有自定义组件
- directives:{
名称：{
bind:function(el,bindding){}
}
}
13.自定义组件简写
- 只用到bind和update函数时可以简写
- Vue.direction(名称,function(el,bindding){})
- direcitves:{
名称：function(el,bindding){}
}
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>品牌管理案例</title>
<script src="../bin/vue.js"></script>
<link rel="stylesheet" href="../bin/bootstrap/css/bootstrap.css">
</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" @keyup.enter='add'>
</label>
<input type="button" value="添加" class="btn btn-primary" @click="add">
</div>
<label>
搜索名称关键字:
<input type="text" class="form-control" v-model="keywords" v-focus v-color="'blue'">
</label>
</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,key) in search(keywords)" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime | dateFormat('yyyy-mm-dd')}}</td>
<td><a @click.prevent="del(key)">删除</a></td>
</tr>
</tbody>
</table>
</div>
<script>
//过滤器
Vue.filter('dateFormat',function(dateStr,pattern='yyyy-mm-dd'){
var dt = new Date(dateStr);
var y = dt.getFullYear();
var m = (dt.getMonth()+1).toString().padStart(2,'0');
var d = dt.getDate().toString().padStart(2,'0');
if(pattern && pattern.toLowerCase() === 'yyyy-mm-dd'){
return `${y}-${m}-${d}`;
}else{
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}`;
}
});
//自定义组件
Vue.directive('focus',{
inserted:function(el){
el.focus();
}
});
Vue.directive('color',{
bind:function(el,bindding){
el.style.color = bindding.value;
console.log(bindding.name);
console.log(bindding.value);
console.log(bindding.expression);
}
})
//Vue实例化
var vm = new Vue({
el:'#app',
data:{
id:'',
name:'',
keywords:'',
list:[
{id:1,name:'奔驰',ctime:new Date()},
{id:2,name:'宝马',ctime:new Date()},
{id:3,name:'福特',ctime:new Date()},
{id:4,name:'林肯',ctime:new Date()},
]
},
methods: {
add(){
var car = {id: this.id,name: this.name, ctime: new Date()};
this.id = null;
this.name = null;
this.list.push(car);
},
del(key){
this.list.splice(key,1);
},
search(keywords){
var newList = this.list.filter(function(item){
return item.name.indexOf(keywords)!==-1;
});
return newList;
}
},
});
</script>
</body>
359
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
