vue自定義指令,過濾器及綜合案例
阿新 • • 發佈：2018-12-15
vue過濾器
Vue.filter
<!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> <link rel="stylesheet" href="./lib/bootstrap.css"> </head> <body> <div id="app"> <!-- msgl中的引數是要替換成的最終結果 也就是 '你們' 替換 '單純'--> <p>{{msg | msgL('你們') }}</p> </div> <div id="app2"> <p>{{msg | msgL('你們') }}</p> </div> <script src="./lib/Vue.js"></script> <script> //定義個全域性過濾器 Vue.filter('msgL',function(msg,reg){//第一個引數固定 return msg.replace('單純',reg) }) var vm = new Vue({ el:'#app', data:{ msg:'單純 邪惡 瘋狂 哈哈' }, methods:{ } }); var vm2 = new Vue({ el:'#app2', data:{ msg:'單純 邪惡 瘋狂 哈哈' }, methods:{ }, //定義私有過濾器 filters:{ msgL:function(msg){ } } }); </script> </body> </html>
自定義指令,過濾器知識應用(品牌列表案例)
<!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> <link rel="stylesheet" href="./lib/bootstrap.css"> </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" class="form-control" v-model="id"> </label> <label >Name <!-- 新增的時候輸入名稱後 按下回車鍵 就執行新增 --> <!-- 按鍵修飾符 enter(回車鍵) tab delete esc space up down left right --> <input type="text" class="form-control" v-model='name' @keyup.f2="sub"> </label> <input type="button" value="新增" class="btn btn-primary" @click="sub"> <label >搜尋關鍵字: <!-- 增加兩個自定義指令,一個是v-focus 一個是v-color 並在第二指令中設定value值 --> <input type="text" class="form-control" v-model="keywords" v-focus v-color="'blue'"> </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(keywords)" :key="item.id"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.ctime | time()}}</td> <!-- 繫結事件,並組織預設行為 預設行為是a標籤的行為 --> <td><a href="" @click.prevent='del(item.id)' v-fontweight="900" v-fontsize="5">刪除</a></td> </tr> </tbody> </table> </div> <script src="./lib/Vue.js"></script> <script> //過濾器 // Vue.filter('過濾器名稱',function(){}) Vue.filter('time',function(dateStr,pattern=''){ //根據給定的時間字串,得到特定的時間 var dt = new Date(dateStr) var year = dt.getFullYear() //月和日有可能為單數 單數的時候在前面加0 //所以先將月和日的值轉換成字串 然後進行padstar填充字串 var month = (dt.getMonth()+1).toString().padStart(2,'0') var date = (dt.getDate()).toString().padStart(2,'0') //返回值 模板字串 if(pattern.toLowerCase() === 'yyyy-mm-dd'){ return `${year}-${month}-${date}` }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 `${year}-${month}-${date} ${hh}:${mm}:${ss}` } }) //定義全域性按鍵修飾符 Vue.config.keyCodes.f2 = 113; //自定義全域性指令讓輸入框獲得焦點 指令都是v-開頭 //其中引數1:是指令的名稱 在定義的時候,指令的名稱前面不需要寫上v-這個開頭,在呼叫的時候就要加上這個開頭 //第一引數永遠是el,表示指令的繫結的元素,屬於原聲JS物件 //引數2:是一個物件,有相關的函式,函式在特定階段執行相關操作 //剛繫結(bind)指令的時候,還沒有插入(inserted)到DOM中,這時候呼叫是沒有效果的 //只有插入DOM之後,只能生效 //比如自定義一個v-focus的指令 Vue.directive('focus',{ //每當指令繫結到元素的時候,會立即執行bind函式,只執行一次 bind:function(el){ }, //表示元素插入到DOM中的時候,會執行inserted這個函式.觸發一次 inserted:function(el){ el.focus() }, //當更新的時候,會執行這個函式,可能會觸發多次 updated:function(el) { } }) //自定義一個v-color的指令 Vue.directive('color',{ bind:function(el,binding){//和樣式相關的操作都可以在bind中執行 el.style.color = binding.value }, inserted:function(){//和JS相關的,最好在inserted中執行,防止JS行為不生效 } }) var vm = new Vue({ el:'#app', data:{ id:'', name:'', keywords:'',//搜尋的關鍵字 list:[ {id:1,name:'賓士',ctime:new Date()}, {id:2,name:'寶馬',ctime:new Date()}, ] }, methods:{ //點選新增 就會往陣列中插入一條資料 sub(){ var list = {id:this.id,name:this.name,ctime:new Date()} this.list.push(list) //新增之後輸入框的內容清空 this.id = this.name = '' }, //根據id刪除資料 del(id){ //方法一 some // this.list.some((item,i)=>{ // if(item.id === id){ // this.list.splice(i,1) // return true // } // }) //方法二 findIndex var index = this.list.findIndex(item=>{ if(item.id === id){ return true } }) this.list.splice(index,1) }, //搜尋 search(keywords){ //方法一 // var newList = [] // this.list.forEach(item=>{ // //如果搜尋的關鍵字等於陣列中的值 // if(item.name.indexOf(keywords) != -1){ // newList.push(item) // } // }) // return newList // forEach some filter findIndex 這些都屬於資料的新方法 //方法二 return this.list.filter(item=>{ //如果關鍵字的內容包含在name中 如果包含返回true if(item.name.includes(keywords)){ return item } }) } }, //自定義私有指令 directives:{ 'fontweight':{//設定字型粗細 bind:function(el,binding){ el.style.fontWeight = binding.value } }, //簡寫 'fontsize':function(el,binding){//這樣寫等用於把程式碼寫到bind和update中去 //binding.value的值轉換成整型 el.style.fontSize = parseInt(binding.value)+'px' } } }); </script> </body> </html>
如果有問題,歡迎在評論區留言!