Vue 入門指南：從基礎到實踐

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等。

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 等。同時在這個過程中也會調用一些生命週期鉤子，給予用戶機會在一些特定的時刻加入自己的代碼。

五、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>
    {{ 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>

<script
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/P34ax57FLtcltPq0DhlPdw

猜你喜歡