vue.js初入門(二初步認識)

你會在頁面上看到Hello Vue!文本。具體的實現原理回在後面的文章詳細介紹。

我們還可以採用v-bind的方式綁定 DOM 元素屬性(省略了和上一步相同的代碼):

這裡的v-bind屬性被稱為指令。指令帶有前綴 v-,以表示它們是 Vue.js 提供的特殊屬性。v-bind將title屬性和data中的message綁定在一起,每次刷新頁面都會動態的改變title屬性的值。

條件與循環

有其他相關語言的編程經驗的人來說,在頁面中使用模板語言來做條件與循環再熟悉不過了,比如java的JSP、FreeMarker。PHP的Smarty,前端模板swig、Jade等等。感覺Vue中很類似。(個人觀點)

Vue中的if條件:

Vue中的v-for循環:

處理用戶輸入

v-on 指令綁定一個監聽事件用於調用我們 Vue實例中定義的方法:

這段代碼實現了每點擊一次按鈕index都累加1。

Vue 也提供了 v-model指令,它使得在表單輸入和應用狀態中做雙向數據綁定變得非常輕巧

手動改變input的值會是P標籤的值也隨之改變。

第一行的代碼其實只是第二行的語法糖。這樣理解model可能更能接受一些。

用組件構建(應用)

組件系統是 Vue 另一個重要概念,因為它提供了一種抽象,讓我們可以用獨立可複用的小組件來構建大型應用。如果我們考慮到這點,幾乎任意類型的應用的界面都可以抽象為一個組件樹。

舉個栗子:

我們在後面再詳細介紹它。