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

Vue.Js的(de)産生核心是(shì)爲(wéi / wèi)了(le／liǎo)解決：

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

創建一(yī / yì ／yí)個(gè)Vue.js的(de)Hello World示例相當簡單：

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

工作原理

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