Vue 3指令與事件處理

来源:https://www.cnblogs.com/Amd794/p/18212907
-Advertisement-
Play Games

title: Vue 3指令與事件處理 date: 2024/5/25 18:53:37 updated: 2024/5/25 18:53:37 categories: 前端開發 tags: Vue3基礎 指令詳解 事件處理 高級事件 實戰案例 最佳實踐 性能優化 第1章 Vue 3基礎 1.1 V ...


title: Vue 3指令與事件處理
date: 2024/5/25 18:53:37
updated: 2024/5/25 18:53:37
categories:

  • 前端開發

tags:

  • Vue3基礎
  • 指令詳解
  • 事件處理
  • 高級事件
  • 實戰案例
  • 最佳實踐
  • 性能優化

image

第1章 Vue 3基礎

1.1 Vue 3簡介

Vue 3 是一個由尤雨溪（尤大）領導的開源JavaScript框架，它專註於構建用戶界面。相較於Vue 2，Vue 3在核心理念上保持一致，但對一些底層實現進行了重大優化，包括：

  • SFC（Single File Component） : Vue 3繼續支持SFC模式，將組件的模板、樣式和邏輯集成在一個文件中。
  • Composition API: 引入新的編程模型，強調組件內部狀態的可組合性，而非依賴於props和data。
  • TypeScript支持: 提供了更好的類型系統，方便開發者編寫類型安全的代碼。
  • Performance: 通過移除一些不必要的依賴，提高了性能，特別是對於大型應用。

1.2 安裝與配置

1.2.1 環境準備

  • Node.js: Vue 3需要Node.js環境，建議使用最新版本。
  • 使用npm或yarn: 作為包管理器，安裝Vue CLI（命令行工具）。

1.2.2 Vue CLI安裝

  • 打開終端（或命令提示符）：
npm install -g @vue/cli
  • 或者使用yarn：
yarn global add @vue/cli

1.2.3 創建項目

  • 創建一個新的Vue 3項目：
vue create my-project
  • 進入項目目錄：
cd my-project

1.2.4 配置基本文件

  • 修改src/main.js，引入Vue實例並啟動應用：
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.mount('#app');

1.3 模板語法

1.3.1 JSX-like模板 Vue 3的模板語法採用類似React的JSX語法，但更簡潔。如創建一個Hello World組件：

<template>
  <div>Hello, {{ name }}!</div>
</template>

<script>
export default {
  data() {
    return {
      name: 'World',
    };
  },
};
</script>
  • {{ }}用於插值表達式，{{{ }}}用於文本插值。
  • <div>是標簽，<template>用於包裹組件內容。

1.3.2 簡化模板 Vue 3還支持更簡潔的模板語法，如：

<template>
  <div>Hello, {{ name }}!</div>
</template>
<script>
export default {
  data() {
    return { name: 'World' };
  },
};
</script>
  • 省略了<script>標簽內的export default和data。

第2章 Vue 3指令

2.1 內置指令

Vue 3提供了多種內置指令，用於控制DOM的行為和渲染。以下是一些常用的內置指令：
AD：漫畫首頁

2.1.1 v-bind

v-bind 指令用於動態地綁定一個或多個屬性，或者一個組件 prop 到表達式。在Vue 3中，v-bind 可以簡寫為 :。

示例：

<template>
  <img :src="imageSrc" alt="Image">
</template>
<script>
export default {
  data() {
    return {
      imageSrc: 'https://example.com/image.jpg',
    };
  },
};
</script>

2.1.2 v-model

v-model 指令用於在表單控制項或者組件上創建雙向數據綁定。

示例：

<template>
  <input v-model="message" placeholder="edit me">
  <p>Message is: {{ message }}</p>
</template>
<script>
export default {
  data() {
    return {
      message: '',
    };
  },
};
</script>

2.1.3 v-on

v-on 指令用於監聽DOM事件，併在觸發時執行一些JavaScript代碼。v-on 可以簡寫為 @。

示例：

<template>
  <button @click="incrementCounter">Click me</button>
</template>
<script>
export default {
  data() {
    return {
      counter: 0,
    };
  },
  methods: {
    incrementCounter() {
      this.counter++;
    },
  },
};
</script>

2.1.4 v-show與v-if

v-show 和 v-if 指令用於條件性地渲染一塊內容。v-show 是通過CSS控制元素的顯示與隱藏，而 v-if 則是通過創建或銷毀DOM元素來控制。

示例：

<template>
  <p v-show="isVisible">This is shown by v-show</p>
  <p v-if="isVisible">This is shown by v-if</p>
</template>
<script>
export default {
  data() {
    return {
      isVisible: true,
    };
  },
};
</script>

2.1.5 v-for

v-for 指令用於基於源數據多次渲染元素或模板塊。

示例：

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.text }}
    </li>
  </ul>
</template>
<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' },
      ],
    };
  },
};
</script>

2.1.6 v-text與v-html

v-text 指令用於更新元素的 textContent。v-html 指令用於更新元素的 innerHTML。

示例：

<template>
  <p v-text="textContent"></p>
  <p v-html="htmlContent"></p>
</template>
<script>
export default {
  data() {
    return {
      textContent: 'This is text content',
      htmlContent: '<span>This is HTML content</span>',
    };
  },
};
</script>

通過這些內置指令，Vue 3允許開發者以聲明式的方式控制DOM，使得代碼更加簡潔和易於維護。

2.2 自定義指令

除了內置指令，Vue 3還允許開發者創建自定義指令。自定義指令可以用於執行更多複雜的DOM操作。

2.2.1 創建自定義指令

可以使用 directives 選項在組件中註冊自定義指令。

示例：

export default {
  directives: {
    focus: {
      // 指令的定義
      mounted(el) {
        el.focus();
      },
    },
  },
};

2.2.2 鉤子函數

自定義指令可以包含以下幾個鉤子函數：

  • bind：只調用一次，指令第一次綁定到元素時調用。
  • inserted：被綁定元素插入到父節點時調用（僅保證父節點存在，但不一定已被插入到文檔中）。
  • updated：所在組件的 VNode 更新時調用，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前後的值來忽略不必要的模板更新。
  • componentUpdated：所在組件的 VNode 及其子 VNode 全部更新後調用。
  • unbind：只調用一次，指令與元素解綁時調用。

示例：

export default {
  directives: {
    focus: {
      bind(el) {
        console.log('focus bind');
      },
      inserted(el) {
        console.log('focus inserted');
      },
      updated(el) {
        console.log('focus updated');
      },
      componentUpdated(el) {
        console.log('focus componentUpdated');
      },
      unbind(el) {
        console.log('focus unbind');
      },
    },
  },
};

2.2.3 指令參數與修飾符

自定義指令可以接受一個參數，該參數是一個字元串，表示指令的修飾符。修飾符是一個 prefiex，以 . 開頭，用於指明指令應該以特殊方式綁定。

示例：

export default {
  directives: {
    focus: {
      bind(el, binding) {
        if (binding.arg === 'input') {
          el.focus();
        }
      },
    },
  },
};

可以在使用自定義指令時，使用 v-bind 傳遞參數。

示例：

<template>
  <input v-focus.input="">
</template>

通過自定義指令，開發者可以擴展 Vue 的功能，併在組件中實現更多複雜的DOM操作。

第3章 Vue 3事件處理

3.1 Vue 3事件處理

Vue 3的事件處理機制與Vue 2類似，但使用了更簡潔的語法。Vue 3中不再直接支持v-on，而是使用@符號來綁定事件。

3.1.1 基本事件綁定

基礎的事件綁定使用 @ 符號，後跟事件名稱，再加事件處理函數。例如：

<button @click="handleClick">點擊我</button>

對應的JavaScript部分：

export default {
  methods: {
    handleClick() {
      console.log('Button clicked');
    },
  },
};

3.1.2 事件修飾符

Vue 3的事件修飾符與Vue 2相容，包括：

  • .prevent：阻止事件的預設行為（如阻止表單的預設提交）
  • .stop：阻止事件的進一步傳播（預設行為不會被阻止）
  • .capture：在捕獲階段觸發，從根元素開始向上
  • .self：僅在事件源和觸發元素相同時觸發
  • .passive：在觸摸移動事件中，用於處理滾動，使事件在預設行為執行前觸發，常用於阻止滾動

例如：

<button @click.prevent="handleClick">阻止預設</button>

3.1.3 按鍵修飾符

  • .once：只觸發一次，然後移除事件監聽
  • .key：用於鍵盤事件，指定一個鍵值（如 Enter、Esc）來監聽

例如：

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

在這個例子中，當用戶按下回車鍵時，handleEnter 方法會被調用。

3.2 事件處理函數

在Vue 3中，事件處理函數是響應用戶交互的關鍵部分，它們可以以不同的形式存在，包括內聯事件處理器、方法事件處理器以及結合計算屬性和偵聽器。

3.2.1 內聯事件處理器

內聯事件處理器是指直接在模板中定義的JavaScript表達式，它們通常用於簡單的邏輯。例如：

<button @click="count++">增加計數</button>

在這個例子中，點擊按鈕會直接增加count的值。

3.2.2 方法事件處理器

方法事件處理器是指在Vue組件的methods選項中定義的函數，這些函數可以處理更複雜的邏輯。例如：

export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    incrementCount() {
      this.count++;
    },
  },
};

在模板中使用：

<button @click="incrementCount">增加計數</button>

3.2.3 計算屬性與偵聽器

計算屬性和偵聽器也可以用於事件處理，尤其是在需要根據數據變化來更新視圖或執行某些操作時。

  • 計算屬性：計算屬性是基於它們的依賴進行緩存的，只有當依賴變化時才會重新計算。例如：
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe',
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    },
  },
};

在模板中使用計算屬性：

<button @click="fullName = 'Jane Smith'">更改全名</button>
  • 偵聽器：偵聽器用於觀察和響應Vue實例上的數據變動。例如：
export default {
  data() {
    return {
      message: 'Hello',
    };
  },
  watch: {
    message(newVal, oldVal) {
      console.log(`Message changed from ${oldVal} to ${newVal}`);
    },
  },
};

在模板中觸發偵聽器：

<button @click="message = 'Hello, Vue 3'">更改消息</button>

通過這些不同類型的事件處理函數，Vue 3提供了靈活且強大的工具來處理用戶交互和數據變化。

第4章 高級事件處理

在Vue中，高級事件處理技術包括使用事件匯流排、自定義事件和事件委托，這些技術可以幫助開發者更有效地管理組件間的通信和事件處理。

4.1 事件匯流排

事件匯流排是一個中央集線器，用於在非父子關係的組件之間傳遞事件。在Vue 2中，通常使用一個空的Vue實例作為事件匯流排。但在Vue 3中，推薦使用mitt或tiny-emitter等第三方庫，因為Vue 3移除了$on、$off和$once等實例方法。

使用事件匯流排的基本步驟如下：

  1. 創建事件匯流排：
import mitt from 'mitt';
export const emitter = mitt();
  1. 在發送組件中觸發事件：
this.emitter.emit('eventName', data);
  1. 在接收組件中監聽事件：
this.emitter.on('eventName', this.handleEvent);

4.2 自定義事件

自定義事件是Vue中組件間通信的另一種方式，特別是在父子組件之間。子組件可以使用$emit方法觸發一個自定義事件，父組件則通過在子組件標簽上使用v-on或@來監聽這個事件。

示例：

子組件：

methods: {
  handleClick() {
    this.$emit('custom-event', '傳遞的數據');
  }
}

父組件：

<child-component @custom-event="handleCustomEvent"></child-component>

4.3 事件委托

事件委托是一種優化事件處理的技術，它利用事件冒泡機制，將事件處理器添加到父元素上，而不是每個子元素上。這樣可以減少記憶體消耗和提高性能，尤其是在有很多子元素需要監聽相同事件的情況下。
AD：專業搜索引擎

在Vue中實現事件委托的示例：

<ul @click="handleClick">
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>


methods: {
  handleClick(event) {
    const target = event.target;
    if (target.tagName === 'LI') {
      // 處理點擊事件
    }
  }
}

在這個例子中，handleClick方法會監聽<ul>元素上的點擊事件，並通過檢查事件目標來確定是否是<li>元素被點擊。這樣，無論有多少個<li>元素，都只需要一個事件處理器。

第5章 實戰案例

以下是一些Vue.js簡單實戰案例，涵蓋了表單處理、列表渲染與過濾、動態組件與非同步組件的應用。

5.1 表單處理

表單處理是前端應用中常見的需求，Vue提供了簡潔的方法來處理表單輸入。

<template>
  <div>
    <form @submit.prevent="submitForm">
      <input v-model="form.name" placeholder="Name">
      <input v-model="form.email" type="email" placeholder="Email">
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        email: ''
      }
    };
  },
  methods: {
    submitForm() {
      // 處理表單提交邏輯
      console.log('Name:', this.form.name);
      console.log('Email:', this.form.email);
    }
  }
};
</script>

5.2 列表渲染與過濾

列表渲染是Vue中的基礎功能，結合過濾器可以實現複雜的數據展示。

<template>
  <div>
    <input v-model="search" placeholder="Search">
    <ul>
      <li v-for="item in filteredList" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: '',
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Cherry' },
        // 更多數據...
      ]
    };
  },
  computed: {
    filteredList() {
      return this.items.filter(item => item.name.includes(this.search));
    }
  }
};
</script>

5.3 動態組件與非同步組件

動態組件和非同步組件可以提高應用的靈活性和性能。

<template>
  <div>
    <button @click="component = 'ChildA'">切換到ChildA</button>
    <button @click="component = 'ChildB'">切換到ChildB</button>
    <component :is="component"></component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      component: 'ChildA'
    };
  },
  components: {
    ChildA: { template: '<div>This is ChildA</div>' },
    ChildB: { template: '<div>This is ChildB</div>' }
  }
};
</script>

非同步組件的實現通常涉及到動態導入：

components: {
  ChildA: () => import('./ChildA.vue'),
  ChildB: () => import('./ChildB.vue')
}

這樣，ChildA和ChildB組件會按需載入，從而提高應用的性能。

第6章 最佳實踐

在Vue.js開發中，遵循一些最佳實踐可以提高應用的性能、代碼的可維護性和可測試性。以下是關於性能優化、代碼組織與重用、測試與調試的最佳實踐。AD：首頁 | 一個覆蓋廣泛主題工具的高效線上平臺

6.1 性能優化

  1. 使用v-if替代v-show：在需要頻繁切換顯示狀態時，使用v-if比v-show更高效。
  2. 合理使用計算屬性：對於複雜的數據處理，使用計算屬性可以減少重覆計算，提高性能。
  3. 避免不必要的組件渲染：使用v-once指令可以渲染一次後不再更新，適用於靜態內容。
  4. 非同步組件和代碼分割：使用非同步組件和Webpack的代碼分割功能，可以按需載入組件，減少初始載入時間。
  5. 使用keep-alive緩存組件：對於需要頻繁切換但數據不變的組件，使用<keep-alive>可以避免重覆渲染。

6.2 代碼組織與重用

  1. 組件化開發：將UI拆分為可重用的組件，每個組件負責特定的功能。
  2. 遵循單一職責原則：每個組件或模塊應只負責一個功能，提高代碼的可維護性和可測試性。
  3. 使用Mixins或Composition API：對於組件間的共用邏輯，可以使用Mixins或Vue 3的Composition API。
  4. 模塊化管理狀態：使用Vuex或其他狀態管理工具來管理應用的狀態，確保狀態的可預測性和可維護性。
  5. 代碼風格一致：遵循統一的代碼風格和命名規範，提高代碼的可讀性。

6.3 測試與調試

  1. 單元測試：為組件和關鍵邏輯編寫單元測試，確保代碼的正確性。可以使用Jest或Vue Test Utils等工具。
  2. 端到端測試：使用Cypress或Puppeteer等工具進行端到端測試，確保應用在真實環境中的表現符合預期。
  3. 使用Vue Devtools：利用Vue Devtools進行調試，可以直觀地查看組件樹、狀態和事件。
  4. 日誌和錯誤處理：在關鍵點添加日誌輸出，便於追蹤問題。使用try-catch處理可能的錯誤，提高應用的健壯性。
  5. 持續集成：將測試集成到持續集成流程中，確保每次代碼提交都經過自動化測試。

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Android Media Framework - 開篇
    前言 線程是電腦中的一種執行單元，是操作系統進行調度的最小單位。它是進程中的實際運行單位，每個進程可以包含多個線程。線程可以理解為進程中的一個執行流，它獨立運行，擁有獨立的棧和寄存器，但共用進程的資源，如記憶體空間、文件等。線程通過併發執行，將一個進程的任務劃分成多個子任務並行處理，以提高程式的 ...
  • 鴻蒙HarmonyOS實戰-Stage模型（進程模型）
    前言 進程是電腦中運行的程式的實例。它是操作系統對正在執行的程式的一種抽象概念。每個進程都有自己的獨立記憶體空間、運行狀態和執行上下文。進程可以包含一個或多個線程，每個線程可以獨立執行一部分任務。操作系統通過分配和管理進程資源來實現多任務和併發執行。進程之間可以通過進程間通信機制進行數據交換和協 ...
  • Vue 組件生命周期：探索鉤子
    title: Vue 組件生命周期：探索鉤子 date: 2024/5/27 18:42:38 updated: 2024/5/27 18:42:38 categories: 前端開發 tags: 生命周期 非同步載入 通信原理 父子通信 兄弟通信 跨層通信 性能優化 第 1 章：介紹與背景 1.1 ...
  • Angular等了三年，那個她已經來了
    一、用途 可視區域即我們瀏覽網頁的設備肉眼可見的區域，如下圖 在日常開發中，我們經常需要判斷目標元素是否在視窗之內或者和視窗的距離小於一個值（例如 100 px），從而實現一些常用的功能，例如： 圖片的懶載入 列表的無限滾動 計算廣告元素的曝光情況 可點擊鏈接的預載入 二、實現方式 判斷一個元素是否 ...
  • 【JS】await異常捕獲，這樣做才完美
    文章關註JavaScript中async/await的異常處理，指出未捕獲異常的潛在風險。1）使用try-catch，雖全面但冗餘；2）藉助Promise的catch，減少冗餘; 3) 利用await-to-js庫簡化異常處理 ...
  • 代碼雨（coderain)源碼（html5+css3+javascript,原創)
    大家看過黑客帝國的代碼雨嗎？本人自己寫了一個，效果還可以。演示效果請見https://www.lanbaoshi.site/coderain.htm 下麵上代碼： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
  • Chart.js (v2.9.4) 2-主要的函數和對象介紹
    title: Vue.js條件渲染與列表渲染指南 date: 2024/5/26 20:11:49 updated: 2024/5/26 20:11:49 categories: 前端開發 tags: VueJS 前端開發 數據綁定 列表渲染 狀態管理 路由配置 性能優化 第1章：Vue.js基礎與 ...
  • Vue3源碼解析--收集的依賴是什麼？怎麼收集的？什麼時候收集的？
    從Vue開始較大範圍在前端應用開始，關於Vue一些基礎知識的討論和麵試問題就在開發圈子裡基本上就跟前幾年的股票和基金一樣，樓下擺攤賣醬香餅的阿姨都能說上幾句那種。找過前端開發工作或者正在找開發工作的前端都知道，面試官基本上都有那麼幾個常問的問題，而網上呢也有那麼一套可以用來背誦的“八股文”，自己懂多 ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類