Vue 從入門到實踐

一、Vue 簡介

Vue 是一套構建用戶界面的漸進式框架，與 React 和 Angular 不同的是，Vue 借鑒了 Angular 的模板語法和 React 的組件化思想，簡單易學，上手速度快。

Vue 依賴於高效的虛擬 DOM 和響應式數據綁定機制，在代碼可維護性和性能上得到很好的平衡，適合開發中大型的、複雜的應用程序。

二、Vue 的特點

1.數據驅動

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
})

在上述代碼中，將 Vue 實例的 data 屬性設置為一個對象，對象內部的所有屬性都會自動綁定到 Vue 實例的視圖中，視圖會隨着數據的更改而更新。

2.組件化編程

// 定義一個組件
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

// 創建 Vue 實例
var app = new Vue({ 
  el: '#app',
  data: {
    todos: [
      { id: 0, text: '學習 JavaScript' },
      { id: 1, text: '學習 Vue' }
    ]
  }
})

上述代碼中，我們定義了一個名為 todo-item 的組件，該組件接收名為 todo 的屬性，然後在模板中將該屬性插入到 li 標籤中。在 Vue 實例中，我們利用 v-for 遍歷 todos 數組，創建多個 todo-item 實例，同時將每個實例的 todo 屬性綁定到對應的數組元素上。

3.模板語法簡單易懂

<!-- Vue 模板 -->
<div id="app">
  {{ message }}
</div>

// 顯示的效果
Hello, Vue!

4.指令靈活多變

<!-- v-bind 指令 -->
<img v-bind:src="imageSrc">

<!-- 顯示的效果 -->
<img src="http://example.com/image.jpg">

v-bind 指令是 Vue 中一種非常重要的指令，用於實現屬性綁定，綁定的屬性可以是元素標籤上的普通屬性，也可以是自定義屬性。

三、Vue 的基本使用方法

1. 如何引入 Vue

<!-- 引入 Vue.js 文件 -->
<script src="https://unpkg.com/vue"></script>

2. 如何創建 Vue 實例

// 創建一個 Vue 實例
var app = new Vue({
  // 選項
})

在這個 Vue 實例中，我們可以定義 data、methods、computed 等屬性，其中 data 是用於存儲 Vue 實例中的數據。methods 是用於定義方法的屬性。

3. 如何進行數據綁定

<!-- 數據綁定 -->
<div id="app">
  {{ message }}
</div>

// Vue 實例中的 data 數據屬性
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
})

在這個例子中，我們首先利用雙花括號語法將 Vue 實例中的 message 數據屬性綁定到了 div 元素上，然後在 Vue 實例的 data 屬性中定義了 message 屬性的初始值為 ‘Hello, Vue!’。

四、Vue 的生命周期鉤子函數

1. beforeCreate

在 Vue 實例被創建之初，該鉤子函數被調用，但是在實例初始化之前，此時無法訪問到 data、methods 等實例屬性。

2. created

在 Vue 實例被創建之後，created 鉤子函數被調用，此時已經可以訪問到 data、methods 等實例屬性，但是此時還沒有開始編譯模板。

3. beforeMount

在模板編譯之後，但是在掛載之前，該鉤子函數被調用，此時模板還沒有被渲染到頁面上。

4. mounted

在 Vue 實例掛載到頁面上之後，mounted 鉤子函數被調用，此時模板已經被渲染到頁面上，可以進行 DOM 操作。

5. beforeUpdate

在數據更新之前，該鉤子函數被調用。

6. updated

在數據更新之後，該鉤子函數被調用。

7. beforeDestroy

在 Vue 實例銷毀之前，該鉤子函數被調用。

8. destroyed

在 Vue 實例銷毀之後，該鉤子函數被調用。