前 言
最近用Vue.js做了一個(gè)數(shù)據(jù)查詢平臺(tái)，還做了一個(gè)拼圖游戲，突然深深的感到了vue的強(qiáng)大。
Vue.js是一套構(gòu)建用戶界面(user interface)的漸進(jìn)式框架。與其他重量級(jí)框架不同的是，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，功能和語法上有一定升級(jí)和修改，本文首先介紹基礎(chǔ)內(nèi)容。
1、新手指南
vue的使用非常簡(jiǎn)單，下載vue.js或vue.min.js直接導(dǎo)入即可使用。
2、vue初步入門
2.1聲明式渲染
Vue.js 的核心是，可以采用簡(jiǎn)潔的模板語法來聲明式的將數(shù)據(jù)渲染為 DOM：
<div id="app"> {{ message }}</div>var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }})這樣就會(huì)輸入：Hello Vue！
我們已經(jīng)生成了第一個(gè) Vue 應(yīng)用程序！這看起來和渲染一個(gè)字符串模板非常類似，但是 Vue 在背后做了大量工作。現(xiàn)在數(shù)據(jù)和 DOM 已經(jīng)被關(guān)聯(lián)在一起，所有的數(shù)據(jù)和 DOM 都是響應(yīng)式的。我們?nèi)绾螌?duì)這一切清晰領(lǐng)會(huì)？只需打開你的瀏覽器的 JavaScript 控制臺(tái)（現(xiàn)在，就在當(dāng)前頁面打開），然后設(shè)置 app.message 的值，你將看到上面的示例所渲染的 DOM 元素會(huì)相應(yīng)地更新。
除了文本插值(text interpolation)，我們還可以采用這樣的方式綁定 DOM 元素屬性：
<div id="app-2"> <span v-bind:title="message"> 鼠標(biāo)懸停此處幾秒， 可以看到此處動(dòng)態(tài)綁定的 title！ </span></div>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)式行為。簡(jiǎn)而言之，這里該指令的作用就是：“將此元素的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)簡(jiǎn)單：
<div id="app-3"> <p v-if="seen">現(xiàn)在你可以看到我</p></div>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)目列表：
<div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol></div>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 的簡(jiǎn)稱) 來表示 Vue 實(shí)例。
3.1data 和 methods
在創(chuàng)建 Vue 實(shí)例時(shí)，會(huì)將所有在 data 對(duì)象中找到的屬性，都添加到 Vue 的響應(yīng)式系統(tǒng)中。每當(dāng)這些屬性的值發(fā)生變化時(shí)，視圖都會(huì)“及時(shí)響應(yīng)”，并更新相應(yīng)的新值。
// data 對(duì)象var data = { a: 1 }// 此對(duì)象將會(huì)添加到 Vue 實(shí)例上var vm = new Vue({ data: data})// 這里引用了同一個(gè)對(duì)象！vm.a === data.a // => true// 設(shè)置實(shí)例上的屬性，// 也會(huì)影響原始數(shù)據(jù)vm.a = 2data.a // => 2// ... 反之亦然data.a = 3vm.a // => 3每當(dāng) data 對(duì)象發(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 // => truevm.$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)很多功能。
看下這段代碼。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="container">我的聲明周期，大家看吧！</div> </body> <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> //以下代碼時(shí)顯示vm整個(gè)生命周期的流程 var vm = new Vue({ el: "#container", data: { test : 'hello world' }, beforeCreate: function(){ console.log(this); showData('創(chuàng)建vue實(shí)例前',this); }, created: function(){ showData('創(chuàng)建vue實(shí)例后',this); }, beforeMount:function(){ showData('掛載到dom前',this); }, mounted: function(){ showData('掛載到dom后',this); }, beforeUpdate:function(){ showData('數(shù)據(jù)變化更新前',this); }, updated:function(){ showData('數(shù)據(jù)變化更新后',this); }, beforeDestroy:function(){ vm.test ="3333"; showData('vue實(shí)例銷毀前',this); }, destroyed:function(){ showData('vue實(shí)例銷毀后',this); } }); function realDom(){ console.log('真實(shí)dom結(jié)構(gòu)：' + document.getElementById('container').innerHTML); } function showData(process,obj){ console.log(process); console.log('data 數(shù)據(jù)：' + obj.test) console.log('掛載的對(duì)象：') console.log(obj.$el) realDom(); console.log('------------------') console.log('------------------') } </script></html>看一下效果圖
通過控制臺(tái)的打印效果可以看出來，實(shí)例化 vue 對(duì)象大致分為 創(chuàng)建vue實(shí)例、掛載到dom、數(shù)據(jù)變化更新、vue實(shí)例銷毀 4個(gè)階段，，注意每個(gè)階段都有對(duì)應(yīng)的鉤子，我們可以通過對(duì)這些鉤子進(jìn)行操作，達(dá)成一些功能。雖然初學(xué)者用不太上，但是提前了解一下還是好的，到時(shí)候碰到實(shí)際功能要能想得到生命周期的鉤子。
總結(jié)
以上所述是小編個(gè)大家介紹的詳解 vue.js用法和特性，希望對(duì)大家有所幫助！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
