Vue案例——品牌管理

• 完成功能：显示品牌列表、添加品牌、删除品牌、搜索品牌
• 引用bootstrap实现样式
• 涉及知识点：v-for、v-model、过滤器、字符串的padStart方法、按键修饰符、文本框捕获焦点

添加品牌

首先，将Vue实例中的data的list的值循环显示（v-for）在页面上，绑定key来唯一标识；
点击添加按钮时，绑定添加事件，将id和name的值创建一个对象加入到list中，之后将id和name清空；

  <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" v-model="id" class="form-control">
            </label>
            <label>
                Name:<input type="text" v-model="name" class="form-control">
            </label>
            <input type="button" value="添加" class="btn btn-primary" @click="add">
            <label>
                Select:<input type="text" v-model="keyword" class="form-control">
            </label>
        </div>
    </div>
<table class="table table-hover table-bordered table-striped">
        <thead>
        <tr>
            <th>ID:</th>
            <th>Name:</th>
            <th>Ctime:</th>
            <th>Operation:</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in list" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.ctime}}</td>
            <td><a href="">删除</a> </td>
        </tr>
        </tbody>
    </table>
 <script>
 	var vm=new Vue({
        el:'#app',
        data:{
            id:'',
            name:'',
            keyword:'',
            list:[
                {id:1,name:"奔驰",ctime:new Date()},
                {id:2,name:"宝马",ctime:new Date()},
                {id:3,name:"法拉利",ctime:new Date()},
                ]
        },
        methods:{
			 add(){
                var car={id:this.id,name:this.name,ctime:new Date()};
                this.list.push(car);
                this.id=this.name='';
            }
		}
 })
</script>

删除品牌

当点击删除时，我们要在页面中删除此条数据，并且要在list中同时删除。
主要是需要找到 点击列表的索引，借助some()或者findIndex()找到索引，splice()删除，同时需要注意使用.prevent取消超链接a的默认行为

  <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" v-model="id" class="form-control">
            </label>
            <label>
                Name:<input type="text" v-model="name" class="form-control">
            </label>
            <input type="button" value="添加" class="btn btn-primary" @click="add">
            <label>
                Select:<input type="text" v-model="keyword" class="form-control">
            </label>
        </div>
    </div>
<table class="table table-hover table-bordered table-striped">
        <thead>
        <tr>
            <th>ID:</th>
            <th>Name:</th>
            <th>Ctime:</th>
            <th>Operation:</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in list" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.ctime}}</td>
            <td><a href=""  @click.prevent="del(item.id)">删除</a> </td>
        </tr>
        </tbody>
    </table>
 <script>
 	var vm=new Vue({
        el:'#app',
        data:{
            id:'',
            name:'',
            keyword:'',
            list:[
                {id:1,name:"奔驰",ctime:new Date()},
                {id:2,name:"宝马",ctime:new Date()},
                {id:3,name:"法拉利",ctime:new Date()},
                ]
        },
        methods:{
			 add(){
                var car={id:this.id,name:this.name,ctime:new Date()};
                this.list.push(car);
                this.id=this.name='';
            }，
             del(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);
            }
		}
 })
</script>

搜索品牌

在搜索品牌的时候，我们不再使用item in list，而是借助一个方法，将搜索输入的关键词作为参数，来显示品牌列表。当搜索框为空时，显示所有的数据，不为空时，显示匹配的数据信息(item in select(keyword))

// ES6中，为字符串提供了一个新方法，叫做  String.prototype.includes('要包含
//的字符串') 如果包含，则返回 true ，否则返回 false
 select(word){
                /*var newList=[];
                this.list.forEach(item=>{
                    if(item.name.indexOf(word)!=-1){
                        newList.push(item);
                    }
                });
                return newList;*/
                return this.list.filter(item=>{
                    if (item.name.includes(word)){
                        return item;
                    }
                });
            }

添加一些细节

以上代码基本完成品牌的管理，之后我们需要添加一些细节问题

• 创建时间显示为"2019-07-27T09:03:41.218Z"，我们想要将他改成yyyy-mm-dd或者yyyy-mm-dd hh:mm:ss格式，同时需要注意位数问题
• 想要点击回车的时候就可以添加数据
• 页面进入时可以自动获取焦点

1. 时间修改：
   涉及到过滤器，字符串的padStart方法

   Vue允许自定义过滤器，可被用作常见的文本格式化
   用途：插值表达式,v-bind
   格式：{{ name | nameope }}
   语法：Vue.filter(‘过滤器名称’,"function(){});
   私有过滤器：filters:{}
   过滤器有就近原则，当私有过滤器和全局过滤器名称一致时，优先私有过滤器

使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString) 或 String.prototype.padEnd(maxLength, fillString)来填充字符串；

<td>{{item.ctime|timeFormat()}}</td>
<!--<td>{{item.ctime|timeFormat('yyyy-mm-dd')}}</td>-->

 Vue.filter('timeFormat',function (dateStr,pattern="") {
        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.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. 按键修饰符

2.x版本的自定义键盘修饰符
除了enter、tab、delete、esc、down等按键Vue中可以直接使用，其他的按键需要自定义才可使用
通过Vue.config.keyCodes.名称 = 按键值来自定义案件修饰符的别名（通过keyCode获得按键值）：
Vue.config.keyCodes.f2 = 113;

<input type="text" v-model="name" @keyup.f2="add">

3. 自定义文本框获取焦点

Vue.directive()
参数1 ： 指令的名称，注意，在定义的时候，指令的名称前面，不需要加 v- 前缀,但是： 在调用的时候，必须 在指令名称前 加上 v- 前缀来进行调用
参数2： 是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
主要时间段：bind,inserted,update

Vue.directive('focus', {
      bind: function (el) { // 每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次
        // 注意： 在每个 函数中，第一个参数，永远是 el ，表示 被绑定了指令的那个元素，这个 el 参数，是一个原生的JS对象
        // 在元素 刚绑定了指令的时候，还没有 插入到 DOM中去，这时候，调用 focus 方法没有作用
        //  因为，一个元素，只有插入DOM之后，才能获取焦点
        // el.focus()
      },
      inserted: function (el) {  // inserted 表示元素 插入到DOM中的时候，会执行 inserted 函数【触发1次】
        el.focus()
        // 和JS行为有关的操作，最好在 inserted 中去执行，放置 JS行为不生效
      },
      updated: function (el) {  // 当VNode更新的时候，会执行 updated， 可能会触发多次

      }
    })

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue-2.4.0.js"></script>
    <link href="lib/bootstrap-3.3.7.css" rel="stylesheet">
</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" v-model="id" class="form-control">
            </label>
            <label>
                Name:<input type="text" v-model="name" class="form-control" @keyup.enter="add">
            </label>
            <input type="button" value="添加" class="btn btn-primary" @click="add">
            <label>
                Select:<input type="text" v-model="keyword" class="form-control" v-focus>
            </label>
        </div>
    </div>
    <table class="table table-hover table-bordered table-striped">
        <thead>
        <tr>
            <th>ID:</th>
            <th>Name:</th>
            <th>Ctime:</th>
            <th>Operation:</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in select(keyword)" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.ctime|timeFormat()}}</td>
            <td><a href="" @click.prevent="del(item.id)">删除</a> </td>
        </tr>
        </tbody>
    </table>


</div>
</body>
<script>
    Vue.directive('focus',{
        inserted:function (el) {
            el.focus();
        }
    });
    Vue.filter('timeFormat',function (dateStr,pattern="") {
        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.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}`;
        }
    });
    var vm=new Vue({
        el:'#app',
        data:{
            id:'',
            name:'',
            keyword:'',
            list:[
                {id:1,name:"奔驰",ctime:new Date()},
                {id:2,name:"宝马",ctime:new Date()},
                {id:3,name:"法拉利",ctime:new Date()},
                ]
        },
        methods:{
            add(){
                var car={id:this.id,name:this.name,ctime:new Date()};
                this.list.push(car);
                this.id=this.name='';
            },
            del(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);
            },
            select(word){
                /*var newList=[];
                this.list.forEach(item=>{
                    if(item.name.indexOf(word)!=-1){
                        newList.push(item);
                    }
                });
                return newList;*/
                return this.list.filter(item=>{
                    if (item.name.includes(word)){
                        return item;
                    }
                });
            }
        }
    })
</script>
</html>

效果图：