品牌管理案例
程序员文章站
2022-03-03 09:19:47
...
文章目录
品牌管理案例
添加，删除，查看新品牌
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>
<body>
<div class="fd-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="submit" value="添加" class="btn btn-primary" @click="add">
<!-- 注意：Vue中所有的指令，在调用的时候，都以v-开头 -->
<label>搜索名称关键字：<input type="text" v-model="keywords" id="search" v-focus></label>
</div>
</div>
<table class="table table-hover table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<!-- 之前，v-for中的数据，都是直接从data上的list中直接渲染过来的 -->
<!-- 现在，我们自定义了一个search方法，同时把所有的关键字，通过传参的方式传递给search方法 -->
<!-- 在search方法内部，通过执行for循环，把所有符合搜索关键字的数据，保存到一个新数组中，并返回 -->
<tr v-for="(item,index) in search(keywords)" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime | dataFormat('')}}</td>
<td>
<a href="" @click.prevent="del(index)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
// 全局的过滤器，进行事件的格式化
Vue.filter('dataFormat',function (date,pattern="") {
// 根据给定的字符串，得到特定的时间
var dt = new Date(date);
// yyyy-mm-dd
var y = dt.getFullYear();
var m = dt.getMonth() + 1;
var d = dt.getDate();
// return y + '-' + m + '-' + d;
// 注意它不是单引号'而是`在tab的上面
// return `${y}-${m}-${d}`;
if(pattern.toLowerCase() === 'yyyy-mm-dd'){
return `${y}-${m}-${d}我是公有的`;
}else{
var hh = dt.getHours();
var mm = dt.getMinutes();
var ss = dt.getSeconds();
return `${y}-${m}-${d} ${hh}:${mm}:${ss}我是公有的`;
}
} )
// 自定义全局按键修饰符
Vue.config.keyCodes.f2 = 113
// Vue.directive()定义全局的指令
// 其中：参数1：指令的名称，注意，在定义的时候，指令的名称前面，不需要加v-前缀，但是在调用的时候必须在指令名称前加v-前缀来进行调用
// 参数2：是一个对象，这个对象身上有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
Vue.directive('focus',{
bind:function(el){//每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次
//注意：在每个函数中，第一个参数，永远是el，标识被绑定了指令的那个元素，这个el参数，是一个原生的JS对象
// 在元素刚绑定了指令的时候，还没有插入到DOM中去，这时候，调用focus方法没有作用
// 因为一个元素，只有插入DOM之后，才能获取焦点
el.focus();
},
inserted:function(el){//inserted标识元素插入到DOM中的时候，会执行inserted函数【触发一次】
el.focus();
},
updated () {//vNode更新的时候，会执行updated，可能会触发多次
}
});
var vm = new Vue({
el:".fd-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(){//添加的方法
//分析：
//1.获取到id和name，直接从data上面获取
//2.阻止出一个对象
//3.把之歌对象，调用数组的相关方法，添加到当前data上的list中
//4.注意：在Vue中，已经实现了数据的双向绑定，每当我们修改了data中的数据，Vue会默认监听到数据的改动，自动把最新的数据，应用到页面上
//5.dangwmen意识到上面的第四步的时候，就证明大家已经入门Vue了，我们更多的是在进行VM中Model数据的操作，同时，子啊操作Model数据的时候，指定的业务逻辑操作
this.list.push({id:this.id, name:this.name, ctime:new Date()});
this.id = this.name = '';
},
del(id){//根据id删除数据
//分析
//1.如何根据id，找到要删除对象的索引
//2.如果找到索引了，直接调用数组的splice方法
// this.list.some((item,i)=>{
// if(item.id == id){
// this.list.splice(i,1);
// // 在数组的some方法中，如果return true，就会立即终止这个数组的后续循环
// return true;
// }
// })
this.list.splice(id,1);
},
search(keywords){//根据关键字，进行数据的搜索
// var newList = [];
// this.list.forEach(element => {
// if(element.name.indexOf(keywords) != -1){
// newList.push(element);
// }
// });
// return newList;
// 注意：forEach some filter findIndex 这些都属于数组的新方法，
//都会对数组中每一项，进行遍历，执行相关的操作；
// 注意：ES6中，为字符串提供了一个新方法，叫做String.prototype.includes（要包含的字符串）
return this.list.filter(item => {
if(item.name.includes(keywords)){
return item;
}
});
}
},
// 私有过滤器
filters: { //定义私有过滤器 过滤器有两个条件【过滤器名称和处理函数】
// 过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候优先调用私有过滤器
dataFormat:function(date,pattern=""){
// 根据给定的字符串，得到特定的时间
var dt = new Date(date);
// yyyy-mm-dd
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart(2,'0');
// ES6新特性，能将字符串补齐，补成2为，用0补充
var d = dt.getDate().toString().padStart(2,'0');
// return y + '-' + m + '-' + d;
// 注意它不是单引号'而是`在tab的上面
// return `${y}-${m}-${d}`;
if(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.filter('过滤器的名称',function())
// 过滤器中的function，第一个参数，已经被规定死了，永远都是过滤器管道符前面传递过来的数据
// Vue.filter('过滤器的名称',function(data){
// return data + '123'
// })
// document.getElementById('search').focus()
</script>
</body>
</html>
<!-- 过滤器调用时候的格式{{name | 过滤器的名称}} -->
根据条件筛选品牌
- 在2.x版本中手动实现筛选的方式：
- 筛选框绑定到 VM 实例中的
searchName属性：
<hr> 输入筛选名称：
<input type="text" v-model="searchName">
- 在使用
v-for指令循环每一行数据的时候，不再直接item in list，而是in一个 过滤的methods 方法，同时，把过滤条件searchName传递进去：
<tbody>
<tr v-for="item in search(searchName)">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td>
<a href="#" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
-
search过滤方法中，使用 数组的filter方法进行过滤：
search(name) {
return this.list.filter(x => {
return x.name.indexOf(name) != -1;
});
}
Vue调试工具vue-devtools的安装步骤和使用
过滤器
概念：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示；
私有过滤器
- HTML元素：
<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>
- 私有
filters定义方式：
filters: { // 私有局部过滤器，只能在 当前 VM 对象所控制的 View 区域进行使用
dataFormat(input, pattern = "") { // 在参数列表中 通过 pattern="" 来指定形参默认值，防止报错
var dt = new Date(input);
// 获取年月日
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart(2, '0');
var d = dt.getDate().toString().padStart(2, '0');
// 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日
// 否则，就返回 年-月-日 时：分：秒
if (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}`;
}
}
}
使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString=’’) 或 String.prototype.padEnd(maxLength, fillString=’’)来填充字符串；
全局过滤器
// 定义一个全局过滤器
Vue.filter('dataFormat', function (input, pattern = '') {
var dt = new Date(input);
// 获取年月日
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart(2, '0');
var d = dt.getDate().toString().padStart(2, '0');
// 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日
// 否则，就返回 年-月-日 时：分：秒
if (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}`;
}
});
注意：当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！
键盘修饰符以及自定义键盘修饰符
2.x中自定义键盘修饰符
- 通过
Vue.config.keyCodes.名称 = 按键值来自定义案件修饰符的别名：
Vue.config.keyCodes.f2 = 113;
- 使用自定义的按键修饰符：
<input type="text" v-model="name" @keyup.f2="add">
自定义指令
- 自定义全局和局部的 自定义指令：
// 自定义全局指令 v-focus，为绑定的元素自动获取焦点：
Vue.directive('focus', {
inserted: function (el) { // inserted 表示被绑定元素插入父节点时调用
el.focus();
}
});
// 自定义局部指令 v-color 和 v-font-weight，为绑定的元素设置指定的字体颜色 和 字体粗细：
directives: {
color: { // 为元素设置指定的字体颜色
bind(el, binding) {
el.style.color = binding.value;
}
},
'font-weight': function (el, binding2) { // 自定义指令的简写形式，等同于定义了 bind 和 update 两个钩子函数
el.style.fontWeight = binding2.value;
}
}
- 自定义指令的使用方式：
<input type="text" v-model="searchName" v-focus v-color="'red'" v-font-weight="900">
上一篇： Vue style行内样式绑定