Vue簡(jiǎn)介
Vue是什么艰管？
Vue (發(fā)音 /vju:/, 類似于view) 是構(gòu)建用戶界面的先進(jìn)框架圆裕。它不像其他全能的框架，Vue是從頭開始逐漸設(shè)計(jì)起來的得运。核心庫(kù)只專注于視圖層姑蓝，它非常容易上手并且可以與其他庫(kù)或現(xiàn)有的項(xiàng)目進(jìn)行整合鹅心。在另一方面，當(dāng)與相關(guān)工具和支持庫(kù)結(jié)合使用時(shí)纺荧，Vue也能完美的驅(qū)動(dòng)復(fù)雜的單頁(yè)面應(yīng)用旭愧。
如果你是一名有經(jīng)驗(yàn)的前端工程師并且想知道Vue和其他庫(kù)/框架的區(qū)別，查看 Comparison with Other Frameworks
入門
嘗試Vue.js的最簡(jiǎn)單的方法用 JSFiddle Hello World example 宙暇。隨意在另一個(gè)選項(xiàng)卡里打開它输枯，接下來我們通過一些基礎(chǔ)案例。如果你喜歡從一個(gè)包管理器下載/安裝占贫，查看 安裝 頁(yè)面桃熄。
聲明式渲染
Vue.js的核心系統(tǒng)使我們能用聲明的方式使簡(jiǎn)單的模塊語(yǔ)法渲染數(shù)據(jù)到DOM中
HTML:
<div id="app">
{{message}}
</div>
JS:
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue'
}
})
運(yùn)行結(jié)果：
Hello Vue
我們已經(jīng)構(gòu)建了第一個(gè)Vue應(yīng)用！看起來非常像僅渲染了一個(gè)字符串模塊型奥，但是Vue在底層做了很多事瞳收。DOM會(huì)自動(dòng)響應(yīng)數(shù)據(jù)的變化，我們?cè)趺粗老嵝冢看蜷_你瀏覽器javascript控制臺(tái)并設(shè)置 app.message 不同的值螟深。在上述相關(guān)的更新中，你應(yīng)該會(huì)看到渲染過例子烫葬。
除了文本插值界弧，我們也能綁定元素屬性，比如這樣：
HTML
<div id="app-2">
<span v-bind:id="id"><span>
</div>
JS
var app2 = new Vue({
el: '#app2',
data: {
id: 'inspect-me'
}
})
運(yùn)行結(jié)果
inspect me
在這里我們遇到新的東西厘灼。你看到的 v-bind 屬性是一個(gè)指令夹纫。指令前綴用 v- 表示它們是由Vue提供的特殊屬性，正如你可能猜想到的设凹，它們應(yīng)用特殊反應(yīng)行為渲染DOM舰讹。這基本來說：“在Vue實(shí)例中，綁定元素 id 變量到 id 屬性”闪朱。
用瀏覽器開發(fā)工具查看元素月匣，你會(huì)看到id的值是 inspect-me 。是的奋姿，如果在控制臺(tái)里修改 app2.id ,它也會(huì)被更新锄开。
<div id="app-2">
<span id="inspect-me">Inspect me</span>
</div>
條件和循環(huán)
切換元素的顯示/隱藏非常簡(jiǎn)單，如下：
HTML:
<div id="app-3">
<p v-if="seen">Now you see me</p>
</div>
JS:
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
運(yùn)行結(jié)果：
Now you see me
在控制臺(tái)繼續(xù)輸入app3.seen = false . 你會(huì)看到此信息被隱藏称诗。
這個(gè)案例演示,我們不僅可以綁定數(shù)據(jù)到文本和屬性萍悴，也可以到DOM結(jié)構(gòu)里。除此之外，Vue也提供一些強(qiáng)有力的過度效果系統(tǒng)癣诱，當(dāng)元素通過Vue被插入/更新/被移除時(shí)计维，這個(gè)系統(tǒng)能自動(dòng)運(yùn)用過渡效果。
還有不少其他指令撕予，每個(gè)指令都有它自己獨(dú)特的功能鲫惶。比如，v-for 指令通過一組數(shù)組实抡，能被用于顯示數(shù)據(jù)項(xiàng)的列表欠母。
HTML：
<div>
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
JS:
var app4 = new Vue({
el: '#app-4',
todos:[
{ text: 'Learn Javascript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
})
運(yùn)行結(jié)果：
1. Learn Javascript
2. Learn Vue
3. Build Something awesome
在控制臺(tái)里輸入 app4.todos.push({ text: 'New item' }) 。你會(huì)看到一個(gè)新的選項(xiàng)添加到這個(gè)列表中了吆寨。
處理用戶輸入
為了讓用戶與應(yīng)用互動(dòng)赏淌，在我們Vue實(shí)例中，我們用 v-on 指令附加事件監(jiān)聽器來調(diào)用方法鸟废。
HTML：
<div id="app-5">
<p>{{message}}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
JS：
var app5 = new Vue({
el: '#app-5',
data: {
message:'Hello Vue.js!'
},
methods: {
reverseMessage: function(){
this.message = this.message.split('').reverse().join('')
}
}
})
運(yùn)行結(jié)果：
Hello Vue.js
點(diǎn)擊按鈕后結(jié)果
!sj.euV olleH
注意：在方法里猜敢，我們沒有碰DOM,我們僅更新了應(yīng)用程序的狀態(tài)。所有的DOM操作是通過Vue處理的盒延，并且你寫的代碼是專注于底層邏輯缩擂。
Vue也提供 v-model 指令使表單輸入和應(yīng)用程序狀態(tài)之間輕易的實(shí)現(xiàn)雙向綁定。
HTML:
<div id="app-6">
<p>{{message}}</p>
<input v-model="message">
</div>
JS:
var app6 = new Vue({
el:'#app-6',
data:{
message: 'Hello Vue!'
}
})
運(yùn)行結(jié)果：
Hello Vue!
如果你改變輸入框里的值添寺，顯示的文本也會(huì)跟著變動(dòng)胯盯。
使用組件組成
在Vue里，組件系統(tǒng)是另外一個(gè)重要的概念计露，因?yàn)樗鞘刮覀兡軌蚪⑿⌒偷牟┠裕?dú)立的，而且可重用的組件組成的大型應(yīng)用程序的抽象票罐。如果我們仔細(xì)想想叉趣，幾乎任何類型的應(yīng)用程序接口能被抽象成一棵組件樹：
在Vue里，一個(gè)組件實(shí)質(zhì)上是一個(gè)預(yù)先定義過的選項(xiàng)的Vue實(shí)例该押。注冊(cè)組件是非常容易的疗杉。
JS:
// 定義一個(gè)組件為todo-item
Vue.component('todo-item', {
template: '<li>This is a todo</li>'
})
現(xiàn)在你可以用其他組件的模板來組合它。
HTML:
<ul>
<!--
創(chuàng)建一個(gè)todo-item組件實(shí)例輸出數(shù)據(jù)中的dotos數(shù)組
-->
<todo-item v-for="todo in todos"></todo-item>
</ul>
但是這為每個(gè)todo渲染相同的文本蚕礼，這個(gè)不是我們要的效果烟具。我們應(yīng)該能夠從父作用域傳遞數(shù)據(jù)到子組件里。讓我們修改組件定義奠蹬，讓其接受一個(gè) prop :
Vue.component('todo-item', {
/* todo-item組件接受一個(gè)“prop”,
它像一個(gè)自定義屬性朝聋。這個(gè)屬性叫todo
*/
props:['todo'],
template:'<li>{{ todo.text }}</li>'
})
現(xiàn)在我們用 v-bind 傳遞todo數(shù)據(jù)到每個(gè)重復(fù)組件里。
HTML:
<div id="app7">
<ol>
<todo-item v-for="todo in todos" v-bind:todo="todo">
</ol>
</div>
JS:
var app7 = new Vue({
el: '#app-7',
data: {
todos: [
'Learn JavaScript',
'Learn Vue',
'Build something awesome'
]
}
})
運(yùn)行結(jié)果：
1. Learn Javascript
2. Learn Vue
3. Build Something awesome