Vue.js 是一套構(gòu)建用戶界面的漸進式框架。采用自底向上增量開發(fā)的設(shè)計踊淳。Vue的核心庫只關(guān)注視圖層，不僅易上手脱茉，還便于與第三方庫或既有項目整合垄开。另一方面，當與單文件組件和Vue生態(tài)系統(tǒng)支持的庫結(jié)合使用時榜田，Vue也完全能夠為復(fù)雜的單頁應(yīng)用程序提供驅(qū)動锻梳。
聲明式渲染：
Vue.js的核心是一個允許采用簡潔的模板語法來聲明式的將數(shù)據(jù)渲染進 DOM 的系統(tǒng)：
<script src="https://unpkg.com/vue"></script>
---------------------------------------------------------------------------------
<div id="app">
? {{message}}
</div>
-------------------------------------------------------------------------------------
<script>
? var app = new Vue({
? ? el: '#app',
? ? data: {
? ? ? message:"Hello Vue.js!"
? ? }
? })
</script>
數(shù)據(jù)和 DOM 已經(jīng)綁定在一起，所有的元素都是響應(yīng)式辩块。
除文本插入，還有另一種方式綁定 DOM 元素屬性：
<div id="app-2">
? <span v-bind:title="message">鼠標懸停幾秒鐘查看此處動態(tài)綁定的提示信息国章！</span>
</div>
<script>
? var app2 = new Vue ({
? ? el: '#app-2',
? ? data: {
? ? ? message: '頁面加載于' + new Date().toLocaleString()
? ? }
? })
</script>
v-bind 屬性被稱為指令豆村。指令帶有前綴 v-，表示它們是 Vue 提供的特殊屬性抵碟。這里該指令的作用是：將這個元素節(jié)點的 title 屬性和 Vue 實例的 message 屬性保持一致坏匪。
條件與循環(huán)：
控制切換一個元素：
<div id="app-3">
? <p v-if:"seen">現(xiàn)在你看到了我</p>
<div>
<script>
? var app3 = new Vue ({
? ? el: '#app-3',
? ? data: {
? ? ? seen:true
? }
})
</script>
在控制臺設(shè)置 app3.seen = false ,"現(xiàn)在你看到了我"會消失：
Vue不僅可以綁定DOM文本到數(shù)據(jù)适滓，也可以綁定DOM結(jié)構(gòu)到數(shù)據(jù)。Vue也提供一個強大過度效果系統(tǒng)凭迹，可以在Vue插入/更新/刪除元素時自動應(yīng)用過渡效果。
還有其他很多指令脾猛，每個都有特殊的功能鱼鸠。如：v-for 指令可以綁定數(shù)組的數(shù)據(jù)來渲染一個項目列表：
<div id="app-4">
? <ol>
? ? <li v-for="todo in todos">
? ? ? {{todo.text}}
? ? </li>
? </ol>
</div>
<script>
? var app4 = new Vue ({
? ? el: '#app-4',
? ? data: {
? ? ? todos: [
? ? ? ? { text: '學習 JavaScript' },
? ? ? ? { text: '學習 Vue' },
? ? ? ? { text: '整個牛項目' }
? ? ? ]
? ? }
? })
</script>
在控制臺輸入app4.todos.push({text: 'CSS'})蚀狰，會在列表中添加一個新項。
處理用戶輸入：
用 v-on 指令綁定一個事件監(jiān)聽器跛溉，通過它調(diào)用我們 Vue實例中定義的方法：
<div id="app-5">
? <p>{{message}}</p>
? <button v-on:click="reverseMessage">逆轉(zhuǎn)消息</button>
</div>
<script>
? var app5 = new Vue({
? ? el: '#app-5',
? ? data: {
? ? ? message: 'Hell Vue.js扮授！'
? ? },
? ? methods: {
? ? ? reverseMessage: function () {
? ? ? ? this.message = this.message.split('').reverse().join('')
? ? ? }
? ? }
? })
</script>
逆轉(zhuǎn)前：
逆轉(zhuǎn)后：
在 reverseMessage 方法中挂签，更新了應(yīng)用的狀態(tài)碴卧，但沒有碰觸 DOM抖格，所有的 DOM 操作都有 Vue 來操作，所編寫的代碼不需要關(guān)注底層邏輯雹拄。
Vue 還提供了 v-model 指令，它能輕松實現(xiàn)表單輸入和應(yīng)用狀態(tài)之間的雙向綁定：
<div id="app-6">
? <p>{{message}}</p>
? <input v-model="message">
</div>
<script>
var app6 = new Vue ({
el: '#app-6',
data: {
message: 'Hello !!!'
}
})
</script>
組件化應(yīng)用構(gòu)建
組件系統(tǒng)是 Vue 的另一個重要概念坪哄，因為他是一種抽象势篡，允許我們使用小型，獨立和通衬罴溃可復(fù)用的組件構(gòu)建大型應(yīng)用碍侦。幾乎任意類型的應(yīng)用界面都可以抽象為一個組件樹。? 在 Vue 里站玄，一個組件本質(zhì)上是一個擁有預(yù)定義選項的一個 Vue 實例濒旦。
<div id="app-7">
? <ol>
? ? <todo-item
? ? ? v-for="item in groceryList"
? ? ? v-bind:todo="item"
? ? ? v-bind:key="item.id">
? ? </todo-item>
? </ol>
</div>
<script>
? Vue.component('todo-item', {
? ? props: ['todo'],
? ? template: '<li>{{ todo.text }}</li>'
? })
? vue app7 = new Vue({
? ? el: '#app-7',
? ? data: {
? ? ? groceryList: [
? ? ? ? { id: 0, text: '蔬菜' },
? ? ? ? { id: 1, text: '水果' },
? ? ? ? { id: 2, text: '其他人吃的東西' }
? ? ? ]
? ? }
? })
</script>
我們已經(jīng)設(shè)法將應(yīng)用分割成了兩個更小的單元，子單元通過 props 接口實現(xiàn)了與父單元很好的解耦×榔剩現(xiàn)在可以進一步為我們的 todo-item 組件實現(xiàn)更復(fù)雜的模板和邏輯的改進铃拇，而不影響到父單元沈撞。
