一、Vue簡(jiǎn)介

l?JavaScript框架

l?簡(jiǎn)化DOM操作

l?響應(yīng)式數(shù)據(jù)驅(qū)動(dòng)

二、Vue基礎(chǔ)

l?第一個(gè)Vue程序

n?導(dǎo)入vue.js

n?創(chuàng)建Vue實(shí)例對(duì)象，參數(shù)對(duì)象中設(shè)置el屬性和data屬性

n?使用簡(jiǎn)潔的模板語(yǔ)法（插值表達(dá)式）把數(shù)據(jù)渲染到頁(yè)面上

l?el掛載點(diǎn)

n?el掛載點(diǎn)作用？

el是用來(lái)設(shè)置Vue實(shí)例掛載（管理）的 元素

n?Vue實(shí)例的作用范圍是什么？

Vue會(huì)管理el選項(xiàng)命中的元素及其內(nèi)部的后代元素

n?是否可以使用其它的選擇器作為掛載點(diǎn)？

可以使用其它的選擇器作為掛載點(diǎn)，但是建議使用id選擇器

n?是否可以設(shè)置其它的dom元素？

可以給除了html和body元素之外的其它雙標(biāo)簽設(shè)置掛載點(diǎn)

l?data數(shù)據(jù)對(duì)象

n?Vue中用到的數(shù)據(jù)定義在data中

n?data中可以寫復(fù)雜類型的數(shù)據(jù)

n?渲染復(fù)雜類型數(shù)據(jù)時(shí)，遵守JS的語(yǔ)法即可

三、Vue指令

l?v-text 設(shè)置標(biāo)簽的內(nèi)容（textContent）

默認(rèn)情況下，v-text指令會(huì)替換匹配元素中全部?jī)?nèi)容；

如果想要替換指定部分內(nèi)容，請(qǐng)使用插值表達(dá)式 {{ }}

內(nèi)部支持寫表達(dá)式

l?v-html 設(shè)置標(biāo)簽的innerHTML

v-html 內(nèi)容中有html結(jié)構(gòu)會(huì)被解析為標(biāo)簽

而v-text無(wú)論內(nèi)容是什么，只會(huì)解析為文本

l?v-on 為元素綁定事件

事件名不需要寫on

指令可以簡(jiǎn)寫為@

綁定的方法定義在methods屬性中

方法內(nèi)部通過(guò)this關(guān)鍵字訪問定義在data中的數(shù)據(jù)

?

l?購(gòu)物車簡(jiǎn)易計(jì)數(shù)器

?

思路：

?

邏輯代碼：

?

?

l?v-show 根據(jù)表達(dá)式的真假，切換元素的顯示和隱藏（操縱樣式）

本質(zhì)是通過(guò)修改元素display的值，實(shí)現(xiàn)顯示和隱藏；

指令后面的的內(nèi)容，最終都會(huì)解析為布爾值：布爾值為true顯示元素，false隱藏元素

?

l?v-if 根據(jù)表達(dá)式的真假，切換元素的顯示和隱藏（操縱dom元素）

本質(zhì)是通過(guò)操縱dom元素來(lái)切換顯示狀態(tài)；

表達(dá)式的值為true，元素存在于dom樹中；為false，從dom樹中移除

?

l?v-bind 設(shè)置元素的屬性

語(yǔ)法 v-bind:屬性 = “屬性值”

簡(jiǎn)寫 :屬性 = “屬性值”

l?圖片切換案例

?

?

?

思路：

?

?

邏輯代碼：

?

?

l?v-for 根據(jù)數(shù)據(jù)生成列表結(jié)構(gòu)

??v-for指令的作用是根據(jù)數(shù)據(jù)生成列表結(jié)構(gòu)

數(shù)組數(shù)據(jù)經(jīng)常和v-for結(jié)合使用

語(yǔ)法是 (item,index) in data數(shù)據(jù)

item和index可以結(jié)合其它指令一起使用

數(shù)組長(zhǎng)度的更新會(huì)同步到頁(yè)面上，是響應(yīng)式的

?

簡(jiǎn)單數(shù)據(jù)操作：

添加和移除數(shù)據(jù)，頁(yè)面同步更新。

?

?

代碼演示：

?

?

l?v-on補(bǔ)充：事件修飾符

?

?

事件綁定的方法寫成函數(shù)調(diào)用的形式，可以傳入自定義參數(shù)；

定義方法時(shí)需要定義形參來(lái)接收傳入的實(shí)參；

事件的后面跟上 .修飾符?可以對(duì)事件進(jìn)行限制；

.enter 可以限制觸發(fā)的按鍵為回車

事件修飾符有多種

代碼：

?

分別點(diǎn)擊按鈕控制臺(tái)效果：

?

?

l?v-model ?雙向數(shù)據(jù)綁定

v-model指令的作用是便捷的獲取和設(shè)置表單元素的值；

綁定的數(shù)據(jù)會(huì)和表單元素值相關(guān)聯(lián)；

綁定的數(shù)據(jù) ??表單元素的值（雙向綁定）

?

代碼演示：

?