前言

上一篇文章 Vue學(xué)習(xí)——【第一彈】 中我們學(xué)習(xí)了Vue的相關(guān)特點(diǎn)及語法，這篇文章接著通過瀏覽器中的Vue開發(fā)者工具擴(kuò)展來進(jìn)一步了解Vue的相關(guān)工作機(jī)制。

Vue的擴(kuò)展

我們打開Vue的官方文檔，點(diǎn)擊導(dǎo)航欄中的生態(tài)系統(tǒng)，點(diǎn)擊Devtools

接著我們就進(jìn)入了github中，點(diǎn)擊右欄的鏈接：

之后跳轉(zhuǎn)到一個(gè)新的頁面，點(diǎn)擊install now：

然后就能看到多種瀏覽器分別對(duì)應(yīng)的Vue擴(kuò)展，根據(jù)自己的需要做出選擇：

國內(nèi)的伙伴可能無法打開谷歌瀏覽器的擴(kuò)展，需要在谷歌瀏覽器安裝Vue擴(kuò)展的伙伴可以自取：

點(diǎn)擊鏈接
提取碼：vart

我們只需要打開谷歌瀏覽器的設(shè)置中的擴(kuò)展程序，然后打開右上角的開發(fā)者模式，將文件夾中的 .crx 拖拽過去即可。

Vue的數(shù)據(jù)綁定

這里介紹下 v-bind（單向數(shù)據(jù)綁定） 和 v-model（雙向數(shù)據(jù)綁定）

v-bind

v-bind是Vue中的指令之一，用于將數(shù)據(jù)綁定到元素屬性上。

v-bind的主要作用是動(dòng)態(tài)地設(shè)置HTML元素的屬性，并與Vue實(shí)例的數(shù)據(jù)綁定起來。通過v-bind指令，我們可以將Vue實(shí)例中的數(shù)據(jù)動(dòng)態(tài)地綁定到HTML元素的屬性上。這樣，當(dāng)Vue實(shí)例中的數(shù)據(jù)發(fā)生變化時(shí)，對(duì)應(yīng)的HTML元素屬性也會(huì)自動(dòng)更新。

<div id="demo1"><!-- 這是第一種寫法 -->這是單向數(shù)據(jù)綁定 v-bind <input type="text" v-bind:value="name"><br /><!-- 這是簡(jiǎn)寫寫法 -->這是單向數(shù)據(jù)綁定 v-bind的簡(jiǎn)寫 <input type="text" :value="index.name"></div><script type="text/javascript" src="../JS/vue.js"></script><script type="text/javascript">new Vue({el: '#demo1',data: {name: 'hello Vue',index: {name: '你好 Vue'}}})</script>

但是為什么說v-bind是單向數(shù)據(jù)綁定呢？我們通過瀏覽器上的Vue擴(kuò)展來看一下。
運(yùn)行我們寫好的html文件，然后在瀏覽器頁面上右擊檢查，然后點(diǎn)擊vue：

嘗試一下修改data中的name或者是index中的name的值

我們看一下對(duì)應(yīng)的數(shù)據(jù)是否發(fā)生改變：

我們看到當(dāng)Vue實(shí)例中的數(shù)據(jù)發(fā)生變化時(shí)，對(duì)應(yīng)的HTML元素屬性也會(huì)自動(dòng)更新。
如果是我們更改文本框中的內(nèi)容，Vue實(shí)例中對(duì)應(yīng)的數(shù)據(jù)也會(huì)自動(dòng)發(fā)生變化嗎？

從這兩個(gè)例子呈現(xiàn)的結(jié)果我們也可以看出 ：使用單向綁定時(shí)，數(shù)據(jù)只能從data流向頁面，但是無法從頁面流向data（只有data–>DOM，沒有DOM–>data）

在上一篇文章中還介紹了Vue中的插值語法,其實(shí)插值語法也屬于單向綁定，它可以將數(shù)據(jù)從組件的JavaScript實(shí)例綁定到視圖中，但不能將視圖中的值綁定回JavaScript實(shí)例。

同樣是舉例說明：

修改之前
修改之后：

關(guān)于插值語法為什么是單向數(shù)據(jù)綁定，其實(shí)也很容易理解：因?yàn)檫@樣就可以保證組件的數(shù)據(jù)狀態(tài)只能在組件內(nèi)部被修改，避免了數(shù)據(jù)污染和不可預(yù)測(cè)性的問題。而如果需要實(shí)現(xiàn)雙向數(shù)據(jù)綁定，可以使用v-model指令。

v-model

v-model是Vue中的雙向數(shù)據(jù)綁定指令，Vue中的雙向數(shù)據(jù)綁定是指在View層（即用戶界面）中輸入的數(shù)據(jù)可以自動(dòng)同步到Model層中的數(shù)據(jù)，同時(shí)Model層中數(shù)據(jù)的變化也可以自動(dòng)同步到View層中。這種實(shí)時(shí)的數(shù)據(jù)同步，讓Vue的開發(fā)變得更加簡(jiǎn)單和高效。

舉例：

<div id="demo2">這是雙向數(shù)據(jù)綁定  v-model <input type="text" v-model:value="name"><br/>這是雙向數(shù)據(jù)綁定v-model的簡(jiǎn)寫 <input type="text" v-model="index.name"></div><script type="text/javascript" src="../JS/vue.js"></script><script type="text/javascript">new Vue({el:'#demo2',data:{name:'這是個(gè)文本框',index:{name:'這也是個(gè)文本框'}}})</script>

效果：

修改data中的數(shù)據(jù)：

修改DOM中文本框的內(nèi)容：

通過這兩個(gè)例子我們應(yīng)該很直觀的看到了v-model的雙向數(shù)據(jù)綁定：
既可以實(shí)現(xiàn)從data流向DOM，也可以從DOM流向data（data——>DOM DOM——>data）

但是當(dāng)我們使用v-model進(jìn)行雙向數(shù)據(jù)綁定時(shí)，需要注意：

v-model只可應(yīng)用于表單元素（即具有value值得元素）中，否則會(huì)報(bào)錯(cuò)

小結(jié)

通過上述案例，我們看到雙向數(shù)據(jù)綁定似乎更高效一些，那么為什么單向數(shù)據(jù)綁定還在使用呢？
Vue中的雙向數(shù)據(jù)綁定固然更加高效，因?yàn)樗軌蛲瑫r(shí)更新組件和數(shù)據(jù)模型中的數(shù)據(jù)。然而，在一些特定情況下，單向數(shù)據(jù)綁定也有它的優(yōu)勢(shì)：

首先，單向數(shù)據(jù)綁定在某些場(chǎng)景下會(huì)更易于理解和維護(hù)。
其次，單向數(shù)據(jù)綁定可以在性能和內(nèi)存方面更高效。
最后，單向數(shù)據(jù)綁定更加適合與其他框架或庫進(jìn)行集成。

因此，選擇使用單向還是雙向數(shù)據(jù)綁定取決于特定的應(yīng)用場(chǎng)景和要解決的問題。在某些情況下，使用單向數(shù)據(jù)綁定反而會(huì)更加有效。

最后

以上就是本篇文章介紹的內(nèi)容了，后續(xù)還會(huì)有學(xué)習(xí)分享，經(jīng)驗(yàn)總結(jié)。
初學(xué)乍道，如有不足，歡迎指正！

參考文獻(xiàn)

Vue官方文檔
Vue技能樹
B站視頻講解