【Vue.js 入門(mén)到實(shí)戰(zhàn)教程】01-Vue.js 數(shù)據(jù)綁定的基本實(shí)現(xiàn)和代碼分析
來(lái)源 |?https://xueyuanjun.com/post/21912
本系列教程涵蓋 Vue 基礎(chǔ)語(yǔ)法、組件開(kāi)發(fā)、代碼測(cè)試、以及如何基于 Vue + 后端 API 接口構(gòu)建單頁(yè)面應(yīng)用，希望通過(guò)這個(gè)系列的學(xué)習(xí)，可以幫助你快速上手 Vue.js 開(kāi)發(fā)。
從 MVVM 聊起
Vue.js 是一個(gè)簡(jiǎn)單、小巧的漸進(jìn)式 JavaScript 框架，提供了現(xiàn)代 Web 開(kāi)發(fā)中常用的高級(jí)功能：
解耦視圖和數(shù)據(jù)
可復(fù)用的組件
前端路由
狀態(tài)管理
虛擬 DOM
接下來(lái)，學(xué)院君將圍繞這些功能來(lái)給大家介紹 Vue.js 的基本語(yǔ)法和使用。
Vue.js 是一個(gè)典型的 MVVM（Model-View-ViewModel）模型框架，MVVM 由 MVC 演化而來(lái)（相關(guān)細(xì)節(jié)可參考 MVC，MVP 和 MVVM 的圖示）：View 的變動(dòng)，會(huì)自動(dòng)更新到 ViewModel，反之亦然，這種機(jī)制叫做雙向綁定。
這也是 Vue.js 相較于傳統(tǒng) JavaScript DOM 編程的優(yōu)勢(shì)，通過(guò)這種數(shù)據(jù)雙向綁定，我們可以輕松實(shí)現(xiàn)視圖與數(shù)據(jù)的解耦：
接下來(lái)，我們就從數(shù)據(jù)綁定開(kāi)始，探索 Vue.js 框架的使用。
注：本系列教程依然基于 Vue 2.x，使用的代碼編輯器是 IntelliJ IDEA，你可以按照自己的喜好選擇代碼編輯器，比如 WebStorm、PhpStorm、VS Code、Sublime Text 等。IntelliJ IDEA 和 PhpStorm 都集成了 WebStorm 的所有功能，并且 IntelliJ IDEA 還可以通過(guò)插件集成 PhpStorm、GoLand、PyCharm 的所有功能，所以 IntelliJ IDEA 是 JetBrains 全家桶里面的全能王，可以同時(shí)作為 Java、JavaScript、PHP、Go、Python 的代碼編輯器。
數(shù)據(jù)綁定的基本實(shí)現(xiàn)
我們新建一個(gè) vue_learning 項(xiàng)目，在該項(xiàng)目下新建一個(gè) basic 目錄用于存放 Vue 基本語(yǔ)法的演示代碼。
在 basic 目錄下新建一個(gè)名為 hello 的 HTML 5 文件：
傳統(tǒng) DOM 編程
我們先通過(guò)傳統(tǒng) DOM 編程的方式編寫(xiě)一段設(shè)置輸入框文本的代碼如下：
<html lang="en"><head><meta charset="UTF-8"><title>數(shù)據(jù)綁定演示title>head><body><div id="app"><input type="text" id="name" placeholder="你的名字">div><script>let data = {name: "學(xué)院君"}document.querySelector('#name').value = data.name;script>body>html>
點(diǎn)擊右上角的瀏覽器圖標(biāo)預(yù)覽：
?可以看到通過(guò) JavaScript 代碼將模型數(shù)據(jù)寫(xiě)入到了視圖層的 INPUT 輸入框。
如果我們想要修改輸入框中的文本，并且實(shí)現(xiàn)輸入框中的文本數(shù)據(jù)與模型數(shù)據(jù)（data.name）的同步，需要再編寫(xiě)一段異步事件監(jiān)聽(tīng)代碼，非常繁瑣，而如果使用 Vue.js 的數(shù)據(jù)綁定機(jī)制，則可以輕松實(shí)現(xiàn)這種數(shù)據(jù)同步。
引入 Vue.js 框架
下面，我們就引入 Vue.js 來(lái)實(shí)現(xiàn)這種數(shù)據(jù)同步，修改上述代碼實(shí)現(xiàn)如下：
<html lang="en"><head><meta charset="UTF-8"><title>數(shù)據(jù)綁定演示title><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>head><body><div id="app"><input type="text" v-model="name" placeholder="你的名字"><p>你好呀，{{ name }}p>div><script>let data = {name: "學(xué)院君"}new Vue({el: '#app',data: data})script>body>html>
為了驗(yàn)證數(shù)據(jù)是雙向同步的，我們?cè)谳斎肟蛳旅嫣砑右欢未a，用于獲取模型數(shù)據(jù)（data.name）并顯示出來(lái)。
再次點(diǎn)擊代碼編輯區(qū)域右上角的瀏覽器圖片預(yù)覽，可以看到相同的結(jié)果：
我們修改輸入框中的文本，可以看到下面歡迎文本中的用戶名隨之變化：
可以看到，我們不用編寫(xiě)任何額外的事件監(jiān)聽(tīng)和處理代碼，就可以通過(guò) Vue.js 框架自身提供的數(shù)據(jù)綁定機(jī)制輕松實(shí)現(xiàn)視圖層和模型層數(shù)據(jù)的雙向同步。
源碼分析
下面，我們來(lái)簡(jiǎn)單分析下這段代碼。
和其他 JavaScript 框架一樣，要在 HTML 頁(yè)面中使用 Vue.js，首先需要引入對(duì)應(yīng)的框架代碼，這里我們通過(guò)官方提供的 CDN 資源引入最新版的 Vue.js 框架：
接下來(lái)，要使用 Vue.js 進(jìn)行 MVVM 編程，還要選擇特定的 div 容器，并將其轉(zhuǎn)化為 Vue 實(shí)例，這里我們選擇的是 div#app 這個(gè)元素，然后通過(guò)外部定義的 data 變量作為模型數(shù)據(jù)對(duì)這個(gè) Vue 實(shí)例進(jìn)行初始化：
new Vue({el: '#app',data: data})
你也可以直接在 Vue 對(duì)象實(shí)例上定義這個(gè)模型數(shù)據(jù)：
new Vue({el: '#app',data: {name: "學(xué)院君"}})
這樣一來(lái)，我們就可以在 Vue 實(shí)例對(duì)應(yīng)的視圖組件中綁定模型數(shù)據(jù)進(jìn)行渲染了：
<div id="app"><input type="text" v-model="name" placeholder="你的名字"><p>你好呀，{{ name }}p>div>
在這段視圖代碼中，我們?cè)?input 輸入框上使用 v-model 屬性聲明數(shù)據(jù)綁定，屬性值對(duì)應(yīng)特定的模型數(shù)據(jù)名（data. 前綴省略），這樣一來(lái)，我們對(duì)模型數(shù)據(jù)的修改就可以同步到輸入框，同時(shí)在輸入框中的修改也可以同步到模型數(shù)據(jù)，從而實(shí)現(xiàn)了雙線綁定。
如果不是通過(guò)屬性進(jìn)行綁定，就像下面這段代碼：
<p>你好呀，{{ name }}p>需要通過(guò)?{{}}?對(duì)模型數(shù)據(jù)進(jìn)行包裹，該定界符可以解析 Vue 實(shí)例中的模型數(shù)據(jù)（同樣不能包含 data. 前綴）。
需要注意的是，只有被轉(zhuǎn)化為 Vue 實(shí)例的 HTML 容器中才能進(jìn)行模型數(shù)據(jù)的綁定，如我們?cè)噲D在該容器之外進(jìn)行這種綁定，則不會(huì)生效：
<div id="app"><input type="text" v-model="name" placeholder="你的名字"><p>你好呀，{{ name }}p>div><input type="text" v-model="name" placeholder="你的名字"><p>你好呀，{{ name }}p>
本文完~
