1. 程式人生 > >Vue.js 筆記(二) 模板語法

Vue.js 筆記(二) 模板語法

指令

1. 以 v-  開頭 常見有:v-bind(資料單向輸出),v-html(顯示html),v-model(資料雙向繫結),v-if(條件,是否插入元素),v-on(事件)

2. 引數,指令後加冒號,如:v-bind:class='class1'  將DOM 元素class 屬性與表示式 class1 的值繫結 

縮寫

1. v-bind:---------:      如:v-bind:href='url' ---------:href='url'

2.v-on:[email protected]

     如:v-on:click='sayhi'[email protected]='sayhi'  

事件修飾符

例:   v-on:click.stop='dosth'      (阻止事件冒泡)  ,   v-on:keyup.enter (按回車鍵鬆開時)  

 

過濾器

常用:

名稱 說明
uppercase 全部轉為大寫
lowercase 全部轉為小寫
currency 數字轉為貨幣格式,第一個引數為貨幣符,第二個引數為保留小數位數
debounce 延遲執行,單位毫秒,限在@中使用 
limitBy 限在v-for中使用,第一個引數 讀取數量,第二個引數 開始位置
orderBy 限制:需在v-for(即陣列)裡面使用 ,第一個引數 搜尋字元,第二個引數 升(>=0)降序(<0)
filterBy 限制:需在v-for(即陣列)裡面使用  格式:
v-for="item in arr | filterBy 'l' in 'name' 'dada' "
   

自定義過濾器:

let v=new Vue({
    el:'el1',
    methods:{},
    filters:{
        filter1:function(val1,val2){ //第一個引數為呼叫者本身,後面可加多個其他引數
            //.....
            return '';
        }
    }
});