<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body,
html {
padding: 0;
margin: 0;
}
#app {
padding: 20px;
}
</style>
</head>
<body>
<div id="app">
<div class="panel panel-success">
<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.f2="add" @keyup.enter="add"></label>
<button type="button" class="btn btn-primary" @click="add">添加</button>
<div class="form-group has-feedback">
<label>搜索关键字</label>
<input type="email" class="form-control" v-model="keywords" v-focus v-color="'cyan'">
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</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 search(keywords)" :key="item.id">
<th>{{ item.id }}</th>
<th>{{ item.name }}</th>
<th>{{ item.ctime |timeFormat() }}</th>
<th><a href="javascript:void(0)" @click.prevent="del(item.id)">删除</a></th>
</tr>
</tbody>
</table>
</div>
<div id="app2">
<h3 v-color="'pink'" v-fontweight="900" v-fontsize="30">{{ dt | dateFormat }}</h3>
</div>
<script>
// 2全局过滤器
Vue.filter('timeFormat', function (date, allDate = '') {
let dt = new Date(date);
let Y = dt.getFullYear().toString().padStart(2, '0');
let m = (dt.getMonth() + 1).toString().padStart(2, '0');
let d = dt.getDate().toString().padStart(2, '0');
if (allDate.toLowerCase() == 'yyyy-mm-dd') {
return `${Y}-${m}-${d}`;
} else {
let h = dt.getHours().toString().padStart(2, '0');
let i = dt.getMinutes().toString().padStart(2, '0');
let s = dt.getSeconds().toString().padStart(2, '0');
return `${Y}-${m}-${d} ${h}:${i}:${s}`;
}
})
// 自定义全局按键修饰符
Vue.config.keyCodes.f2 = 113;
//使用directive定义全局自定义全局指令
Vue.directive('focus', {
inserted: function (el) {
// 和js行为有个
el.focus()
}
})
Vue.directive('color', {
// 样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联的样式
// 将来元素肯定会显示到页面中，这时候，浏览器的渲染引擎必然会解析样式，应用给这个元素
bind: function (el, binding) {
// el.style.color = 'red'
// console.log(binding.name)
// 和样式相关的操作，一般都可以在 bind 执行
// console.log(binding.value)
// console.log(binding.expression)
el.style.color = binding.value
}
})
// 1,基础方法，添加，删除，搜索
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() }
]
},
methods: {
add() {
const car = { id: this.id, name: this.name,ctime: new Date() };
this.list.push(car);
this.name = this.id = '';
},
del(id) {
this.list.some((item, i) => {
if (item.id == id) {
this.list.splice(i, 1)
return true;
}
})
},
// 第一种方式
// search(keywords){
// let newList = [];
// this.list.forEach(item => {
// if(item.name.indexOf(keywords) != -1){
// newList.push(item)
// }
// });
// return newList
// }
// 第二种方式
search(keywords) {
return this.list.filter(item => {
if (item.name.includes(keywords)) {
return item
}
})
}
}
})
// 2私有过滤器,私有指令
const vm2 = new Vue({
el: '#app2',
data: {
dt: new Date()
},
filters: {
dateFormat: function (date, allDate = '') {
let dt = new Date(date);
let Y = dt.getFullYear().toString().padStart(2, '0');
let m = (dt.getMonth() + 1).toString().padStart(2, '0');
let d = dt.getDate().toString().padStart(2, '0');
if (allDate.toLowerCase() == 'yyyy-mm-dd') {
return `${Y}-${m}-${d}`;
} else {
let h = dt.getHours().toString().padStart(2, '0');
let i = dt.getMinutes().toString().padStart(2, '0');
let s = dt.getSeconds().toString().padStart(2, '0');
return `${Y}-${m}-${d} ${h}:${i}:${s}~~~`;
}
}
},
directives: { // 自定义私有指令
'fontweight': { // 设置字体粗细的
bind: function (el, binding) {
el.style.fontWeight = binding.value
}
},
'fontsize': function (el, binding) { // 注意：这个 function 等同于 把 代码写到了 bind 和 update 中去
el.style.fontSize = parseInt(binding.value) + 'px'
}
}
})
</script>
</body>
</html>
<!--
相关知识点
1，基础数据的操作
1.1，添加数据
1.2，删除数据 => 注意点： 在对数据进行操作时添加:key="item.id
2，根据关键字对数据进行过滤--搜素数据
2.1，foreach => indexOf
forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。注意: forEach() 对于空数组是不会执行回调函数的。
2.2，filter => includes()
filter()方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
includes() 与jquery中的 :contains(text)一样
2.3,是将搜索得到的结果即一个对象数组遍历到 界面上，不是直接将数据放在界面
3， 定义格式化时间 => 过滤器 注意：只能用在mustache插值和v-bind表达式中
全局过滤器
{{ name | 过滤器的名称 }}
Vue.filter('过滤器的名称',function(){})
私有过滤器
<h3>{{ dt | dateFormat }}</h3>
const vm2 = new Vue({
el: '#app2',
data: {
dt: new Date()
},
filters: {
dateFormat: function () { }
}
})
4,padStart 的使用 =>dt.getFullYear().toString().padStart(2, '0');
5,按键修饰符
第一种
@keyup="add" 键盘按下触发一次
第二种
@keyup.enter="add" enter键按下触发一次,有这样的几个按键的英语
第三种
@keyup.113="add" 键盘码控制
第四种
@keyup.f2="add"
Vue.config.keyCodes.f2 = 113; // 自定义全局按键修饰符
6,自定义指令
<input type="email" class="form-control" v-model="keywords" v-focus v-color="'cyan'">
即 v- 开头，这里 v-focus v-color="'cyan'"就是之定义的指令
全局
Vue.directive('focus', {
inserted: function (el) {
el.focus()
}
})
私有
const vm2 = new Vue({
el: '#app2',
data: {
dt: new Date()
},
directives: { // 自定义私有指令
'fontweight': { // 设置字体粗细的
bind: function (el, binding) {
el.style.fontWeight = binding.value
}
},
//私有的简写写法
// 注意：这个 function 等同于 把 代码写到了 bind 和 update 中去
'fontsize': function (el, binding) {
el.style.fontSize = parseInt(binding.value) + 'px'
}
}
})
-->