繫結事件監聽器。事件型別由引數指定。表示式可以是一個方法的名字或一個內聯語句，如果沒有修飾符也可以省略。
用在普通元素上時，只能監聽原生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 // 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中的資料發生了變化,就會立即重新計算這個計算屬性的值
// 注意 : 計算屬性的求值結果會被快取起來, 方便下次直接使用
// 注意 : 如果計算屬性方法中, 所依賴的任何資料,都沒有發生任何變化,則不會重新對計算屬性求值
複製程式碼