01

什么是Vue.js

Vue (讀音 /vju?/，類似于view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。

看到這里，你就會(huì)問了，什么是漸進(jìn)式？

• 漸進(jìn)式就是你可以將Vue作為一個(gè)項(xiàng)目中的部分組件改用Vue實(shí)現(xiàn)，不需要引入其他復(fù)雜的功能，帶來豐富的交互體驗(yàn)。

• 也可以在一個(gè)項(xiàng)目中，更多的的業(yè)務(wù)邏輯都使用Vue，這樣Vue整個(gè)核心庫(kù)以及其生態(tài)系統(tǒng)可以逐步的引用。

02

引入Vue的方法

本篇文章因?yàn)槭侵饕菫榱薞ue的入門教程，重點(diǎn)主要是Vue的整個(gè)基礎(chǔ)語法上，所以不使用vue-cli，先采用手動(dòng)引入js的方式，學(xué)會(huì)Vue的基礎(chǔ)使用，循環(huán)漸進(jìn)，更加有利于我們的學(xué)習(xí)！

引入Vue.js有三種方式：

1、直接CDN引入

2、下載和引入

? ? ? ?開發(fā)環(huán)境：https://vuejs.org/js/vue.js

? ? ? ?生產(chǎn)環(huán)境:https://vuejs.org/js/vue.min.js

3、NPM安裝

? ? ? ?后續(xù)會(huì)有專門的文章介紹webpack和cli的使用。

03

第一個(gè)體驗(yàn)

我們?cè)趯ue引入之后就可以開始我們第一個(gè)Vue程序了，體驗(yàn)一下Vue的響應(yīng)式。

運(yùn)行結(jié)果：

解釋一下：

app變量就是Vue創(chuàng)建的對(duì)象，創(chuàng)建對(duì)象的時(shí)候傳入了一些options：{}

• el：該屬性決定了Vue的這個(gè)對(duì)象掛載在了哪個(gè)元素上。上述代碼中就是將這個(gè)對(duì)象掛載在了id為app的這個(gè)元素上，這個(gè)對(duì)象把

  {{message}}中所包含的所有的DOM都進(jìn)行了實(shí)例化。

• data:該屬性存儲(chǔ)一些數(shù)據(jù)(數(shù)據(jù)可以來自于自己定義的，也可以是服務(wù)器加載的)。

將data中的文本數(shù)據(jù)，插入到HTML的操作，有一個(gè)統(tǒng)一的名字——Mustache語法(雙大括號(hào))。

04

Vue的基礎(chǔ)語法

2.1插值語法

?

插值操作就是將Mustache語法放入到Vue對(duì)象中。Mustache語法雙大括號(hào)里面是以變量的形式出現(xiàn)的，也可以是表達(dá)式的形式，也可以在一個(gè)標(biāo)簽中出現(xiàn)兩個(gè)Mustache，不在大括號(hào)中的內(nèi)容則以原值顯示。

結(jié)果：

上面有說過，Vue是響應(yīng)式的，響應(yīng)式就是隨著data中變量的改變，頁面顯示的值也會(huì)相應(yīng)的隨之改變。如：我們可以在打開開發(fā)者模式，進(jìn)入Console中進(jìn)行修改count的值

修改完之后，頁面的結(jié)果變?yōu)?#xff1a;

為了不希望它改變，我們可以加入一個(gè)Vue的指令v-once。

大家可以自己測(cè)試一下！

某些時(shí)候，我們的數(shù)據(jù)是一段HTML代碼，但是我們想要顯示的是顯示解析HTML代碼之后的內(nèi)容，但是如果我們直接在Mustache語法直接顯示的話，他展示的為這段HTML代碼，我們可以使用v-html指令，這個(gè)指令后面會(huì)跟一個(gè)string類型，然后將string類型的HTML解析出來并且渲染。

結(jié)果：

將數(shù)據(jù)顯示在頁面中，除了Mustache語法外，還有一種是使用v-text指令。該指令一般情況下接收的是一個(gè)string類型的值。

結(jié)果：

接下來我們學(xué)習(xí)下一個(gè)指令v-pre，這個(gè)指令會(huì)跳過這個(gè)元素和子元素的編譯過程，顯示原本的大括號(hào)語法。

2.2綁定屬性

?

前面我們學(xué)習(xí)的插值語法是將數(shù)據(jù)插入到模板的內(nèi)容中，但是除了內(nèi)容需要?jiǎng)討B(tài)的決定以外，某些特有的屬性我們也希望它可以動(dòng)態(tài)的來綁定，比如:a標(biāo)簽中的href屬性。這個(gè)時(shí)候我們就可以使用v-bind指令。

v-bind用于綁定一個(gè)或多個(gè)屬性值，或者向另一個(gè)組件傳遞props值

結(jié)果：

點(diǎn)擊百度就可以跳轉(zhuǎn)到百度的頁面了，大家不妨試一試。

v-bind也可以使用語法糖的形式，也就是它的簡(jiǎn)寫方式

2.3事件監(jiān)聽

?

在我們開發(fā)的過程中，我們通常要和用戶進(jìn)行交互，我們就需要監(jiān)聽用戶的操作，比如：點(diǎn)擊事件，獲取焦點(diǎn)事件，鍵盤事件等等。在Vue中，我們通常使用v-on指令來實(shí)現(xiàn)監(jiān)聽事件的功能。

v-on的語法糖@，所以接下來，我們下面的示例代碼均使用語法糖形式。

注：其中的methods是Vue定義方法的位置，也是Vue對(duì)象的一個(gè)屬性。在調(diào)用其中的方法的時(shí)候，需要注意參數(shù)問題：

如果方法中不需要參數(shù)，則()可以省略不寫。

如果方法需要一個(gè)參數(shù)，調(diào)用方法的時(shí)候沒有寫括號(hào)，那么會(huì)默認(rèn)的將原生事件event參數(shù)傳遞進(jìn)去。

如果方法同時(shí)傳入了多個(gè)參數(shù)，那么原生事件event需要手動(dòng)通過$event傳入。

結(jié)果：

2.4條件判斷

?

條件判斷指令v-if、v-else-if、v-else。

結(jié)果：

實(shí)現(xiàn)一個(gè)小案例：

有兩個(gè)按鈕：點(diǎn)擊按鈕1，顯示一個(gè)input元素；點(diǎn)擊按鈕2，顯示另一個(gè)input元素。

完成之后，我們?cè)趇nput1中輸入值，點(diǎn)擊按鈕2

結(jié)果：

在點(diǎn)擊按鈕切換的時(shí)候，input已經(jīng)發(fā)生了變化，但是里面的值并沒有隨著按鈕的切換而置空，原因是：

Vue在進(jìn)行DOM渲染的時(shí)候，出于對(duì)性能的考慮，會(huì)盡可能的復(fù)用已經(jīng)存在的元素，所以在使用v-if的時(shí)候，要加上key，并且保證key的值不同，這樣就不會(huì)出現(xiàn)復(fù)用的情況。

v-show和v-if的比較：

• 兩者都是可以決定一個(gè)元素的顯隱；

• v-if條件為false 的時(shí)候，不會(huì)有對(duì)應(yīng)的元素在DOM中;v-show的條件為false時(shí)，僅僅是將元素的display屬性置為none；

• 在開發(fā)中，如果顯隱的切換很頻繁，使用v-show；當(dāng)只有一次，則使用v-if。

2.5循環(huán)

?

Vue中使用v-for指令來實(shí)現(xiàn)將一組數(shù)據(jù)的渲染。

結(jié)果：

如果你看了官網(wǎng)中關(guān)于v-for的介紹，就會(huì)發(fā)現(xiàn)，在官網(wǎng)的介紹中，建議在使用v-for時(shí)，加上key屬性，這個(gè)是為什么呢？(有興趣可以去了解一下Diff算法),我這里簡(jiǎn)單的描述一下。

當(dāng)同一層有很多相同的節(jié)點(diǎn)，我們需要在中間添加一個(gè)新的節(jié)點(diǎn)的時(shí)候，比如有1,2,3,4,5五個(gè)順序的節(jié)點(diǎn)，現(xiàn)在要在第2個(gè)節(jié)點(diǎn)之后新加一個(gè)節(jié)點(diǎn)6，那么Diff算法會(huì)將3更新為6,4更新為3,5更新為4，再添加一個(gè)5節(jié)點(diǎn)，這樣我們渲染真實(shí)DOM開銷是非常大的，那么為了解決這個(gè)問題，我們給每個(gè)節(jié)點(diǎn)設(shè)置一個(gè)key來做唯一的表示，這樣子就可以正確的識(shí)別此節(jié)點(diǎn)，那么再添加6節(jié)點(diǎn)的時(shí)候，只需要找到插入的位置，直接插入新的6節(jié)點(diǎn)就好了。

2.6表單雙向綁定

?

Vue中使用`v-model`指令來實(shí)現(xiàn)了表單元素和數(shù)據(jù)的雙向綁定。

結(jié)果：

我們可以很直觀的看到顯示的結(jié)果，當(dāng)我們input中的數(shù)據(jù)發(fā)生變化時(shí)，會(huì)將輸入的內(nèi)容傳遞給message變量，頁面中的message也會(huì)隨之發(fā)生改變，所以，通過v-model我們實(shí)現(xiàn)了雙向綁定。

有人可能會(huì)疑問，v-model的雙向綁定都是怎么實(shí)現(xiàn)的呢？其實(shí)v-model就是一種語法糖的表示形式，它包含了兩個(gè)操作:

將input的value屬性通過v-bind來綁定；

通過v-on給input標(biāo)簽添加了input事件(input事件是當(dāng)input標(biāo)簽中的值發(fā)生變化時(shí)觸發(fā)的事件)

接下來，介紹幾個(gè)有關(guān)v-model的修飾符

• 通常情況下，我們已經(jīng)知道了，給input標(biāo)簽添加v-model指令之后，數(shù)據(jù)發(fā)生改變，那么data中對(duì)應(yīng)的值也會(huì)發(fā)生相應(yīng)的變化。

某些時(shí)候我們不想它們自動(dòng)變化,可以使用lazy修飾符，該修飾符可以在標(biāo)簽失去焦點(diǎn)或者是回車的時(shí)候才會(huì)更新數(shù)據(jù)。

• 通常情況下，我們的輸入框都會(huì)將輸入的內(nèi)容當(dāng)成字符串進(jìn)行處理，但是如果我們希望處理的是數(shù)字類型，我們可以使用number修飾符可以讓輸入框輸入的內(nèi)容自動(dòng)轉(zhuǎn)為數(shù)字類型。

• 如果在我們輸入的內(nèi)容中前后有許多的空格，通常我們希望可以將這些空格去除，那么可以使用trim修飾符來去除左右兩端的空格。

2.7計(jì)算屬性

?

通過前面的學(xué)習(xí)，我們已經(jīng)知道，通過插值的操作可以對(duì)data中的數(shù)據(jù)在頁面進(jìn)行顯示，但是某些時(shí)候，我們需要顯示的內(nèi)容可能是通過data中的數(shù)據(jù)進(jìn)行一系列操作之后再進(jìn)行顯示的，這個(gè)時(shí)候我們就可以使用計(jì)算屬性的方法，計(jì)算屬性是在computed中，它也是Vue對(duì)象中的一個(gè)屬性。

實(shí)現(xiàn)一個(gè)小案例：

計(jì)算小明需要購(gòu)買課本的總價(jià)格

結(jié)果：

學(xué)會(huì)了吧，是不是很簡(jiǎn)單。其實(shí)每個(gè)計(jì)算屬性都有一個(gè)getter和一個(gè)setter方法。

結(jié)果：

我們?cè)賮碛懻撟詈笠粋€(gè)問題，這個(gè)功能我們不僅可以使用計(jì)算屬性的方法實(shí)現(xiàn)，同樣的我們也可以通過定義方法來實(shí)現(xiàn)，那么兩者的區(qū)別在哪里呢？我們?yōu)槭裁匆褂糜?jì)算屬性的方法，而不使用定義方法來實(shí)現(xiàn)呢？

首先，我們?cè)趧偛诺拇a中，我們加上一個(gè)getTotalPrice方法，然后將計(jì)算屬性的值和方法的值在頁面顯示多次

結(jié)果：

我們可以看出，計(jì)算屬性會(huì)進(jìn)行緩存，如果是多次使用計(jì)算屬性的值，只會(huì)調(diào)用一次；而方法在每次調(diào)用的時(shí)候都會(huì)進(jìn)行調(diào)用。

通過這個(gè)小實(shí)驗(yàn)，相信這兩個(gè)用哪一個(gè)你也會(huì)學(xué)會(huì)選擇了！

2.8監(jiān)聽屬性

?

在Vue中，我們可以使用watch來監(jiān)聽屬性的變化。

結(jié)果：

結(jié)果：

如果監(jiān)聽的對(duì)象是一個(gè)對(duì)象類型的話，那么使用普通的監(jiān)聽是沒有效果的，所以有兩種方式監(jiān)聽對(duì)象：

使用深度監(jiān)聽(監(jiān)聽后的結(jié)果值一樣)

使用計(jì)算屬性的方式獲取對(duì)象中需要監(jiān)聽的屬性，進(jìn)行普通監(jiān)聽

總結(jié)

以上是生活随笔為你收集整理的vue点击按钮切换显示不同内容_邂逅Vue的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。