很(hěn)多(duō)從(cóng)事(shì)前端的(de)老(lǎo)鐵(tiě)們應該都(dōu)知(zhī)道(dào)vue.js,身(®shēn)為(wèi)蘇州網站(zhàn)建設資深程序員(yuán)卻很(hěn)少(shǎo)接觸到(dào)這(z​hè)麽火(huǒ)的(de)前端框架，說(shuō)起來(lái)真是(shì)有(yǒu)點慚愧，本著(zhe)學習(xí)的(de)态度，今天蘇州網站(zhàn)制(zhì)作(zuò)小ε(xiǎo)編帶大(dà)家(jiā)一(yī)起來(lái)認識一(yī)下(xià)vue.js。那(nà)麽什(shén)麽是(shì)vue.js？
了(le)解vue.js之前，先理(lǐ)清這(zhè)樣一(yī)個(gè)概念。什(shén)麽是(shì)MVVM？MVVM就(jiù)是(shì)Model-View-V≥iewModel。Vue.js是(shì)一(yī)套構建用(yòng)戶界面（view）的(de)MVVM框架。Vue.js的(de)核心隻關注視(shì)圖層，并且非常容易學→習(xí)，非常容易與其它庫或已有(yǒu)的(de)項目整合。你(nǐ)隻需要(yào)具備基本的(de)HTML/JavaεScript/CSS基礎，就(jiù)可(kě)以快(kuài)速上(shàng)手，讓你(nǐ)用(yòng)上(shàng)這(zhè)些(xiē)現(xiàn)代Web開(kāi)發中∞的(de)先進技(jì)術(shù)來(lái)提高(gāo)你(nǐ)的(de)生(shēng)産力。

Vue.Js的(de)産生(shēng)核心是(shì)為(wèi)了(le)解決：

a: 解決數(shù)據綁定的(de)問(wèn)題，
b: vue框架産生(shēng)的(de)主要(yào)目的(de)是(shì)為(wèi)了(le)開(©kāi)發大(dà)型單頁面應用(yòng)，
c: 它還(hái)支持組件(jiàn)化(huà)，也(yě)就(jiù)是(shì)可(kě)以将頁面封裝成若幹個(gè)組件(jiàn)，采用₽(yòng)積木(mù)式進行(xíng)編程，這(zhè)樣使頁面複用(yòng)性達到(dào)最高(gāo)（支持♣組件(jiàn)化(huà)）。

創建一(yī)個(gè)Vue.js的(de)Hello World示例相(xiàng)當簡單：

1、引入vue.js庫
這(zhè)将暴露出一(yī)個(gè)全局類——Vue，你(nǐ)可(kě)以用(yòng)它來(lái¥)創建一(yī)個(gè)Vue實例。
2、創建Vue實例
Vue是(shì)一(yī)個(gè)封裝了(le)響應式開(kāi)發、模闆編譯等諸多(duō)特性的(de)基礎類，你(nǐ) 通(tōng)過提供一(yī)些(xiē)配置項，來(lái)創建一(yī)個(gè)實例：
var vm = new Vue({...});
一(yī)個(gè)常見(jiàn)的(de)配置項是(shì)template，以類似HTML的(de)語法來(lái)編制(zhì)視(shì)圖的(de)結構：
var vm = new Vue({ template: 'Hello,Vue.js 2'})
3、渲染Vue實例
要(yào)将Vue實例渲染到(dào)HTML頁面中，采用(yòng)Vue實例的(de)$mount≤()方法，這(zhè)個(gè)方法的(de)名稱，意味著(zhe)渲染實際上(shàng)是(shì)将Vue實例生(shēng)成的(de)（虛拟）DOM子(zǐ)樹(shù)，挂接到(dào€)頁面DOM中。容易理(lǐ)解，$mount()方法需要(yào)指定一(yī)個(gè)定位用(yòng)的(de)DOM節點———錨點：
vm.$mount(anchor_element);
Vue.js會(huì)将渲染出的(de)DOM子(zǐ)樹(shù)，插入錨點元素之前（并最終删除這(zhè)個(gè)錨點元素） 。可(kě)以使用(yòng)CSS選擇符或者指定一(yī)個(gè)HTMLElement來(lái)±聲明(míng)錨點。例如(rú)，下(xià)面的(de)示例将Vue實例挂接到(dào)id為(wèi)app的(de)D↔OM對(duì)象處：
vm.$mount('#app');
使用(yòng)隐式渲染在前面的(de)示例中，我們使用(yòng)Vue實例的(de)$mount()方法來(αlái)顯式地(dì)啓動Vue實例的(de)渲染。實際上(shàng)，Vue.js也(yě)提供了(le)一(yī)個(gè)實例化(huà)時(shí)的(de)配置項el，來(lái)允許‌我們隐式地(dì)啓動Vue實例的(de)渲染。el用(yòng)來(lái)聲明(míng)目标渲染錨點，例如(rú)：
Vue({ template: 'Hello,Vue.js 2!', el: '#app'})

工(gōng)作(zuò)原理(lǐ)

如(rú)果Vue.js檢測到(dào)你(nǐ)指定了(le)el配置項，将在內(nèi)部自(zì)動地(dì)執行(xíng)渲染 —— 這(zhè)時(shí)≤你(nǐ)不(bù)再需要(yào)額外(wài)調用(yòng)$mount()方法了(le)：
我們看(kàn)到(dào)的(de)大(dà)部分(fēn)Vue.js示例代碼，通(tōng)常都(dōu)會(huì)采用(yòng)這(zhè)種隐式×渲染的(de)寫法。不(bù)過我認為(wèi)在開(kāi)始學習(xí)時(shí)，使用(yòng)儀式感更強的(d∏e)$mount()方法，會(huì)讓你(nǐ)更多(duō)一(yī)點理(lǐ)解Vue.js的(de)設計(jì)思想。使用(yòng)Vue的(de)過程就(jiù)是(shì)定 義MVVM各個(gè)組成部分(fēn)的(de)過程的(de)過程。 定義View、 定義Mode"l、創建一(yī)個(gè)Vue實例或"ViewModel"，它用(yòng)于連接View和(hé)Model。