1. 程式人生 > 其它 >Vue基礎知識三

Vue基礎知識三

1、事件處理

(1)基本使用
  1、使用v-on:xxx或@xxx繫結事件,xxx是事件名;

  2、事件的回撥需要配置在methods物件中,最終會在vm上;

  3、methods中配置的函式不要用箭頭函式,否則this就不是vm了;

  4、methods 中的配置函式都是被Vue所管理的還是,this的指向是vm或元件例項物件;@click="demo"和@click="demo($event)"效果一樣,但是後者可以傳參
(2)事件修飾符
prevent——阻止預設事件   stop——阻止事件冒泡  once——事件只觸發一次    capture——使用事件的捕獲模式  

self——只有event.target是當前操作的樣式時才觸發事件   passive——事件的預設行為立即執行,無需等待事件回撥執行完畢
注意:修飾符可以連寫,如@click.prevent.stop
(3)鍵盤事件
Vue中常用的按鍵別名:回車enter    刪除delete    退出esc   空格space    換行tab(特殊——配合keydown使用)    上up    下down    左left   右right
系統修飾鍵(用法特殊):ctrl、alt、shift、meta(就是win鍵)
配合keyup使用——在按下修飾鍵的同時,再按下其他鍵,隨後釋放其他鍵,事件才被觸發;配合keydown則正常觸發事件

2、計算屬性computed:要用的屬性不存在,通過已有屬性計算得來

計算屬性實現姓名案例:與methods實現對比,內部有快取機制(複用),效率更高,除錯方便;如果計算屬性要被修改,則必須寫set函式去響應修改
簡寫(只讀不改)——只有get
computed{
  fullName(){
    return this.firstName+'-'+this.lastName
  }
}

3、監視屬性/偵聽屬性watch

兩種寫法:new Vue時傳入watch配置  通過vm.$watch監視
深度監視deep——
(1)Vue中的watch預設不監測物件內部值得改變(一層),配置deep:true可以監測物件內部值得改變(多層)
(2)Vue自身可以監測物件內部值的改變,但Vue提供的watch預設不可以;使用watch時根據資料的具體結構,決定是否採用深度監視