vue 前端框架 (二) 表格增長搜索

時間 2019-12-06
標籤 vue 前端框架表格增長搜索简体版
原文原文鏈接
本章知識點概括:javascript
1.定義全局過濾器以及私有過濾器css
2.定義全局指令以及定義私有指令html
3.定義鍵盤修飾符vue
4.v-for 的函數引入java
5.字符串的incluede 方法,.toString().padStart(2,'0') 的字符串補全方法node
6.經過過濾器定義日期格式express
須要vue.js 以及 bootstrapbootstrap
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <script src="js/vue.js"></script>
    </head>
    <body>
        <!-- 
        過濾器
        vue容許你自定義過濾器,可被用做一些常見文本格式化,過濾能夠用在兩個地方,
        mustachc差值 , v-bind表達式,過濾器應該添加在javascript 表達式的尾部,由管道符指示
        
        過濾器分爲 全局過濾器以及私有過濾器
        全局過濾拉起是定義在script中
        而私有過濾器是定義在vue實例當中的 filters 方法中的
        
        定義過濾器 有兩個條件[過濾器名稱和處理函數]
        過濾器調用的時候,採用的就近原則,若是私有過濾器和全局過濾器名稱一致了,
        這時候優先調用私有過濾器
        
        -->
        
        <div id="app">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="pannel-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"> -->
                        
                        <!-- keyup.113 113對應F2 的鍵盤碼 -->
                        <!-- <input type="text" class="form-control" v-model="name" @keyup.113="add"> -->
                        
                        <input type="text" class="form-control" v-model="name" @keyup.f2="add">

                    </label>
                    <input type="button" value="添加" class="btn btn-primary" @click="add">
                    <label>
                        Search:
                        <input type="text" class="form-control" v-model="searchname" v-focus v-color='"blue"'>
                    </label>
                </div>
            </div>
            <br>
            <table class="table table-bordered table-hover table-striped">
                <tr>
                    <th><input type="checkbox"></th>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Ctime</th>
                    <th>action</th>
                </tr>
                <tr v-for='i in search(searchname)' :key='i.id'>
                    <td><input type="checkbox"></td>
                    <td >{{i.id}}</td>
                    <td v-color='"blue"'>{{i.name}}</td>
                    <td >{{i.ctime | dateformat }}</td>
                    <td ><a href="#" @click.prevent="del(i.id)">刪除</a></td>
                </tr>
            </table>
            <br>
        
        </div>

        <div id='app2'>
            {{msg|infodata}}
        </div>
        
        <script>
            // 全局過濾器 定義以及使用
            Vue.filter('dateformat',function(datestr,pattern=''){
                var dt = new Date(datestr)
                var y = dt.getFullYear()
                var m = dt.getMonth()+1
                var d = dt.getDate().toString().padStart(2,'0')
                // 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}`
                }
            });
            
            // 1.X 版本的 自定義全局鍵盤碼(鍵盤修飾符)
            Vue.config.keyCodes.f2 = 113;
            
            
            // 使用Vue.directive()定義全局的指令 v-focus
            Vue.directive('focus',{
                // 和行爲有關的操做交給inserted操做
                inserted(el){
                    el.focus()
                },
            })
            
            Vue.directive('color',{
                //跟樣式有關的能夠交給bind操做
                bind(el,binding){
                    el.style.color = binding.value
                }
            })
//             使用directive() 定義全局的指令
//             其中參數:
//             1.指令名稱,注意在定義的時候,指令的名稱前面,都不要加v-前綴,可是調用的時候必須在指令名稱前面加上v- 前綴進行調用
//             2.對象,這個對象身上,有一些指令的函數,這些函數能夠在特定的階段,執行相關的操做
//             對象中,5個鉤子函數:
//             bind,inserted,updated,componentUpdated,unbind
            
            // 鉤子函數參數:
            // el,binding( name,value,oldvalue,expression,arg modifiers ),vnode,oldvnode
            

            // 實例一
            var vm =  new Vue({
                el:'#app',
                data:{
                    id:'',
                    name:'',
                    searchname:'',
                    list:[
                        {id:1,name:'alex',ctime:new Date()},
                        {id:2,name:'anex',ctime:new Date()},
                        {id:3,name:'aexk',ctime:new Date()},
                    ],
                    msg:'abc',
                },
                methods:{
                    add(){
                        this.list.push({id:this.id,name:this.name,ctime:new Date})
                        this.name = this.id = ''
                    },
                    del(id){
                        
//                         方式一(循環list比對值)
//                         this.list.some((item,i)=>{
//                             if(item.id == id){
//                                 this.list.splice(i,1)
//                                 return true;
//                                 
// //                                 .splice(a,b,c)
// //                                 參數a爲下標值,參數b爲步長,參數c爲替換的值
//                             }
//                         })
                        
                        // 方式二(查找對應的值得方法)
                        var index = this.list.findIndex(i =>{
                            if(i.id == id){
                                return true
                            }
                        })
                        this.list.splice(index,1)
                    },
                    search(searchname){
                        
//                         // 方式一
//                         var newlist = []
//                         this.list.forEach(k => {
//                             if(k.name.indexOf(searchname) != -1){
//                                 newlist.push(k)
//                             }
//                         })
//                         return newlist

                        // 方式二
                        return this.list.filter(k => {
                            if(k.name.includes(searchname)){
                                return k
                            }
                        })
                
//                     注意:forEach some filter findIndex 這些都屬於數組的新方法,
//                     都會對數組中的每一項 進行遍歷 執行相關的操做
//                     
//                     ES6 中 爲了字符串提供了一個新方法,叫作 String.prototype.includes(包含字符串)
//                     包含 則返回 true
//                     不包含 則返回 false
                
                
                    },
                },    
                directives:{
                    'color0':{
                        bind(el,bd){
                            el.style.color = db.value
                        }
                    },
                },
            
            })
            
            // 實例二
            var vu = new Vue({
                el:'#app2',
                data:{
                    msg:'ahello !',
                },
                methods:{
                    
                },
                
                // 私有過濾器(局部過濾器)
                filters:{
                    infodata(msg){
                        return msg.replace('a','b')
                    },
                }
            })

        </script>
    </body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。