目錄：

1. Vue基本使用；

2. 語法；

3. v-for：渲染；

4. v-if

5. computed：計算屬性；

6. v-model：雙向綁定；

7. v-on:click：綁點擊事件；

   
   

Vue介紹

1. 文檔

把文檔當做小說看 ?官方文檔

1. 定位

漸進式 JavaScript 框架vue、@vue/cli、vue-router、vuex

1. 特點

數(shù)據(jù)驅(qū)動視圖的思想 ?【思想轉(zhuǎn)變成功，代表vue會了一半】

• Javascript ? document.querySelector

• JQuery ? ? ? 封裝方法，簡化DOM操作代碼 $('.cont')

• Vue ? ? ? ? ?開發(fā)者只需要操作數(shù)據(jù)包，不需要操作DOM了，Vue幫我們操作DOM

1. 學習流程

鉆牛角尖用 ?懂 ? 改 ? 造

1. 思想轉(zhuǎn)變

• 找元素DOM

• 定義并操作數(shù)據(jù)包

Vue基本使用

• 下載

• 引入

• 準備容器

• 初始化Vue

Vue常用指令

1. {{}} 普通數(shù)據(jù)渲染

2. v-html ? 富文本渲染

3. v-bind:class ? 屬性控制

4. v-if ?v-show ? ?條件渲染

5. v-on:click ? ?事件綁定

菜單切換

1. 定義一個合理的數(shù)據(jù)包格式

2. 根據(jù)數(shù)據(jù)包（布爾值），控制li的active名稱

3. 通過事件觸發(fā)修改數(shù)據(jù)包，自動觸發(fā)視圖更新

4. 使用條件渲染，控制內(nèi)容的顯示

思考題

如何實現(xiàn)三個以上的菜單切換？提示: 在data中定義數(shù)字 (0,1,2....)

事件詳解

1. 掌握5中寫法

2. 事件修飾符 參考文檔

列表渲染

渲染一組數(shù)據(jù) 注意v-for嵌套

v-for="(item,index) in 數(shù)據(jù)包"

item ?是遍歷數(shù)據(jù)包中的每一條數(shù)據(jù)，格式不確定（對象、數(shù)組、字符串）
index ?遍歷時的序號

computed 計算屬性

計算 ? 宏觀計算（對于數(shù)據(jù)的所有操作都可以稱為一種計算） 屬性 ? 會返回新的運算結(jié)果給我們直接渲染 使用computed的優(yōu)勢

• 降低代碼冗余度

• 邏輯代碼的拓展性較強

• 提高渲染性能

• 能夠根據(jù)data的變化，自動觸發(fā)重新運算

1. 字符串翻轉(zhuǎn)操作 Hello ---> olleH

2. 按成績篩選學員的功能

數(shù)據(jù)雙向綁定

針對表單元素

1. 單向綁定

2. 雙向綁定

3. 按鍵修飾符 參考文檔

4. 拓展練習

• Enter發(fā)送

• Ctrl+Enter發(fā)送

任務(wù)

1. 熟練掌握課堂案例

2. 拓展案例

• 發(fā)送消息

1. 綜合拓展案例【用戶信息錄入】

• 錄入功能 ? ? v-model ? v-on:click

• 渲染用戶 ? ? v-for ? v-if

• 刪除用戶 ? ? Array.splice(index,1)

• 刪除所有 ? ?

• 學員篩選功能 ? computed