（準(zhǔn)備用vue.js寫畢業(yè)設(shè)計(jì)，記錄下學(xué)習(xí)的東西轨帜，之后可能會用到）
代碼編譯可以使用這個(gè)網(wǎng)站：https://jsfiddle.net
Vue (讀音 /vju?/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用栗涂。Vue 的核心庫只關(guān)注視圖層，不僅易于上手祈争，還便于與第三方庫或既有項(xiàng)目整合斤程。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時(shí)菩混，Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用提供驅(qū)動(dòng)忿墅。
起步
通過如下方式引入vue
<!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者
<!-- 生產(chǎn)環(huán)境版本沮峡，優(yōu)化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
聲明式渲染
（文本插值）
Vue.js 的核心是一個(gè)允許采用簡潔的模板語法來聲明式地將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)：
<div id="app">
{{message}}
</div>
var app=new Vue({
el:'#app',
data:{
message:'hello vue!'
}
})
修改app.message的值即可更新值
（綁定元素特性）
<div id="app-2">
<span v-bind:title="message">
鼠標(biāo)懸停幾秒鐘查看此處動(dòng)態(tài)綁定的提示信息疚脐！
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: 加載'頁面于 ' + new Date().toLocaleString()
}
})
v-bind 特性被稱為指令。指令帶有前綴 v-邢疙，以表示它們是 Vue 提供的特殊特性棍弄。它們會在渲染的 DOM 上應(yīng)用特殊的響應(yīng)式行為。這里疟游，該指令的意思是：“將這個(gè)元素節(jié)點(diǎn)的 title 特性和 Vue 實(shí)例的 message 屬性保持一致”呼畸。
條件循環(huán)
（控制一個(gè)元素是否顯示）
<div id="app-3">
<p v-if="seen">現(xiàn)在你看到我了</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
在控制臺輸入 app3.seen = false，之前顯示的消息消失了颁虐。
不僅可以把數(shù)據(jù)綁定到 DOM 文本或特性蛮原，還可以綁定到 DOM 結(jié)構(gòu)。此外聪廉，Vue 也提供一個(gè)強(qiáng)大的過渡效果系統(tǒng)瞬痘，可以在 Vue 插入/更新/移除元素時(shí)自動(dòng)應(yīng)用[過渡效果]
還有其它很多指令，每個(gè)都有特殊的功能板熊。（eg:v-for）
用戶處理輸入
為了讓用戶和你的應(yīng)用進(jìn)行交互，可以用 v-on 指令添加一個(gè)事件監(jiān)聽器察绷，通過它調(diào)用在 Vue 實(shí)例中定義的方法：
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆轉(zhuǎn)消息</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
Vue 還提供了 v-model 指令干签，它能輕松實(shí)現(xiàn)表單輸入和應(yīng)用狀態(tài)之間的雙向綁定。
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
組件化應(yīng)用構(gòu)建
組件系統(tǒng)是 Vue 的另一個(gè)重要概念拆撼，因?yàn)樗且环N抽象容劳，允許我們使用小型、獨(dú)立和通痴⒍龋可復(fù)用的組件構(gòu)建大型應(yīng)用竭贩。仔細(xì)想想，幾乎任意類型的應(yīng)用界面都可以抽象為一個(gè)組件樹莺禁。
在 Vue 里留量，一個(gè)組件本質(zhì)上是一個(gè)擁有預(yù)定義選項(xiàng)的一個(gè) Vue 實(shí)例。在 Vue 中注冊組件很簡單：
<div id="app-7">
<ol>
<!--
現(xiàn)在我們?yōu)槊總€(gè) todo-item 提供 todo 對象
todo 對象是變量，即其內(nèi)容可以是動(dòng)態(tài)的楼熄。
我們也需要為每個(gè)組件提供一個(gè)“key”忆绰，稍后再
作詳細(xì)解釋。
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</ol>
</div>
使用v-bind指令將待辦項(xiàng)傳到循環(huán)輸出的每個(gè)組件中
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '隨便其它什么人吃的東西' }
]
}
})
我們已經(jīng)設(shè)法將應(yīng)用分割成了兩個(gè)更小的單元可岂。子單元通過 prop 接口與父單元進(jìn)行了良好的解耦错敢。我們現(xiàn)在可以進(jìn)一步改進(jìn) <todo-item> 組件，提供更為復(fù)雜的模板和邏輯缕粹，而不會影響到父單元稚茅。
