回顧

• 【vue教程】一. 環境搭建與代碼規范配置

在上一篇文章中，我們介紹了 Vue.js 的起源、設計理念、核心特性 已經項目規范化配置 。我們學習了如何搭建 Vue 開發環境，并熟悉了一些常用的 Vue 開發工具和插件

本章涵蓋知識點

• Vue 實例和選項
• 模板語法：插值、指令、過濾器
• 數據綁定和響應式原理
• 事件處理和表單輸入、v-model 原理
• 組件基礎

---

正文開始 ， 如果覺得文章對您有幫助，請幫我三連+訂閱，謝謝

Vue 實例和選項

每個 Vue 應用都是從創建一個新的 Vue 實例開始的。Vue 實例是一個包含選項的對象，這些選項包括數據、方法、生命周期鉤子等。

創建 Vue 實例

var vm = new Vue({el: "#app", // 指定Vue應該綁定到的DOM元素data: {message: "Hello Vue!", // 響應式數據},methods: {sayHello: function () {alert(this.message);},},
});

在這個實例中，el屬性指定了 Vue 將接管哪個 DOM 元素，data屬性包含了 Vue 實例的數據對象，methods屬性包含了 Vue 實例可以調用的方法。

Vue 實例的選項

Vue 實例有多種選項，以下是一些常用的選項：

• data: 組件的數據對象。
• methods: 定義組件的方法。
• computed: 定義計算屬性。
• watch: 定義偵聽器。
• props: 子組件的外部數據。
• el: 指定 Vue 應該綁定到的 DOM 元素。

Vue 模板語法

Vue 的模板語法讓我們能夠聲明式地將數據渲染進 DOM。

插值表達式

插值表達式允許我們把數據插到模板中。

<span>Message: {{ message }}</span>

當message數據變化時，頁面上對應的文本也會更新。

指令

指令是 Vue 模板中的特殊標記，帶有前綴v-，用于告訴 Vue 框架需要對 DOM 元素進行一些特殊的處理。

v-bind

用于動態地綁定一個或多個屬性，或一個組件 prop。

<img :src="imageUrl" :alt="imageDescription" />

v-model

在表單輸入和應用狀態之間創建雙向數據綁定。

<input v-model="username" placeholder="Enter your name" />

v-on

監聽 DOM 事件。

<button @click="sayHello">Say Hello</button>

自定義指令

Vue 允許我們通過自定義指令向元素添加自己的功能。自定義指令 可以鉤入到 Vue 的編譯過程中，允許我們對元素進行低層次操作。

創建自定義指令

// 注冊一個全局自定義指令 `v-focus`
Vue.directive("focus", {// 當被綁定的元素插入到DOM時……inserted: function (el) {// 聚焦元素el.focus();},
});

在模板中使用自定義指令

<input v-focus />

自定義指令的鉤子函數

自定義指令有以下幾個鉤子：

• bind: 只調用一次，指令第一次綁定到元素時調用。
• inserted: 被綁定元素插入父組件時調用。
• update: 所在組件的 VNode 更新時調用。
• componentUpdated: 父組件更新，該鉤子被調用。
• unbind: 只調用一次，指令與元素解綁時調用。

自定義指令的實例演示

假設我們需要一個指令來控制元素的尺寸，根據數據屬性調整大小：

Vue.directive("resize", {bind(el, binding) {el.style.width = binding.value.width + "px";el.style.height = binding.value.height + "px";},update(el, binding) {if (binding.oldValue !== binding.value) {el.style.width = binding.value.width + "px";el.style.height = binding.value.height + "px";}},
});

在模板中使用：

<div v-resize="resizeObj"></div>

其中resizeObj是 Vue 實例的數據對象，包含width和height屬性。

指令注冊

指令不僅可以全局注冊，還可以局部注冊到單個 Vue 實例。

局部注冊指令

new Vue({directives: {focus: {// 指令定義inserted: function (el) {el.focus();},},},
});

在實例的模板中使用：

<input v-focus />

過濾器

過濾器用于在插值表達式中轉換輸出文本。

<p>{{ message | capitalize }}</p>

filters: {capitalize: function (value) {if (!value) return '';value = value.toString();return value.charAt(0).toUpperCase() + value.slice(1);}
}

數據綁定和響應式原理

Vue 的數據綁定是通過響應式系統實現的，該系統確保數據變化時視圖能自動更新。

響應式數據綁定示例

data: {firstName: 'John',lastName: 'Doe'
}

在模板中：

<p>{{ firstName }} {{ lastName }}</p>

當firstName或lastName變化時，視圖會自動更新。

響應式原理解析

Vue 使用Object.defineProperty來劫持數據對象的屬性，當屬性值變化時，視圖會自動更新。

v-model 的自定義實現

v-model在 Vue 中通常用于創建數據雙向綁定，它主要是語法糖，背后是:value和@input的結合。在組件中，我們可以自定義v-model的行為。

自定義v-model

在組件中，我們可以通過model選項來自定義v-model：

Vue.component("child-component", {model: {prop: "customValue", // 指定prop的名稱event: "change", // 指定事件的名稱},props: ["customValue"],methods: {updateValue: function (event) {this.$emit("change", event.target.value); // 觸發事件，并傳入新值},},template: `<input type="text" :value="customValue" @input="updateValue">`,
});

使用自定義v-model的組件：

<child-component v-model="parentValue"></child-component>

在這個示例中，parentValue是父組件中的數據，通過v-model與child-component組件綁定。組件內部，我們監聽input事件，并在事件發生時，通過$emit觸發一個change事件，并傳遞新的值。

擴展知識點

• 修飾符：v-model可以與修飾符一起使用，如.lazy、.number和.trim，以控制輸入的更新時機和行為。
• 不同類型的輸入處理：對于radio、checkbox和select等不同類型的表單元素，Vue 提供了不同的處理方式來確保v-model的雙向綁定能正常工作。

事件處理和表單輸入

Vue 允許我們在模板中直接監聽 DOM 事件，并在 Vue 實例的方法中處理這些事件。

事件處理示例

methods: {sayHello: function () {alert('Hello ' + this.username);}
}

在模板中：

<button @click="sayHello">Say Hello</button>

表單輸入綁定

<input v-model="username" placeholder="Enter your name" />

當用戶在輸入框中輸入時，username的值將自動更新，并且如果username在數據對象中變化，輸入框的內容也會同步更新。

深入數據綁定

Vue 的數據綁定不僅限于簡單的文本展示和表單輸入，它還包括更復雜的場景。

對象和數組的更新

Vue 可以響應式地更新對象和數組，但需要注意使用Vue.set來保持響應性。

更新對象屬性

// 對于新屬性
Vue.set(vm.someObject, "newProperty", 123);

更新數組

// 添加元素
vm.someArray.push(123);
// 刪除元素
vm.someArray.splice(index, 1);

修飾符

Vue 提供了事件處理的修飾符，如.stop、.prevent、.capture等，來簡化事件處理。

使用修飾符

<button @click.stop="sayHello">Say Hello</button>

按鍵修飾符

Vue 允許你監聽特定的按鍵，如.enter、.tab等。

監聽特定按鍵

<input @keyup.enter="onEnter" />

組件基礎

Vue 組件系統是構建大型應用程序的關鍵。組件允許我們通過組合較小的、可復用的部件來構建大型應用程序。

組件的創建和使用

Vue.component("my-component", {template: "<div>A custom component!</div>",
});

在模板中使用：

<my-component></my-component>

組件的 props

組件可以接受外部傳入的數據，這些數據被稱為 props。

Vue.component("child-component", {props: ["greeting"],template: "<p>{{ greeting }}</p>",
});

使用：

<child-component :greeting="'Hello from parent!'"></child-component>

組件事件

組件可以觸發事件，這些事件可以被父組件監聽。

Vue.component("child-component", {template: `<button @click="notifyParent">Click me</button>`,methods: {notifyParent() {this.$emit("notify", "Message from child");},},
});

父組件監聽事件：

<child-component @notify="handleNotification"></child-component>

methods: {handleNotification: function (message) {alert(message);}
}

結語

通過本篇文章，我們全面學習了 Vue 的基礎語法，包括 Vue 實例和選項、模板語法、數據綁定、事件處理、組件系統的基礎，以及過濾器。這些知識點構成了 Vue 應用開發的基礎。在接下來的專欄文章中，我們將繼續深入探索 Vue 的高級特性和最佳實踐。

---

歡迎在文章下方留言，分享學習 Vue 基礎語法的心得體會，或提出在學習過程中遇到的問題。我將在后續的文章中提供解答和指導。

---