使用vue插件

• 使用chrome瀏覽器調(diào)試插件Vue.js devtools
• 添加一行代碼Vue.config.devtools = true;
  
  使用devtools插入代碼.png

vue調(diào)試面板.png

vue過(guò)濾器

1. 過(guò)濾器只會(huì)改變顯示結(jié)果,而不是修改數(shù)據(jù)
2. 過(guò)濾器調(diào)用時(shí)候的格式

<p>{{msg|msgFormat}}</p>

3. 定義一個(gè)過(guò)濾器，把顯示結(jié)果你改成他，只會(huì)修改第一個(gè)（放在script標(biāo)簽的開頭？放在結(jié)尾的時(shí)候沒(méi)有顯示效果）

Vue.filter('msgFormat',function(msg){
                return msg.replace('他','你')
            })

data:{
      msg:'他的朋友，他的敵人'
    },

修改效果.png

4. 除了可以寫一個(gè)字符串之外，還可以定義一個(gè)正則，將所有‘你’改成‘他’

Vue.filter('msgFormat',function(msg){
                return msg.replace(/他/g,'你')
            })

全部關(guān)鍵字修改.png

5. 傳入一個(gè)參數(shù)的過(guò)濾器

Vue.filter('msgFormat',function(msg,arg){
                return msg.replace(/他/g,arg)
            })

<p>{{msg|msgFormat('wo')}}</p>

傳入?yún)?shù)修改.png

6. 定義格式化時(shí)間的全局過(guò)濾器

Vue.filter("dateFormat",function(dateStr){
                var dt=new Date(dateStr)
                var y=dt.getFullyear()
                var m=dt.getMonth()+1
                var d=dt.getDate()
                return `${y}-&{m}-$u0z1t8os`
            })

修改前顯示效果.png

過(guò)濾后效果.png

7. 使用過(guò)濾器再添加上時(shí)分秒

if(pattern.toLowerCase()==='yyyy-mm-dd'){
                return `${y}-${m}-$u0z1t8os`}
                else{
                    var hh=dt.getHours()
                    var mm=dt.getMinutes()
                    var ss=dt.getSeconds()
                    return `${y}-${m}-$u0z1t8os ${hh}:${mm}:${ss}`
                }

最終效果.png

8. 全局過(guò)濾器就是所有的vm實(shí)例都共享的
9. 定義私有過(guò)濾器,過(guò)濾器有兩個(gè)條件[過(guò)濾器名稱和處理函數(shù)]，過(guò)濾器調(diào)用時(shí)采用就近原則，如果私有過(guò)濾器和全局過(guò)濾器名稱一致，優(yōu)先調(diào)用私有過(guò)濾器定義私有過(guò)濾器,過(guò)濾器有兩個(gè)條件[過(guò)濾器名稱和處理函數(shù)]，過(guò)濾器調(diào)用時(shí)采用就近原則，如果私有過(guò)濾器和全局過(guò)濾器名稱一致，優(yōu)先調(diào)用私有過(guò)濾器

var vm=new Vue({
                el:'#div1',
                data:{
                    msg:'他的朋友，他的敵人'
                },
                methods:{
                    
                },
                filters:{//定義私有過(guò)濾器,過(guò)濾器有兩個(gè)條件[過(guò)濾器名稱和處理函數(shù)]
                    dataFormat:function(dataStr,pattern){
                        var dt=new Date(dateStr)
                        var y=dt.getFullYear()
                        var m=dt.getMonth()+1
                        var d=dt.getDate()
                        if(pattern.toLowerCase()==='yyyy-mm-dd'){
                        return `${y}-${m}-$u0z1t8os`}
                        else{
                            var hh=dt.getHours()
                            var mm=dt.getMinutes()
                            var ss=dt.getSeconds()
                            return `${y}-${m}-$u0z1t8os ${hh}:${mm}:${ss}`
                        }
                    }
                }
            })

列表案例

1. 根據(jù)id添加列表
2. 根據(jù)id實(shí)現(xiàn)刪除效果

<td><a href="" @click.prevent="del(item.id)">刪除</a></td>

                    del(id){//刪除列表
                        this.list.some((item,i)=>{
                            if(item.id==id){//id是否匹配
                                this.list.splice(i,1)//實(shí)現(xiàn)刪除
                                return true;
                                //在some方法中,如果熱return true,就會(huì)立即終止這個(gè)數(shù)組循環(huán)
                            }
                        })
                    }

或者

                    del(id){//刪除列表
                        var index=this.list.findIndex(item=>{
                            if(item.id==id){
                                return true;}
                        })  
                    
                        this.list.splice(index,1)
                    }

3. 自定義一個(gè)search方法來(lái)代替從list中直接獲取數(shù)據(jù)

<tr v-for="item in list" :key="item.id">
<tr v-for="item in search(keywords)" :key="item.id">

4. 實(shí)現(xiàn)在文本框中通過(guò)搜索關(guān)鍵字來(lái)匹配相應(yīng)條目

                    <label>
                        搜索名稱關(guān)鍵字：
                        <input type="text" v-model="keywords" class="form-control">
                    </label>

search(keywords){//根據(jù)關(guān)鍵字進(jìn)行數(shù)據(jù)搜索
                    var newlist=[]
                        this.list.forEach(item=>{
                            if(item.name.indexOf(keywords) !=-1){//進(jìn)行字符串匹配
                                newlist.push(item)
                            }
                        })
                        return newlist
                    }                   

search(keywords){//根據(jù)關(guān)鍵字進(jìn)行數(shù)據(jù)搜索
                        return this.list.filter(item=>{
                            if(item.name.includes(keywords))
                            //ES6中提供一個(gè)方法 string.prototype.includes('字符串')
                            //若包含則返回true,否則false
                            {return item}
                        })
                        }

• 最終結(jié)果和完整代碼