Vue列表CRUD综合例子
2019-01-03 本文已影响0人
pengtoxen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script src="https://cdn.bootcss.com/vue/2.5.20/vue.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.4.0/css/bootstrap.min.css">
<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="text" value="add" class="btn btn-primary" @click="add">
<label>
搜索:
<!-- Vue中所有指令都以v-开头 -->
<input type="text" class="form-control" v-model="keywords" v-focus v-color="'green'" v-fontweight="'900'">
</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>
<tr v-for="item in search('')" :key="item.id">
<td>{{item.id}}</td>
<td v-text="item.name"></td>
<td>{{item.ctime | dateFormat('YYYY-MM-DD')}}</td>
<td>
<a href="#" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
//定义全局过滤器
Vue.filter('dateFormat', function (dataStr, pattern) {
var dt = new Date(dataStr);
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart(2, '0');
var d = dt.getDate().toString().padStart(2, '0');
// return y + '-' + m + '-' + d;
if (pattern && pattern.toLowerCase === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`;
} else {
var hh = dt.getHours();
var mm = dt.getMinutes().toString().padStart(0, '0');
var ss = dt.getSeconds().toString().padStart(0, '0');
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}
});
//自定义全局按键修饰符
Vue.config.keyCodes.f2 = 113;
//定义全局的指令
//再定义的时候,不需要定义-v前缀
//再调用的时候需要-v前缀
Vue.directive('focus', {
//指令绑定到元素上的时候执行,只执行一次
//在元素刚绑定了指令的时候,还没有插入到dom中去,这时候调用focus无作用,
//因为元素只有插入dom中后才有焦点
bind: function (el) {
//el是被绑定了指令的那个元素,是原生dom对象
//el.focus();
},
//元素插入到dom中去,会执行inserted
inserted: function (el) {
el.focus();
},
//当Vnode更新时候,会触发执行,可能触发多次
updated: function () { }
})
Vue.directive('color', {
//binding是个对象,自定义的属性值等信息
bind: function (el, binding) {
el.style.color = binding.value;
}
});
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
keywords: '',
list: [
{ id: 1, name: 'benze', ctime: new Date() },
{ id: 2, name: 'bmw', ctime: new Date() }
],
},
methods: {
add: function () {
var car = { id: this.id, name: this.name, ctime: new Date() };
this.list.push(car);
},
del: function (id) {
// 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);
},
search: function (keywords) {
// var newList = [];
// this.list.forEach(item => {
// if (item.name.indexOf(keywords) != -1) {
// newList.push(item);
// }
// });
// return newList;
return this.list.filter(item => {
if (item.name.indexOf(keywords) != -1) {
return true;
}
// ES6新方法
// if (item.name.includes(keywords)) {
// return item;
// }
});
}
},
//私有过滤器,同名过滤器会覆盖全局
filters: {
methedName: {}
},
//私有指令
directives: {
'fontweight': {
bind: function (el, binding) {
el.style.fontWeight = binding.value;
}
},
//指令的简写形式(只包含bind和update两个钩子)
'fontsize': function (el, binding) {
el.style.fontSize = parseInt(binding.value) + 'px';
}
}
});
</script>
</body>
</html>
双向数据绑定确实非常方便,个人认为业务代码量至少减少了50%.非常方便就能实现常规的CRUD操作.
