vue框架的入門

vue是一套構建使用者介面的漸進式框架，其核心庫只關注檢視層，通過使用vue手腳架，它完全能夠為複雜的單頁應用程式提供驅動。為了便於初學者入門vue語法，介紹語法部分均通過引用vue.js檔案的方式來引入vue，在實際專案開發中，建議盡量使用vue手腳架開發和npm來維護。

什麼叫漸進式框架？漸進式框架可以理解為能支援任何其他前端框架及類庫的一種框架。這就意味著vue框架沒有任何結構上的主張，比如angularjs前端框架對元素的控制必須用控制器controller。從另乙個角度來說，vue可以相容現在乃至未來任何的前端使用者介面技術，這就是vue的強大之處。


data: 
});

上例中new vue()表示建立乙個例項，el表示該例項繫結的元素id，data表示資料內容，資料格式為物件型別。在元素標籤中用兩個大掛弧}表示的是資料輸出（這種寫法源於react的jsx表示式），上例中}將輸出為文字hello world。

另外vue常用的幾個指令有：v-bind繫結，v-if條件，v-for迴圈，v-on監聽，v-model雙向繫結，vue.component()建立元件，這些指令在本篇中大家不必深究，在這裡為了讓大家對vue指令有乙個基本的認知，demo如下


data: 
});data: 
});data: 
});settimeout(function() , 2000);
data: 
});改變文字
data: ,
methods: 
}});
data: 
});

var vue = new vue(,
methods: {},
filters: {},
computed: {},
components: {},
watch: {}
});

建議要熟悉vue語法及vue例項結構，因為這些將有助於你快速建立vue例項。

el繫結指定id的元素標籤並掛載在該dom節點

data

定義了作用域在該vue例項的變數

methods

執行的方法函式

filters

通過vue例項的filters屬性建立過濾器，建立的過濾器是乙個函式,在值運算中用豎槓 | 表示

computed

通過vue例項的computed屬性建立計算器，建立的計算器是乙個函式,計算器會依賴於繫結的data而更新，如本例num更新，addone也會更新。與過濾器和methods功能類似，不同的是若計算器依賴的數值不變，則不會重新執行函式，效能較優。

components

元件watch

監察資料的變化。

其它值運算語法：

加減運算： }

三元表示式：}

自函式執行 }

指令字串拼接

不同指令的不同入參區分

指令v-if、v-show，入參為 true|false

指令v-for，入參為 item in items

帶v-bind指令如v-bind:href，可縮寫為:href

帶v-on指令如v-on:click，可縮寫為@click

乙個完整vue結構的應用demo如下:

切換動態元件

[watch]：

}