1. 程式人生 > >vue基礎

vue基礎

code 生命 有變 compute 選擇器 else recompile 沒有 必須

var vm = new Vue({

  el: "選擇器",  掛載到頁面的那個元素裏,即確定vue的作用範圍  外部可通過vm.$el訪問,得到的是一個原生dom元素,可進行對應操作

  a: ‘‘,  //自定義屬性  外部可通過vm.$options訪問

  data: { }, //實例屬性都在這裏面,外部通過實例名,即vm.$data調用

  computed: { }, //計算屬性,也是實例屬性,只是以方法的形式存在,並可以有邏輯運算的屬性

  method: { }, //實例方法都在這裏

  watch: { }, //對data和computed的屬性進行監聽,當屬性有變化時自動觸發,以方法的形式存在 外部通過$.watch調用

  //註意:以上屬性和方法,實例內部都通過this調用,外部則通過對應的實例方法訪問

  //在vue的生命周期過程中,它自身還提供了一系列的鉤子函數供我們使用,進行自定義邏輯的註入:   

  created: function(){ 實例已經創建 }

  beforeCompile: function(){ 模塊編譯之前 }

  compiled: function(){ 模塊編譯之後;即模板占位符被是內容替換}

  ready: function(){ 模板插入到文檔中了;相當於window.onload }

  註意: 以上4個方法在對象被實例化後即按順序執行,以下2個方法需通過事件觸發,並通過調用 實例名.$destory() 才執行

  beforeDestroy: function(){ 對象銷毀之前 }

  destroyed: function(){ 對象銷毀之後 }

});
技術分享

Vue對象解析:

1,對象屬性

  data、el、options、watch、computed

2,對象方法

  生命周期之鉤子函數

3,對象實例訪問和調用屬性和方法

  A:實例屬性調用:$options、$el、$data、$watch

  這裏著重說下$watch,它的一般語法為:

vm.$watch("監聽的實例屬性名",function() { // 對於監聽數據變化後的業務處理代碼 });     --淺度監聽

  如果監聽的屬性是基本數據類型,上面用法是沒有問題的,但如果監聽的屬性是對象,則對象內部的數據有變化,上面寫法是監聽不到的,需要進行一個參數進行深度監聽,具體語法如下:

vm.$watch("監聽的實例屬性名",function() { // 對於監聽數據變化後的業務處理代碼 },{deep: true});  --深度監聽

  B:實例方法調用:$mount()、$log()、$destroy()

4,自帶過濾器&自定義過濾器

  A:vue自帶的過濾器有:

    capitalize(首字母大寫)、uppercase、currency、json( 相當於JSON.Stringify() )、debounce(後跟秒數,配合事件,延遲執行)

    limitBy(參數1, 參數2) 常用語v-for數組,限制輸出數量和從哪輸出;參數1代表輸出幾個,參數2代表從第幾個輸出

    filterBy(參數) 過濾數據,過濾含有參數的數據,配合input輸入框,通過輸入變量過濾,打到熱搜索的效果

    orderBy(參數) 對數據排序,參數為1時為正序,為-1時則倒序,其他什麽參數呢?所以1和-1基本是常用情況

  B:自定義過濾器語法 (對於時間戳的處理是比較常用的自定義過濾器)

技術分享
    Vue.filter("過濾器名稱",function(參數...){

    ...  //業務處理

    return ...;

  });
技術分享

  //以下內容可忽略

  自定義過濾器之雙向過濾器 //據說應用不多,暫且放著

技術分享
    Vue.filter("過濾器名稱",{

    read: function(input) { return ... },   //model-view

    write: function(val) { return ... }  //view-model

  })
技術分享

5,自帶指令和自定義指令

  指令是對HTML語法的擴展,必須以v-開頭,一般我們口中的指令實際是指屬性指令,使用該屬性指令的元素講具有對應的屬性功能,下面的C則是指元素指令,與屬性指令有所區別

  A:自帶指令:v-if、v-show、v-else、v-module、v-text、v-html、v-bind、v-on、v-el、v-cloak...

  這裏著重說下v-text和v-cloak:在模板中我們調用實例屬性數據時通常這樣{{ 實例屬性 }},這樣在網速比較慢的情況下,頁面出現閃爍的時候會把花括號和裏面的原始內容顯示出來,這樣用戶體驗不好,處理這種情況有2種方式:

    1, 在較大段落元素上使用v-clock指令,並設置該元素的css: display:none

    2, 使用v-text/v-html代替花括號即可,Vue2.0也支持這樣做,且花括號方式可能被取消

  B:自定義指令語法:

  Vue.directive("指令名稱",function(..){
    this.el.style.background = ‘red‘;   //這裏的this代表new出來的實例,this.el代表原生的dom元素
  });

  模板中使用v-指令名稱進行使用,或v-指令名稱="參數",可以在調用指令是進行傳參

  定義指令名稱時不加v-,模板使用時加v-

  C: 自定義元素指令 (據說用處不大,可忽略跳過,它所想要達到的效果,組件已超越)

    Vue.elementDirective("自定義元素名稱",{
    bind: function() {};
  });

  它不支持B情況語法,但B情況語法卻默認也是bind

6,自定義鍵盤信息

Vue.directive(‘on‘),keyCodes.ctrl = 17;  //17是ctrl的鍵碼  等號前的ctrl是定義ctrl的別名,可以隨便取,實際綁定的就是鍵盤上的ctrl鍵

[email protected] ="自定義方法"

vue基礎