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