【vue大師晉級之路第一集：Vue基礎】第1章——介紹
背景
Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。
宣告式渲染
案例
- index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> {{ message }} </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src='index.js'></script> </body> </html>
- index.js
// 宣告式渲染
var app = new Vue({
el:'#app',
data: {
message: 'hello vue!'
}
});
app.message = 'haha'
案例
<div id="app-2"> <span v-bind:title="message"> 滑鼠懸停幾秒鐘檢視此處動態繫結的提示資訊！ </span> </div> 略…… var app2 = new Vue({ el: '#app-2', data: { message: '頁面加載於 ' + new Date().toLocaleString() } })
v-bind 特性被稱為指令。指令帶有字首 v-，以表示它們是 Vue 提供的特殊特性。可能你已經猜到了，它們會在渲染的 DOM
上應用特殊的響應式行為。在這裡，該指令的意思是：“將這個元素節點的 title 特性和 Vue 例項的 message 屬性保持一致”。
如果你再次開啟瀏覽器的 JavaScript 控制檯，輸入 app2.message = ‘新訊息’，就會再一次看到這個綁定了 title
特性的 HTML 已經進行了更新。
條件與迴圈
<div id="app-3"> <p v-if="seen">現在你看到我了</p> </div> var app3 = new Vue({ el: '#app-3', data: { seen: true } })
例子演示了我們不僅可以把資料繫結到 DOM 文字或特性，還可以繫結到 DOM 結構。此外，Vue 也提供一個強大的過渡效果系統，可以在 Vue 插入/更新/移除元素時自動應用過渡效果。
<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: '學習 JavaScript' },
{ text: '學習 Vue' },
{ text: '整個牛專案' }
]
}
})
在控制檯裡，輸入 app4.todos.push({ text: ‘新專案’ })，你會發現列表最後添加了一個新專案。
處理使用者輸入
為了讓使用者和你的應用進行互動，我們可以用 v-on 指令新增一個事件監聽器，通過它呼叫在 Vue 例項中定義的方法：
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆轉訊息</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 指令，它能輕鬆實現表單輸入和應用狀態之間的雙向繫結。
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
元件化應用構建
元件系統是 Vue 的另一個重要概念，因為它是一種抽象，允許我們使用小型、獨立和通常可複用的元件構建大型應用。仔細想想，幾乎任意型別的應用介面都可以抽象為一個元件樹
在 Vue 裡，一個元件本質上是一個擁有預定義選項的一個 Vue 例項。在 Vue 中註冊元件很簡單：
// 定義名為 todo-item 的新元件
Vue.component('todo-item', {
template: '<li>這是個待辦項</li>'
})
構建另一個元件模板：
<ol>
<!-- 建立一個 todo-item 元件的例項 -->
<todo-item></todo-item>
</ol>
但是這樣會為每個待辦項渲染同樣的文字，這看起來並不炫酷。我們應該能從父作用域將資料傳到子元件才對。讓我們來修改一下元件的定義，使之能夠接受一個 prop：
Vue.component('todo-item', {
// todo-item 元件現在接受一個
// "prop"，類似於一個自定義特性。
// 這個 prop 名為 todo。
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
我們可以使用 v-bind 指令將待辦項傳到迴圈輸出的每個元件中：
<div id="app-7">
<ol>
<!--
現在我們為每個 todo-item 提供 todo 物件
todo 物件是變數，即其內容可以是動態的。
我們也需要為每個元件提供一個“key”，稍後再
作詳細解釋。
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</ol>
</div>
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: '隨便其它什麼人吃的東西' }
]
}
})
應用分割成了兩個更小的單元。子單元通過 prop 介面與父單元進行了良好的解耦。
大型應用中，有必要將整個應用程式劃分為元件，以使開發更易管理
<div id="app">
<app-nav></app-nav>
<app-view>
<app-sidebar></app-sidebar>
<app-content></app-content>
</app-view>
</div>
Vue 元件非常類似於自定義元素——它是 Web 元件規範的一部分，這是因為 Vue 的元件語法部分參考了該規範。例如 Vue 元件實現了 Slot API 與 is 特性。