Vue知識精簡總結-更新中

RollsRoycewk 發表於 2020-11-21
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