Vue基礎概念

洗劍發表於2019-01-28

一  7個類的例項屬性 和例項方法

  1.  el 指定當前viewmodel所管理的檢視位置vue自動啟動過程中需要依賴el手動啟動 Vue.$mount("#***")
  2. deta :用來組織從view中抽象出來的資料模型(頁面所以來資料) (狀態屬性)
  3.  methods:用來組織從view中抽象出來的方法(頁面以來的方法)
  4.  temolate:和5號二選一(推薦使用此方法) 維護 有且只有一個根元素 Vue.createElement
  5.  render : 以Vnode方式來建立view 2(diff)3(compiler->dom - >el)
  6.  computed: (計算屬性(data))針對data中的屬性進行計算結果
  7.  watch 監聽

二 8個hook方法

      1. 建立期berforeCreate created

      2.掛載期berforMount mounted

    以上四個方法在整個生命週期內只會執行一次

     3.更新期 berforUpdate updated(載入一個新的頁面)

   以上兩個方法在整個生命週期內當data中的值變化時就會呼叫 當執行了銷燬期,

   以上兩個方法就直接銷燬

     4. 銷燬期 berforDestroy destroyed 

   以上兩個方法在整個生命週期內只執行一次

三  7個核心指令

  1.  v-if 條件渲染指令 根據其後表示式的bool值進行判斷是否渲染該元素
  2. v-show 與v-if類似 只渲染其身後表示式為false的元素 而且會給這樣的元素新增css程式碼 如:style="display:none"
  3.  v-else 必須跟在v-if/v-show指令後,不然不起作用如果v-if/v-show指令的表示式為true 則else元素不顯示;如果v-if/v-show指令表示式為false 則else元素會顯示在頁面上
  4.  v-for 類似JS的遍歷 用法為v-for="item in items" items是陣列,item為陣列中的陣列元素
  5.  v-bind 這個指令用於響應的更新HTML特性, 比如繫結某個class元素或元素的style樣式
  6.  v-on 用於監聽指定元素的Dom事件 比如點選事件
   7.  v-model 用於表單元素,進行雙向資料繫結

四 未知

注:後期待修改