官網https://book.vue.tw/CH1/1-1-introduction.html

建立 vue

vue create .

MVVM 概念

• Model 資料狀態
• View 視圖
• ViewModel 資料連接
• View ←→ ViewModel ←→ Model

指令

• 屬性綁定 v-bind ⇒ :
• 資料綁定 v-model ⇒ 通常有 input 一定都會有 v-model
  • 只會用在 input, textarea, select
  • .lazy ⇒ 使用者離開輸入框時，才會更新 data
  • .number ⇒ 將輸入框轉為數字型態
  • .trim ⇒ 自動過去前後的空白字元
• 模板綁定 v-text / v-html / v-once / v-pre (文字 / html / 解析一次 / 不解析)
• 事件處理 v-on ⇒ @
  • .stop ⇒ event.stopPropagation ()
  • .prevent ⇒ event.prenentDefault ()
  • .capture
  • .self ⇒ 只會執行自己
  • .once
  • .enter
  • .up
  • .down
  • .exact ⇒ 精確判斷
• 條件判斷 v-if / v-show
  • v-show ⇒ 透過 css 的 display: none 來隱藏
  • v-if ⇒ 直接移除元素本身
• 列表渲染 v-for
  • 陣列 ⇒ v-for="(item, index) in items" :key="index"
  • 物件 ⇒ v-for="(val, key, index) in example"
  • 範圍 ⇒ v-for="page in 10"
  • <template> ⇒ v-for="i in links"

生命週期

• created ⇒ vue 實體已建立，狀態與事件初始化完成
• mounted ⇒ vue 實體與掛載完成

元件之間溝通

• props ⇒ 由父傳子
  • 資料類型 type
    • String
    • Number
    • Boolean
    • Array
    • Object
    • Data
    • Function
    • Symbol
  • 必要 required: true
  • 預設 default: 'example'
  • 驗證規則 validator: value ⇒ value > 0