Vue.js 是一個(gè)輕量級(jí)的 MVVM（Model-View-ViewModel）框架。它用于構(gòu)建交互性高、簡(jiǎn)單易用的 Web 應(yīng)用程序。下面介紹 Vue.js 的基本使用。
1.引入 Vue.js 首先，在 HTML 文件中引入 Vue.js 庫(kù)。
2.創(chuàng)建 Vue 實(shí)例 創(chuàng)建一個(gè) Vue 實(shí)例，讓 Vue 來(lái)管理數(shù)據(jù)和 UI：
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})可以看到，我們把 Vue 實(shí)例綁定到了一個(gè) HTML 元素上，這里使用的是 id 為 app 的元素。data 中的 message 屬性，是我們要在頁(yè)面上顯示的數(shù)據(jù)。
3.使用插值表達(dá)式 插值表達(dá)式用于在頁(yè)面上顯示 Vue 實(shí)例的屬性：
{{ message }}4.綁定屬性 我們可以綁定 HTML 元素的屬性到 Vue 實(shí)例的屬性。Vue.js 使用 v-bind 指令進(jìn)行綁定：
上面的代碼中，我們把 className 屬性綁定到了 div 元素的 class 屬性上。如果 className 的值改變，div 元素的 class 屬性也會(huì)隨之改變。
5.處理用戶輸入 Vue.js 也可以處理用戶的輸入。v-on 指令可以用來(lái)綁定事件處理函數(shù)。下面的代碼給一個(gè) button 元素綁定 click 事件：
Vue 實(shí)例需要聲明對(duì)應(yīng)的方法：
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
handler: function() {
// 處理事件
}
}
})6.條件渲染 Vue.js 可以根據(jù)數(shù)據(jù)的不同來(lái)顯示不同的頁(yè)面內(nèi)容。v-if 指令可以用來(lái)根據(jù)條件生成或刪除元素：
Conditional content7.循環(huán)渲染 Vue.js 還可以通過(guò) v-for 指令來(lái)循環(huán)渲染數(shù)據(jù)。下面的例子將渲染一個(gè)列表：
- {{ item }}
8.計(jì)算屬性 Vue.js 還可以為實(shí)例定義計(jì)算屬性，它們是一些屬性，但是它們的值是基于其他屬性計(jì)算得到的：
var app = new Vue({
el: '#app',
data: {
firstName: 'John',
lastName: 'Doe'
},
computed: {
fullName: function() {
return this.firstName + ' ' + this.lastName
}
}
})我們創(chuàng)建了一個(gè) fullName 計(jì)算屬性。這個(gè)計(jì)算屬性依賴于 firstName 和 lastName 2 個(gè)屬性。如果這 2 個(gè)屬性的值發(fā)生變化，fullName 的值也會(huì)改變。
上一篇vue異步處理組件