模板語法

1. 插值語法
   功能：用於解析標籤體內容
   寫法：{{xxx}}，xxx是js表示式，且可以直接讀取到data中的所有屬性。
2. 指令語法
   功能：用於解析標籤（包括：標籤屬性、標籤內容、繫結事件......）。
   舉例：v-bind: href = "xxx"或簡寫為 :href="xxx"，xxx同樣是js表示式，且可以直接讀取到data中的所有屬性。

     <!-- v-bind:可簡寫為: -->
     v-bind: ===》：
   

資料繫結

1. 單項資料繫結
   使用v-bind進行繫結是單向的，資料只能從data流向頁面。
2. 雙向資料繫結
   使用v-model進行繫結是雙向的，資料不僅能從data流向頁面，也能從頁面流向data。並且v-model只能應用在表單類元素（輸入類元素），v-model: value可簡寫為v-model，因為v-model預設收集的就是value值。

el與data的兩種寫法

1. el有兩種寫法
   • new Vue時候配置el屬性
   • 先建立Vue例項，隨後再通過vm.$mount("#root")指定el的值
2. data有兩種寫法
   • 物件式
   • 物件式
     在app.vue中（根元件）採用物件式寫法，其他（子元件）中採用函式式

資料代理

1. vue中的資料代理
   通過vm物件來代理data物件中屬性的操作(讀/寫)
2. Vue中資料代理的好處
   更加方便的操作data中的資料
3. 基本原理
   通過object.defineProperty()把data物件中所有屬性新增到vm上，為每一個新增到vm上的屬性，都指定一個getter/setter。

事件處理

• 使用v-on : xxx或@xxx繫結事件，其中xxx是事件名
• 事件的回撥需要配置在methods物件中，最終會在vm上
• methods中配置的函式，都是被Vue所管理的函式
• @click="demo”和@click="demo($event)”效果一致，但後者可以傳參

事件修飾符

• prevent：阻止預設事件（常用）
• stop：阻止事件冒泡（常用）
• once：事件只觸發一次（常用）
• capture：使用事件的捕獲模式
• self：只有event.target是當前操作的元素時才觸發事件
• passive：事件的預設行為立即執行，無需等待事件回撥執行完畢
  先進行事件捕獲再進行事件冒泡，一般在事件冒泡階段處理事件
  修飾符可以連著寫，如@click.stop.prevent

鍵盤事件

鍵盤事件可分為兩種，分別是keydown與keyup（在keyup中也可以連寫，如@keyup.alt.y，即在同時按下alt和y鍵有效）

1. Vue中常用的按鍵別名：
   • 回車==》enter
   • 刪除==》delete（捕獲刪除和退格鍵）
   • 退出==》esc
   • 空格==》space
   • 換行==》tab（與keydown使用方有效）
   • 上==》up
   • 下==》down
   • 左==》left
   • 右==》right
2. Vue未提供別名的按鍵，可以使用按鍵原始的key值去繫結，但要轉為kebab-case（短橫線命名）
3. 系統修飾符（用法特殊）：ctrl、alt、shift、meta（win鍵）
   • 配合keyup使用：按下修飾鍵的同時，再按其他鍵，隨後釋放其他鍵，事件才會觸發
   • 配合keydown使用：正常觸發事件

計算屬性

1. 在利用vue方法中，只要data中的資料發生改變，則vue一定會重新解析模板，並更新資料。
2. 原理：底層藉助了objcet.defineproperty方法提供的getter和setter.
3. 優勢：與methods實現相比，內部有快取機制（複用），效率更高，除錯方便。
4. 如果計算屬性要被修改，那必須寫set函式去響應修改，且set中要引起計算時依賴的資料發生變化。