Vue.js是一個流行的JavaScript框架，用于構建用戶界面和單頁應用程序。它以簡潔、易用和高效而著稱，使得開發者能夠快速上手并開發出功能豐富的Web應用。本文將帶你走進Vue的世界，從基礎知識到實踐應用，一步步引導你掌握Vue的核心概念和開發技巧。
一、Vue簡介
Vue.js（通常簡稱為Vue）是一個用于構建用戶界面的漸進式JavaScript框架。與其他重量級框架（如Angular、React）不同，Vue被設計為可以自底向上逐層應用。Vue的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。
二、Vue基礎
1. 聲明式渲染
Vue.js的核心是一個允許采用簡潔的模板語法來聲明式地將數據渲染進DOM的系統：
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
這段代碼創建了一個Vue實例，并將其掛載到匹配選擇器#app的第一個元素上。當這些數據對象上的數據改變時，視圖會進行重渲染。
2. 組件系統
組件是Vue應用中的基本單位，用于構建用戶界面。每個Vue組件都包含預定義選項的一個對象，其中大多數選項是函數，用于定義組件的行為：
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
你可以通過簡單的方式在父組件中使用這個組件：
<ol>
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
</ol>
3. 指令
Vue.js提供了一系列指令，用于將數據綁定到DOM上。最常用的指令包括v-bind、v-model、v-for等。
v-bind：動態地綁定一個或多個特性，或一個組件 prop 到表達式。v-model：在表單輸入和應用狀態之間創建雙向數據綁定。
4. Vue實例
每個Vue應用都是通過構造函數Vue創建一個新的Vue實例開始的：
var vm = new Vue({
// 選項
})
在實例化時存在一系列選項，包含數據、模板、掛載元素、方法、生命周期鉤子等。
三、Vue進階
1. 計算屬性和偵聽器
計算屬性用于聲明式地描述一個數據依賴于其他數據。Vue會自動追蹤依賴數據的變化，并且僅在相關依賴發生變化時才重新計算。
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
}
偵聽器允許你執行代碼響應于數據的變化。當需要在數據變化時執行異步或開銷較大的操作時，偵聽器非常有用。
watch: {
message(newVal, oldVal) {
console.log(`Message changed from ${oldVal} to ${newVal}`);
}
}
2. 條件渲染和列表渲染
Vue提供了v-if、v-else-if、v-else等指令用于條件渲染，以及v-for指令用于列表渲染。
<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>
<ul>
<li v-for="item in items">{{ item.text }}</li>
</ul>
3. 事件處理
Vue允許你使用v-on指令監聽DOM事件，并在觸發時執行一些JavaScript代碼。
<button v-on:click="counter += 1">Add 1</button>
4. 表單輸入綁定
使用v-model指令可以實現表單輸入和應用狀態之間的雙向綁定。
<input v-model="message">
四、Vue實例生命周期
每個Vue實例在被創建時都要經過一系列的初始化過程——例如，需要設置數據監聽、編譯模板、將實例掛載到DOM并在數據變化時更新DOM等。同時在這個過程中也會調用一些生命周期鉤子，給予用戶機會在一些特定的時刻加入自己的代碼。
beforeCreate：在實例初始化之后，數據觀測（data observer）和event/watcher事件配置之前被調用。created：在實例創建完成后被立即調用。在這一步，實例已完成數據觀測、屬性和方法的運算、watch/event事件回調。然而，掛載階段還沒開始，$el屬性目前尚不可用。beforeMount：在掛載開始之前被調用：相關的render函數首次被調用。該鉤子在服務器端渲染期間不被調用。mounted：el被新創建的vm.el也在文檔內。beforeUpdate：數據更新時調用，發生在虛擬DOM打補丁之前。這里適合在更新之前訪問現有的DOM，比如手動移除已添加的事件監聽器。updated：由于數據更改導致的虛擬DOM重新渲染和打補丁，在這之后會調用該鉤子。當這個鉤子被調用時，組件DOM已經更新，所以你現在可以執行依賴于DOM的操作。beforeDestroy：實例銷毀之前調用。在這一步，實例仍然完全可用。destroyed：Vue實例銷毀后調用。調用后，Vue實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。
五、Vue路由與狀態管理
1. Vue Router
Vue Router是Vue.js官方的路由管理器。它和Vue.js核心深度集成，讓構建單頁面應用變得易如反掌。
const router = new VueRouter({
routes: [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
})
const app = new Vue({
router
}).$mount('#app')
2. Vuex
Vuex是一個專為Vue.js應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
六、Vue實踐
1. 創建Vue項目
使用Vue CLI可以快速搭建Vue開發環境。首先，你需要安裝Node.js和npm。然后，通過npm安裝Vue CLI：
npm install -g @vue/cli
創建一個新的Vue項目：
vue create my-project
進入項目目錄，啟動開發服務器：
cd my-project
npm run serve
2. 組件化開發
在Vue中，推薦將UI拆分為獨立的、可復用的組件。每個組件都應該包含獨立的邏輯和樣式。
<template>
<div class="todo-item">
{{ todo.text }}
</div>
</template>
<script>
export default {
props: ['todo']
}
</script>
<style scoped>
.todo-item {
font-size: 24px;
color: #42b983;
}
</style>
3. 父子組件通信
在Vue中，父子組件之間的通信是非常常見的。父組件可以通過props向子組件傳遞數據，子組件可以通過$emit觸發事件來向父組件發送消息。
<!-- 父組件 -->
<template>
<div>
<child-component :message="parentMsg" @childEvent="handleChildEvent"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
parentMsg: 'Hello from parent'
}
},
methods: {
handleChildEvent(msg) {
console.log(msg);
}
}
}
</script>
<!-- 子組件 -->
<template>
<div>
{{ message }}
<button @click="sendMsgToParent">Send Message to Parent</button>
</div>
</template>
400 186 1886
