Vue入門指南-04 事件機制和事件/按鍵修飾符和過濾器及監聽屬性(快速上手vue)

綁定事件監聽器。事件類型由參數指定。表達式能夠是一個方法的名字或一個內聯語句，若是沒有修飾符也能夠省略。

用在普通元素上時，只能監聽原生DOM事件。用在自定義元素組件上時，也能夠監聽子組件觸發的自定義事件。

綁定事件機制

Vue中提供了v-on：綁定事件機制（冒號後面跟着事件名稱）

使用方式：
new app({
    el: "#ap",
    methods: {
        add () {
            alert("我是P標籤的點擊觸發的")
        }
    }
})
<p v-on:click="add"></p>** // 注意: 綁定事件的觸發方法須要在配置對象的methods屬性中定義
簡寫方式:
<p @click="add"></p>
複製代碼

事件修飾符

.stop - 調用 event.stopPropagation()。 // 阻止冒泡
.prevent - 調用 event.preventDefault()。// 組織默認事件

//capture添加事件偵聽器時使用事件捕獲模式 //事件觸發順序從外往裏
.capture - 添加事件偵聽器時使用 capture 模式。 

// 只會組織本身身上冒泡行爲的觸發, 並不會真正阻止冒泡的行爲
// self實現只有點擊當前元素時候,纔會觸發事件處理函數
.self - 只當事件是從偵聽器綁定的元素自己觸發時才觸發回調。 

.{keyCode | keyAlias} - 只當事件是從特定鍵觸發時才觸發回調。
.native - 監聽組件根元素的原生事件。
.once - 只觸發一次回調。
.left - (2.2.0) 只當點擊鼠標左鍵時觸發。
.right - (2.2.0) 只當點擊鼠標右鍵時觸發。
.middle - (2.2.0) 只當點擊鼠標中鍵時觸發。
.passive - (2.3.0) 以 { passive: true } 模式添加偵聽器
使用方式: 
<p @click.stop="add"></p> // @事件.事件修飾符
複製代碼

按鍵修飾符

• 自定義全局按鍵修飾符

// 全局按鍵修飾符(全部的Vue實例都能調用)定義語法
建立方式：
// F2是定義鍵盤上的按鍵名稱，等於號後面是對應的鍵盤碼碼值
Vue.config.keycodes.F2 = 113
複製代碼

• Vue官方提供的按鍵修飾符

// 爲了在必要的狀況下支持舊瀏覽器，Vue 提供了絕大多數經常使用的按鍵碼的別名：
.enter // 回車鍵擡起
.tab // tab切換鍵擡起
.delete (捕獲「刪除」和「退格」鍵)
.esc //退出鍵擡起
.space // 空格鍵擡起
.up // 上
.down // 下
.left // 左
.right // 右
.對應鍵盤碼 // 使用鍵盤碼是要注意若是不是以上對應的鍵盤修飾符，須要建立按鍵修飾符
使用方式:
<p @keyup.enter="add"></p> // @click.按鍵修飾符
<p @keyup.13="add"></p> // @click.對應鍵盤碼
複製代碼

Vue中的過濾器

自定義過濾器,可被用做於常見的文本格式化,用在兩個地方,mustachc插值和v-bind表達式,過濾器添加在JS表達式尾部,由"管道"符指示

過濾器調用的時候,採用就近原則,若是私有過濾器和全局過濾器名稱一致,優先調用私有過濾器

過濾器調用時的格式 {{ msg | myFilter }}

• 自定義全局過濾器

// 注意: 函數內部第一個參數必定是你要過濾的這個msg
// 注意: 過濾器myFilter也能夠進行傳參
// 注意: 過濾器能夠屢次調用
建立方式:  // myFilter是過濾器的名字
Vue.filter("myFilter", function( msg ){
    return msg.toUpperCase()
})
複製代碼

• 自定義局部過濾器

new app({
    el: "#app",
    filters: {
        myFilter: function (val) {
            return val.toUpperCase()
        }
    }
})
複製代碼

Vue中的監聽屬性

watch屬性

使用這個屬性,能夠監聽data中數據的變化,而後觸發這個watch中對應的屬性處理函數

• 監聽屬性

// watch能夠用來監視一些非DOM元素的改變, 這就是他的優點
// watch是一個對象, 鍵是須要觀察的表達式, 值是對應的回調函數
// 主要用來監聽某些特定數據的變化,從而進行某也具體的業務邏輯操做,能夠看作是computed和methods的結合體
使用方式:
new app({
    el: "#app",
    data: {
        count: 1
    },
    watch: {
        // 函數中有兩個參數,一個是newVal, 一個是oldVal具體怎麼用去看下官網 很簡單
        count: function () {
            console.log("當data中的count屬性的值發生變化時被我監聽到了")
        }
    }
})
// 使用雙向數據綁定count
<input >{{ count }}</input>
複製代碼

• 監聽路由 watch監視路由變化

// 路由身上有一個this.$router.path屬性, 指向當前路由的地址
使用方式: 
new app({
    el: "#app",
    data: {
        count: 1
    },
    watch: {
        // 函數中有兩個參數,一個是newVal, 一個是oldVal具體怎麼用去看下官網 很簡單
        "$route.path": function(newVal, oldVal){
            // 在這裏咱們就可根據路由的變化去作一些認證, 跳轉頁面等等的操做
            console.log(`路由新地址${newVale}---路由舊地址${oldVal}`)
        }
    }
})
複製代碼

computed屬性

在 computed 中,能夠定一些屬性, 這些屬性叫作計算屬性

計算屬性的本質就是一個方法, 只不過咱們在使用這些計算屬性的時候是吧它們的名稱直接當作屬性來使用的, 並不會把計算屬性當作方法去調用

computed屬性的結果會被緩存, 除非依賴的響應式屬性變化纔會從新計算, 主要當作屬性來使用

使用方式:
new app({
    el: "#app",
    data: {
        count: 1
    },
    computed: {
        countComputed () {
            return count + 1
        }
    },
    methods: {
        add () {
            count++
        }
    }
})
<button @click=add>自增</button> // 點擊按鈕的的時候count自增長1 
<input>{{ countComputed }}</input> // countComputed屬性的值永遠依賴於count, 而且比它大1

// 注意 : 計算屬性在引用的時候必定不要加()去調用,直接把它當作普通屬性去引用就好
// 注意 : 計算屬性這個function內部所用到的任何data中的數據發生了變化,就會當即從新計算這個計算屬性的值
// 注意 : 計算屬性的求值結果會被緩存起來, 方便下次直接使用
// 注意 : 若是計算屬性方法中, 所依賴的任何數據,都沒有發生任何變化,則不會從新對計算屬性求值
複製代碼

Vue入門指南(快速上手vue)