你會在頁面上看到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 另一個重要概念,因為它提供了一種抽象,讓我們可以用獨立可複用的小組件來構建大型應用。如果我們考慮到這點,幾乎任意類型的應用的界面都可以抽象為一個組件樹。
舉個栗子:
我們在後面再詳細介紹它。