前  言

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊、虛擬空間、營銷軟件、網(wǎng)站建設(shè)、西安網(wǎng)站維護(hù)、網(wǎng)站推廣。

最近用Vue.js做了一個(gè)數(shù)據(jù)查詢平臺(tái)，還做了一個(gè)拼圖游戲，突然深深的感到了vue的強(qiáng)大。

Vue.js是一套構(gòu)建用戶界面(user interface)的漸進(jìn)式框架。與其他重量級框架不同的是，Vue 從根本上采用最小成本、漸進(jìn)增量(incrementally adoptable)的設(shè)計(jì)。Vue 的核心庫只專注于視圖層，并且很容易與其他第三方庫或現(xiàn)有項(xiàng)目集成。另一方面，當(dāng)與單文件組件和 Vue 生態(tài)系統(tǒng)支持的庫結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用程序提供有力驅(qū)動(dòng)。

Vue.js目前已經(jīng)更新到2.x，功能和語法上有一定升級和修改，本文首先介紹基礎(chǔ)內(nèi)容。

1、新手指南

vue的使用非常簡單，下載vue.js或vue.min.js直接導(dǎo)入即可使用。

  2、vue初步入門

2.1聲明式渲染

Vue.js 的核心是，可以采用簡潔的模板語法來聲明式的將數(shù)據(jù)渲染為 DOM：

 {{ message }}

var app = new Vue({
 el: '#app',
 data: {
 message: 'Hello Vue!'
 }
})

這樣就會(huì)輸入：Hello Vue！

我們已經(jīng)生成了第一個(gè) Vue 應(yīng)用程序！這看起來和渲染一個(gè)字符串模板非常類似，但是 Vue 在背后做了大量工作?，F(xiàn)在數(shù)據(jù)和 DOM 已經(jīng)被關(guān)聯(lián)在一起，所有的數(shù)據(jù)和 DOM 都是響應(yīng)式的。我們?nèi)绾螌@一切清晰領(lǐng)會(huì)？只需打開你的瀏覽器的 JavaScript 控制臺(tái)（現(xiàn)在，就在當(dāng)前頁面打開），然后設(shè)置 app.message 的值，你將看到上面的示例所渲染的 DOM 元素會(huì)相應(yīng)地更新。

除了文本插值(text interpolation)，我們還可以采用這樣的方式綁定 DOM 元素屬性：

 
 鼠標(biāo)懸停此處幾秒，
 可以看到此處動(dòng)態(tài)綁定的 title！
 

var app2 = new Vue({
 el: '#app-2',
 data: {
 message: '頁面加載于 ' + new Date().toLocaleString()  }
})

鼠標(biāo)懸停幾秒后，就可以看到動(dòng)態(tài)的提示。

這里我們遇到一些新內(nèi)容。你看到的 v-bind 屬性被稱為指令。指令帶有前綴 v-，表示是由 Vue 提供的專用屬性。可能你已經(jīng)猜到了，它們會(huì)在渲染的 DOM 上產(chǎn)生專門的響應(yīng)式行為。簡而言之，這里該指令的作用就是：“將此元素的title 屬性與 Vue 實(shí)例的 message 屬性保持關(guān)聯(lián)更新”。

如果你再次打開瀏覽器的 JavaScript 控制臺(tái)，并輸入 app2.message = '一些新的 message'，就會(huì)再次看到，綁定了title 屬性的 HTML 已經(jīng)進(jìn)行了更新。

2.1條件與循環(huán)

控制切換一個(gè)元素的顯示也相當(dāng)簡單：

 
現(xiàn)在你可以看到我

var app3 = new Vue({
 el: '#app-3',
 data: {
 seen: true
 }
})

繼續(xù)在控制臺(tái)輸入 app3.seen = false，你應(yīng)該會(huì)看到 span 消失。

這個(gè)示例表明，我們不只是可以將數(shù)據(jù)綁定到文本和屬性，也可以將數(shù)據(jù)綁定到 DOM 結(jié)構(gòu)。而且，Vue 也提供一個(gè)強(qiáng)大的過渡效果系統(tǒng)，可以在 Vue 插入/更新/刪除元素時(shí)，自動(dòng)使用過渡效果。

還有其它一些指令，每個(gè)都具有各自不同的特殊功能。例如，v-for 指令，可以使用數(shù)組中的數(shù)據(jù)來展示一個(gè)項(xiàng)目列表：

 

 

  {{ todo.text }}
 
 

var app4 = new Vue({
 el: '#app-4',
 data: {
 todos: [
  { text: '學(xué)習(xí) JavaScript' },
  { text: '學(xué)習(xí) Vue' },
  { text: '創(chuàng)建激動(dòng)人心的代碼' }
 ]
 }
})

3 、vue實(shí)例

每個(gè) Vue 應(yīng)用程序都是通過 Vue 函數(shù)創(chuàng)建出一個(gè)新的 Vue 實(shí)例開始的：

var vm = new Vue({
 // 選項(xiàng)
})

盡管沒有完全遵循 MVVM 模式，但是 Vue 的設(shè)計(jì)仍然受到了它的啟發(fā)。作為約定，通常我們使用變量 vm (ViewModel 的簡稱) 來表示 Vue 實(shí)例。

3.1data 和 methods

在創(chuàng)建 Vue 實(shí)例時(shí)，會(huì)將所有在 data 對象中找到的屬性，都添加到 Vue 的響應(yīng)式系統(tǒng)中。每當(dāng)這些屬性的值發(fā)生變化時(shí)，視圖都會(huì)“及時(shí)響應(yīng)”，并更新相應(yīng)的新值。

// data 對象
var data = { a: 1 }
// 此對象將會(huì)添加到 Vue 實(shí)例上
var vm = new Vue({
 data: data
})
// 這里引用了同一個(gè)對象！
vm.a === data.a // => true
// 設(shè)置實(shí)例上的屬性，
// 也會(huì)影響原始數(shù)據(jù)
vm.a = 2
data.a // => 2
// ... 反之亦然
data.a = 3
vm.a // => 3

每當(dāng) data 對象發(fā)生變化，都會(huì)觸發(fā)視圖重新渲染。值得注意的是，如果實(shí)例已經(jīng)創(chuàng)建，那么只有那些 data 中的原本就已經(jīng)存在的屬性，才是響應(yīng)式的。也就是說，如果在實(shí)例創(chuàng)建之后，添加一個(gè)新的屬性，例如：

vm.b = 'hi'

然后，修改 b 不會(huì)觸發(fā)任何視圖更新。如果你已經(jīng)提前知道，之后將會(huì)用到一個(gè)開始是空的或不存在的屬性，你就需要預(yù)先設(shè)置一些初始值。例如：

data: {
 newTodoText: '',
 visitCount: 0,
 hideCompletedTodos: false,
 todos: [],
 error: null
}

除了 data 屬性， Vue 實(shí)例還暴露了一些有用的實(shí)例屬性和方法。這些屬性與方法都具有前綴 $，以便與用戶定義(user-defined)的屬性有所區(qū)分。例如：

var data = { a: 1 }
var vm = new Vue({
 el: '#example',
 data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
// $watch 是一個(gè)實(shí)例方法
vm.$watch('a', function (newValue, oldValue) {
 // 此回調(diào)函數(shù)將在 `vm.a` 改變后調(diào)用
})

3.2vue實(shí)例的聲明周期

vue實(shí)例的聲明周期是一個(gè)很重要的概念，理解之后可以通過它實(shí)現(xiàn)很多功能。

看下這段代碼。

 
  
  
 
 
  
我的聲明周期，大家看吧！
 
 
 
 

看一下效果圖

通過控制臺(tái)的打印效果可以看出來，實(shí)例化 vue 對象大致分為 創(chuàng)建vue實(shí)例、掛載到dom、數(shù)據(jù)變化更新、vue實(shí)例銷毀 4個(gè)階段，，注意每個(gè)階段都有對應(yīng)的鉤子，我們可以通過對這些鉤子進(jìn)行操作，達(dá)成一些功能。雖然初學(xué)者用不太上，但是提前了解一下還是好的，到時(shí)候碰到實(shí)際功能要能想得到生命周期的鉤子。

總結(jié)

以上所述是小編個(gè)大家介紹的詳解 vue.js用法和特性，希望對大家有所幫助！