Vue.js是什麼及入門

Vue.js是一套構建用戶界面(view)的MVVM框架。Vue.js的核心庫只關注視圖層,而且很是容易學習,很是容易與其餘庫或已有的項目整合。html

1.1 Vue.js的目的

Vue.js的產生核心是爲了解決以下三個問題:vue

  1. 解決數據綁定的問題;
  2. Vue.js框架生產的主要目的是爲了開發大興單頁面應用(SPA:Single Page Application)

Angular.js中對PC端支持的比較良好,可是對移動端支持就通常。而Vue.js主要支持移動端,也支持PC端。編程

3. 它還支持組件化。也就是能夠將頁面封裝成若干個組件,採用積木式編程 ,這樣是頁面的複用度達到最高(支持組件化)。app

1.2 Vue.js特性

  1. MVVM模式

M: model  業務模型,用處:處理數據,提供數據框架

V: view    用戶界面、用戶視圖組件化

 

業務模型model中的數據發生改變的時候,用戶視圖view也隨之變化。用戶視圖view改變的時候,業務模型model中的數據也能夠發生改變。學習

  1. 組件化
  2. 指令系統
  3. Vue.js 2.0開始支持虛擬DOM(Vue.js 1.0 是操做的真是DOM,而不是虛擬DOM)

虛擬DOM能夠提高頁面的刷新速度。3d

 

第二章 Vue.js入門

使用Vue.js的步驟:代理

第一步:在html頁面中引入vue.jshtm

 

 

 

第二步:Vue.js提供了一個Vue,咱們須要建立一個對象。

new Vue({});

 

 

第三步:在用戶界面view中,經過{{}}形式將data中的數據顯示在頁面中。

在用戶界面中,{{}}代碼中綁定的data的key,而在頁面中顯示的是該key的value。

Vue.js對獲取的data與頁面上顯示的{{}}會產生一種映射關係。

 

 

 

app這個變量會代理vue中data數據。因此咱們訪問data中數據的時候,直接用app.name就能夠了

 

 

 

這樣,若是咱們要實現先後臺交互,只要將從後臺獲得的數據,放在data中,頁面就會自動綁定,這樣就實現了從model->view的數據流向。

相關文章
相關標籤/搜索