<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../lib/css/bootstrap.min.css">
<script src="../lib/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:
<!-- @keyup.enter按键修饰符 按enter 键添加，也可直接@keyup.键码
自定义的按键修饰符可以 @keyup.f2 调用-->
<input type="text" class="form-control" v-model="name" @keyup.f2="add">
</label>
<!-- 在vue中使用事件绑定机制，为元素指定处理函数时，如果加了括号，就可以给函数传参 -->
<input type="button" value="添加" class="btn btn-primary" @click="add()">
<label>
搜索名称关键字:
<input type="text" class="form-control" v-model="keywords" id="search" v-focus v-color>
</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>
<!-- v-for 中自定义一个方法，把关键字通过传参的形式传递给了 search 方法
在search 方法内部，通过执行 for 循环，把所有符合 搜索关键字的数据，保存到一个数组中，返回-->
<tr v-for = 'item in search(keywords)' :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.ctime | dataFilter }}</td>
<td>
<a href="" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
//定义全局过滤器进行时间的格式化
Vue.filter('dataFilter',function (dataStr) {
//根据给定的时间字符串，得到特定的时间
var dt = new Date(dataStr);
var y = dt.getFullYear();
var m = dt.getMonth() + 1;
var d = dt.getDate();
// return y + '-' + m + '-' + d;
return `${y}-${m}-${d}`
});
//自定义全局按键修饰符
Vue.config.keyCodes.f2 = 113;
//使用 Vue.directive 自定义全局指令
// 参数： 1. 指令的名称，在定义时，指令名称前面不需要加 v- 前缀，在调用时，指令名称前必须加 v- 前缀
// 2. 是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
// 定义获取焦点的指令
Vue.directive('focus',{
// 在以下三个函数中，第一个参数永远是el，表示被绑定的那个元素，这个el参数，是一个原生的JS对象
// 在元素刚绑定了指令的时候，还没有插入到 DOM中去，这时候调用focus 方法没有作用
// 因为一个元素只有插入到 DOM 之后，才能获取焦点
bind:function (el) { // 每当指令绑定到元素上是，会立即执行这个函数，只执行一次
// 和样式相关的一般在bind 中执行
},
inserted:function (el) { // 表示元素插入到DOM中的时候，会立即执行这个函数，只执行一次
// 和js 行为相关的操作，最好在 inserted 中去执行，防止JS行为不生效
el.focus()
},
updated:function (el) { // 当VNode更新的时候，会执行这个函数，可能会执行多次
}
});
// 自定义一个设置字体颜色的指令
Vue.directive('color',{
// 样式：只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联样式
// 将来元素肯定会显示到页面中去，这时候浏览器的引擎必然会解析样式，应用这个元素
bind:function (el) {
el.style.color = 'red'
}
});
const 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()},
{id:5,name:'奥迪',ctime:new Date()},
]
},
methods:{
add(){
// alert('111')
/**
* 分析：
* 1. 获取到ID和name 直接从data上获取
* 2. 组织出一个对象
* 3. 把这个对象调用数组的相关方法，添加到当前data上的list中
* 注意：在 vue 中，已经实现了数据的双向绑定，等我们修改了 data 上的数据，
* vue 会默认监听数据的改动，自动把最新的数据应用到页面上
*/
var car = { id:this.id,name:this.name,ctime:new Date() };
this.list.push(car);
this.id = this.name = null
},
del(id){ // 根据ID删除数据
/**
* 分析：
* 1.如何根据ID找到要删除这一项的索引
* 2.找到索引了直接调用数组的splice方法
*/
this.list.some((item,i)=>{
if(item.id === id){
this.list.splice(i,1);
return true
}
})
},
search(keywords){ //根据关键字，进行数据的搜索
var newList = [];
this.list.forEach(item=>{
if(item.name.indexOf(keywords) != -1){
newList.push(item)
}
});
return newList
}
}
})
</script>
</body>
</html>