一、環(huán)境搭建

最快速最便捷的方式是通過vue腳手架vue-cli來搭建

全局下載vue-cli腳手架

也可以通過指定版本號(hào)來下載 cnpm i -g @vue/cli@3.1.1

如果vue的版本不一致，可以通過uninstall來卸載重新安裝 npm uninstall -g @vue/cli

二、創(chuàng)建并運(yùn)行項(xiàng)目

通過vue create 項(xiàng)目名來創(chuàng)建項(xiàng)目

進(jìn)入文件夾并啟動(dòng)服務(wù)

三、模板語法

模板語法出自“胡子語法”,在props屬性或者data方法里面定義變量，然后在模板中用{{變量名}}來使用這個(gè)變量，或者用v-html指令來使用包含html標(biāo)簽的變量，像class、id等特性得用v-bind:id(:id)/v-bind:class(:class)來使用變量，同時(shí)在模板中還可以使用表達(dá)式。

3.1 文本

在data方法中定義text變量，在模板中用{{text}}來使用它

瀏覽器中會(huì)出現(xiàn)這個(gè)文本

3.2 html標(biāo)簽

當(dāng)變量中有html標(biāo)簽時(shí)，通過v-html來渲染變量，可以識(shí)別標(biāo)簽，而不會(huì)把它當(dāng)成字符串直接渲染出來

可以識(shí)別出i標(biāo)簽并顯示斜體樣式

3.3 class、id等渲染

id、class這些渲染的時(shí)候要用v-bind指令的方式

3.4 語句

vue中可以使用單個(gè)表達(dá)式

單個(gè)表達(dá)式

3.5 指令

指令指的是帶有v- 前綴的特殊attribute,vue中常見指令有v-if/v-else、v-show、v-hide、v-once、v-bind、v-on、v-for。

還有一個(gè)特殊的用法是自定義指令，建一個(gè)js文件，引入vue，使用vue.directive方法來創(chuàng)建一個(gè)自定義指令，directive方法傳入兩個(gè)參數(shù)，第一個(gè)參數(shù)為自定義指令名，第二個(gè)參數(shù)為對(duì)象，對(duì)象里可以使用鉤子函數(shù)（binding、inserted、update、componentUpdated、unbind），這些鉤子函數(shù)有四個(gè)參數(shù)（el、binding、vnode、oldVnode）。使用的時(shí)候引入這個(gè)js文件，然后在模板中通過v-指令名來調(diào)用。如下所示：

創(chuàng)建n.js并通過directive方法來創(chuàng)建自定義指令

導(dǎo)入這個(gè)指令

通過v-指令名來使用自定義指令，這里通過v-n

3.6 修飾符

3.7 縮寫

v-bind:href? 可以寫成 :href? ?|? ?v-on:click 可以寫成 @click

四、樣式與遍歷

4.1 計(jì)算屬性? 使用于具有依賴關(guān)系的數(shù)據(jù)監(jiān)聽

一般當(dāng)有數(shù)據(jù)變化會(huì)帶來其他數(shù)據(jù)變化的時(shí)候，是用回調(diào)函數(shù)來操作的，當(dāng)某某變完改變另一個(gè)，在vue中則是由計(jì)算屬性來完成，相當(dāng)于vue自己的回調(diào)。

在computed寫計(jì)算屬性，具有依賴關(guān)系的數(shù)據(jù)監(jiān)聽

4.2 類與樣式

4.2.1 數(shù)組方式：適合較少的class

代碼中通過數(shù)組的方式來給class賦值

dom結(jié)構(gòu)中顯示的結(jié)果

4.2.2 對(duì)象方式：適用于比較多的class名或者動(dòng)態(tài)class

可以直接賦值給class一個(gè)對(duì)象，屬性值是字符串也就是class名，屬性值是定義的變量為布爾值；也可以賦值給class一個(gè)變量，這個(gè)變量是在props傳過來的或者data方法中定義的一個(gè)對(duì)象變量，同樣的這個(gè)對(duì)象的屬性名是class名，屬性值為布爾值。如下所示

4.2.2.1 直接在class里面寫對(duì)象

傳給class的是一個(gè)對(duì)象，其中a3、a4是定義在data里面的布爾值，如上a3為true，所以test-3這個(gè)屬性名起作用，而a4為false,所以test-4不起作用

dom結(jié)構(gòu)中只顯示test-3

4.2.2.2 對(duì)象變量的方式

傳給class的是一個(gè)在data里定義的styleObj變量，這個(gè)變量是一個(gè)對(duì)象元素，屬性值即為類名，屬性值為布爾類型

dom中顯示test-5的類名

4.3 條件&列表渲染

條件：v-if/v-else/v-else-if? ?用于根據(jù)條件來判斷是否渲染一塊內(nèi)容

數(shù)組列表渲染： v-for指令

通過v-for來循環(huán)渲染一個(gè)數(shù)組，:key來定義唯一的key值，提升效率

循環(huán)渲染

也可以引用數(shù)組的下標(biāo)

通過在v-for里面用（item,ind）的方式來聲明下標(biāo)，然后就可以使用了

這里的a,0 b,1就是對(duì)應(yīng)上面的 {{item}},{{ind}}

對(duì)象列表渲染： v-for也可以用來渲染對(duì)象，如果直接傳一個(gè)參數(shù)，那就是對(duì)象屬性值，如果用（value,key）這樣的方式來循環(huán)渲染，第一個(gè)參數(shù)value是對(duì)象屬性值，第二個(gè)key是對(duì)象屬性名

對(duì)象渲染一個(gè)參數(shù)

這里的value就是對(duì)象objList里面的各個(gè)屬性值

{{value}}渲染的就是三個(gè)屬性值，張三? 20? 女?

列表渲染對(duì)象，第一個(gè)參數(shù)為對(duì)象的屬性值,第二個(gè)參數(shù)為對(duì)象的屬性名

渲染對(duì)象

分組用法 復(fù)雜模板的分組條件處理的方式

可以用template來進(jìn)行分組渲染，注意這里的:key就不能寫在template上面了，因?yàn)槠鋵?shí)tempate其實(shí)在dom中是不存在的，寫在template的子級(jí)元素上

分組渲染的結(jié)果

五、事件處理

5.1 定義與縮寫

vue中通過v-on:來監(jiān)聽dom事件，比如v-on:click

通過v-on監(jiān)聽dom事件，事件方法寫在methods里面

v-on可以用簡(jiǎn)寫@來代替

這里的@click就相當(dāng)于上面的v-on:click

5.2 內(nèi)聯(lián)寫法

除了上面的直接給v-on事件綁定一個(gè)方法外，還有一種內(nèi)聯(lián)的寫法來通過：方法名(參數(shù)1、參數(shù)2)，這種方式來調(diào)用，參數(shù)1就是 傳遞的參數(shù)，參數(shù)2是觸發(fā)事件的dom元素。如下所示：

通過內(nèi)聯(lián)寫法，傳遞參數(shù)‘hello world’給參數(shù)str

點(diǎn)擊button，觸發(fā)這個(gè)say方法，可以看到控制臺(tái)打印出：你好啊世界hello world

可以看到這里傳了兩個(gè)參數(shù)，第一個(gè)是str字符串，第二個(gè)$event是觸發(fā)事件的dom對(duì)象，注意這里必須寫成$event，否則的話會(huì)報(bào)錯(cuò)

可以看到這里顯示觸發(fā)事件的是button

5.3 事件修飾符

vue中提供了修飾符來實(shí)現(xiàn)之前的event.preventDefault()這種功能。常見的修飾符有.stop(阻止單擊事件繼續(xù)傳播) 、.prevent(阻止默認(rèn)行為)、.once(只執(zhí)行一次)、.self(只有觸發(fā)元素是自身時(shí)才調(diào)用函數(shù))、.passive(不阻止默認(rèn)行為，所以不可以與.prevent同時(shí)使用)、.capture(先在此處理，再交由內(nèi)部元素處理-----有點(diǎn)懵啥意思啊)。

如下：因?yàn)閎utton是div的子元素，點(diǎn)擊button觸發(fā)fn1,事件冒泡也會(huì)觸發(fā)父元素div的點(diǎn)擊事件調(diào)用say這個(gè)函數(shù)，但是因?yàn)橛昧?stop這個(gè)修飾符，阻止了單擊事件繼續(xù)傳播，所以這里點(diǎn)擊button的時(shí)候查看控制臺(tái)只會(huì)看到輸出222，不會(huì)調(diào)用say這個(gè)函數(shù)。

用.stop修飾符阻止單擊事件繼續(xù)傳播

點(diǎn)擊圖片中的button控制臺(tái)中只會(huì)打印222

六、組件

6.1 props:組件的參數(shù)傳遞? 父組件傳給子組件

在父組件中定義一個(gè)變量posts，這個(gè)變量是一個(gè)數(shù)組，父組件中引用了子組件child，這里還用v-for指令進(jìn)行了循環(huán)，將循環(huán)的每一個(gè)元素設(shè)置為post屬性，傳給了子組件child

父組件通過? :post? 這個(gè)屬性向子組件child傳遞了posts循環(huán)遍歷的每一個(gè)對(duì)象子元素post

在子組件的props中聲明一下傳過來的post屬性

可以看到子組件渲染出來了

6.2 自定義事件 ：子組件向父組件通信

上面的是父組件向子組件通信，子組件向父組件通信可以通過自定義事件的方式來進(jìn)行

子組件中通過$emit的方法來向父組件發(fā)出一個(gè)事件，第一個(gè)參數(shù)addCount是事件名，第二個(gè)this.num是傳給這個(gè)事件的參數(shù)，參數(shù)值為子組件定義的變量num（20）

在父組件中的methods對(duì)象中寫這個(gè)方法，@事件名自定義事件的方式在引用子組件的地方來調(diào)用，這里是@addCount='addCount'

6.3 slot：插槽在組件抽象設(shè)計(jì)中的應(yīng)用

如果希望父組件調(diào)用子組件中有一部分父組件調(diào)用的不同則顯示內(nèi)容不同，這里可以使用slot插槽來實(shí)現(xiàn)

首先在子組件中放置slot插槽來決定在哪里父組件可以替換，比如這里的<slot></slot>放在div和button之間，那么父組件中調(diào)用子組件時(shí)在子組件中寫的內(nèi)容就會(huì)替換這個(gè)slot所占的位置

這里父組件在調(diào)用子組件時(shí)在子組件中加了這個(gè)p標(biāo)簽，正常情況下這個(gè)p標(biāo)簽是不會(huì)顯示的，但是因?yàn)樯蠄D中子組件中使用了<slot></slot>所以這個(gè)p標(biāo)簽的內(nèi)容會(huì)顯示出來

可以看到這個(gè)p標(biāo)簽顯示出來了并且位置就是slot插槽在子組件中的位置，在div和button中間

如果想要使用多個(gè)插槽，可以在子組件中放置插槽的時(shí)候給插槽添加name屬性，父組件中調(diào)用子組件的時(shí)候放置插槽替換內(nèi)容的時(shí)候，在替換內(nèi)容里通過slot=“插槽的name值”就可以了。

子組件中定義了兩個(gè)插槽，分別是第4行的name為firstSlot的插槽和第8行name為secondSlot的插槽

父組件調(diào)用子組件child的時(shí)候在child里面寫了兩個(gè)p標(biāo)簽分別是slot為firstSlot的和slot為secondSlot的來代替上圖中子組件的那兩個(gè)slot

可以看到替換的位置與子組件中slot的位置相同

七、路由

通過vue create 項(xiàng)目名來創(chuàng)建的項(xiàng)目并沒有自動(dòng)配置使用vue-router,所以當(dāng)項(xiàng)目需要使用的時(shí)候，需要如下步驟：

1、下載vue-router

通過cnpm i vue-router來下載vue-router

2、新建pages文件夾，并編寫測(cè)試頁面組件a.vue和b.vue

添加頁面組件

3、創(chuàng)建router.js文件，創(chuàng)建vue-router實(shí)例，并且在vue中使用vue-router

導(dǎo)入vue、vue-router還有頁面組件，通過vue.use來使用vue-router,再通過new關(guān)鍵字來創(chuàng)建一個(gè)vue-router實(shí)例并配置這個(gè)實(shí)例的routes選項(xiàng)，最后將這個(gè)實(shí)例通過export導(dǎo)出

4、在main.js中將這個(gè)vue-router實(shí)例掛載到vue實(shí)例上去

導(dǎo)入router.js文件（這個(gè)文件導(dǎo)出對(duì)象是一個(gè)vue-router實(shí)例），再將其掛載到vue實(shí)例上去

5、這時(shí)候會(huì)發(fā)現(xiàn)控制臺(tái)會(huì)報(bào)runtime的錯(cuò)誤，這是因?yàn)轫?xiàng)目默認(rèn)是只能實(shí)時(shí)運(yùn)行而不同模板渲染的，想要通過路由必須要在vue的配置文件中將runtimeCompiler選項(xiàng)設(shè)置為true,但是項(xiàng)目中并沒有這個(gè)配置文件，所以得手動(dòng)創(chuàng)建一下vue.config.js文件，并且配置一下。如下：

創(chuàng)建vue.config.js文件（注意這個(gè)文件與項(xiàng)目的package.json文件平行），配置runtimeCompiler為true

6、修改public文件夾下面的index.html，引入router-view組件和router-link組件，router-view是用來占位顯示router-link中的to屬性指向的頁面，每當(dāng)點(diǎn)擊router-link組件，router-link的to屬性中指向的頁面就會(huì)顯示在router-view的位置，注意這個(gè)to屬性配置的路徑得和上面3的vue-router實(shí)例中配置的routes數(shù)組值得對(duì)象的path屬性相同。

index.html中添加router-view和router-link內(nèi)置組件

注意看上面的router-link中的to里的 "/a"和“/b”，和這里的path配置的路徑是一致的

點(diǎn)擊第一個(gè)router-link,會(huì)發(fā)現(xiàn)中間出現(xiàn)了a頁面

八、vuex基礎(chǔ)

8.1 基礎(chǔ)使用

1、下載vuex

通過 cnpm i vuex來下載vuex

2、新建vuex的文件，在vue中使用vuex，并創(chuàng)建vuex的Store實(shí)例，配置state、mutations、actions等然后導(dǎo)出

新建store文件夾，在該文件夾下新建index.js，引入vue和vuex并通過use方法來在vue中使用vuex，通過new Vuex.Store來創(chuàng)建vuex的Store實(shí)例（注意這里的new Vuex.Store的S必須大寫，否則會(huì)報(bào)錯(cuò)），配置完state、mutations、actions等然后通過export來導(dǎo)出這個(gè)模塊

3、在main.js中將vuex的Store實(shí)例掛載到全局vue實(shí)例上去，這樣全局都可以使用了

導(dǎo)入store實(shí)例，并掛載到全局

4、組件中使用

用mapActions相當(dāng)于this.dispatch

8.2 vuex模塊化

vuex中可以使用modules來對(duì)vuex的狀態(tài)進(jìn)行模塊化管理

1、在store文件夾下面創(chuàng)建modules文件夾，并編寫money模塊和count模塊，并將其導(dǎo)出

將模塊導(dǎo)出

2、在store的index.js的vuex的store實(shí)例中的modules屬性中導(dǎo)入各個(gè)模塊

注意到這里都不用再寫state、mutations、actions這些了，因?yàn)樵谀K中都寫了，只需要用modules來導(dǎo)入各個(gè)模塊就可以了

3、組件中使用state中的變量需要用模塊的state變量名的方式，觸發(fā)方法需要在前面指定是屬于哪個(gè)vuex模塊的

使用變量中第一個(gè)count是模塊名，第二個(gè)count指的是count模塊中state定義的狀態(tài)count；方法里前面加個(gè)count表明是count模塊中的add操作和reduce操作，不像之前直接是個(gè)數(shù)組里面寫add、reduce方法名

4、傳參在組件中傳參，在mutations和actions中聲明一下參數(shù)

add用了內(nèi)聯(lián)的寫法，傳了參數(shù)3給add方法

在mutations和actions里的add方法中都聲明了參數(shù)param