Vue知識精簡總結-更新中

Vue

• 漸進式 JS 框架

• MVC

  • M - Model 資料層（資料庫）
  • V - View 檢視層（頁面、ejs）
  • C - Controler 控制層（路由）

• MVVM

  • M - Model 資料層（data、computed…）
  • V - View 檢視層（模板頁面）
  • VM - ViewModel 檢視模型層（vm 例項物件）
  • 資料能由 ViewModel 操作渲染到檢視層上（當資料將來發生修改，自動重新渲染到檢視層上-響應式）
  • 頁面資料發生變化，能由 ViewModel 操作來修改資料層的資料
    • 資料 M --> V 也能 V --> M, 叫做雙向資料繫結

• new Vue(config)

new Vue({ el: '#app', data: {}, methods: {}, computed: {}, watch: {} })

模板語法

• 雙大括號表示式（插值語法）

  • 語法：{{JS表示式}}
  • 作用：用來渲染 JS 動態資料
  • 注意：只能用於標籤內，不能作為標籤屬性

• 指令語法

  • 語法： v-xxx:propName=“JS 表示式” v-xxx=“JS 表示式”
  • 作為標籤屬性使用
  • v-model
    • 用來雙向資料繫結
    • v-model="msg"
  • v-bind
    • 用來單向資料繫結（強制繫結資料）
    • v-bind:value="msg"
    • 簡寫 :value="msg"
  • v-on
    • 用來繫結事件
    • v-on:click="handleClick"
    • 簡寫 @click="handleClick"

計算屬性和監視屬性

• computed 計算屬性

  • 只讀計算屬性

    computed: { fullName() { return xxx; } }
    

  • 可讀可寫計算屬性

    computed: { fullName: { get() {}, set(newVal) {} } }
    

  • 通常情況下，計算屬性內部會使用 data 資料。一旦內部使用的 data 資料發生變化，計算屬性就會重新計算結果。如果 data 資料沒有變化，就不會重新計算，使用上一次的快取結果（有快取）。

• watch

    watch: { firstName(newVal, oldVal) {  } }
  

  • 監視一個已存在的 data 屬性，一旦 data 屬性發生變化，就會呼叫相應的函式處理

樣式處理

• class

  • <p class="red">xxx</p>
  • <p :class="red">xxx</p>
  • <p :class="{red: isRed}">xxx</p>
  • <p :class="[red, 'green']">xxx</p>

• style

  • <p style="font-size: 16px;">xxx</p>
  • <p :style="{fontSize: '16px'}">xxx</p>

• 如果樣式是動態（可變的）用 style，如果靜態寫死就用 class