很多從事前端的老鐵們應(yīng)該都知道vue.js,身為蘇州網(wǎng)站建設(shè)資深程序員卻很少接觸到這么火的前端框架,說起來真是有點(diǎn)慚愧,本著學(xué)習(xí)的態(tài)度,今天蘇州網(wǎng)站制作小編帶大家一起來認(rèn)識(shí)一下vue.js。那么什么是vue.js?
了解vue.js之前,先理清這樣一個(gè)概念。什么是MVVM?MVVM就是Model-View-ViewModel。Vue.js是一套構(gòu)建用戶界面(view)的MVVM框架。Vue.js的核心只關(guān)注視圖層,并且非常容易學(xué)習(xí),非常容易與其它庫(kù)或已有的項(xiàng)目整合。你只需要具備基本的HTML/JavaScript/CSS基礎(chǔ),就可以快速上手,讓你用上這些現(xiàn)代Web開發(fā)中的先進(jìn)技術(shù)來提高你的生產(chǎn)力。
Vue.Js的產(chǎn)生核心是為了解決:
a: 解決數(shù)據(jù)綁定的問題,
b: vue框架產(chǎn)生的主要目的是為了開發(fā)大型單頁(yè)面應(yīng)用,
c: 它還支持組件化,也就是可以將頁(yè)面封裝成若干個(gè)組件,采用積木式進(jìn)行編程,這樣使頁(yè)面復(fù)用性達(dá)到最高(支持組件化)。
創(chuàng)建一個(gè)Vue.js的Hello World示例相當(dāng)簡(jiǎn)單:
1、引入vue.js庫(kù)
這將暴露出一個(gè)全局類——Vue,你可以用它來創(chuàng)建一個(gè)Vue實(shí)例。
2、創(chuàng)建Vue實(shí)例
Vue是一個(gè)封裝了響應(yīng)式開發(fā)、模板編譯等諸多特性的基礎(chǔ)類,你通過提供一些配置項(xiàng),來創(chuàng)建一個(gè)實(shí)例:
var vm = new Vue({...});
一個(gè)常見的配置項(xiàng)是template,以類似HTML的語法來編制視圖的結(jié)構(gòu):
var vm = new Vue({ template: '
Hello,Vue.js 2'})
3、渲染Vue實(shí)例
要將Vue實(shí)例渲染到HTML頁(yè)面中,采用Vue實(shí)例的$mount()方法,這個(gè)方法的名稱,意味著渲染實(shí)際上是將Vue實(shí)例生成的(虛擬)DOM子樹,掛接到頁(yè)面DOM中。容易理解,$mount()方法需要指定一個(gè)定位用的DOM節(jié)點(diǎn)———錨點(diǎn):
vm.$mount(anchor_element);
Vue.js會(huì)將渲染出的DOM子樹,插入錨點(diǎn)元素之前(并最終刪除這個(gè)錨點(diǎn)元素)??梢允褂肅SS選擇符或者指定一個(gè)HTMLElement來聲明錨點(diǎn)。例如,下面的示例將Vue實(shí)例掛接到id為app的DOM對(duì)象處:
vm.$mount('#app');
使用隱式渲染在前面的示例中,我們使用Vue實(shí)例的$mount()方法來顯式地啟動(dòng)Vue實(shí)例的渲染。實(shí)際上,Vue.js也提供了一個(gè)實(shí)例化時(shí)的配置項(xiàng)el,來允許我們隱式地啟動(dòng)Vue實(shí)例的渲染。el用來聲明目標(biāo)渲染錨點(diǎn),例如:
Vue({ template: '
Hello,Vue.js 2!', el: '#app'})
工作原理
如果Vue.js檢測(cè)到你指定了el配置項(xiàng),將在內(nèi)部自動(dòng)地執(zhí)行渲染 —— 這時(shí)你不再需要額外調(diào)用$mount()方法了:
我們看到的大部分Vue.js示例代碼,通常都會(huì)采用這種隱式渲染的寫法。不過我認(rèn)為在開始學(xué)習(xí)時(shí),使用儀式感更強(qiáng)的$mount()方法,會(huì)讓你更多一點(diǎn)理解Vue.js的設(shè)計(jì)思想。使用Vue的過程就是定義MVVM各個(gè)組成部分的過程的過程。 定義View、 定義Model、創(chuàng)建一個(gè)Vue實(shí)例或"ViewModel",它用于連接View和Model。