3 Vue 指令簡介 · JavaBeginnersTutorial 中文系列教程

# 3 Vue 指令簡介 > 原文： [https://javabeginnerstutorial.com/vue-js/3-vue-directives/](https://javabeginnerstutorial.com/vue-js/3-vue-directives/) 今天，我們將探討 Vue 指令的全部內容。首先是第一件事。什么是指令？這些是特殊的說明，它們會在附加到 HTML 元素時更改其行為。換句話說，這些是附加到 HTML 元素的特殊屬性，這些屬性可以更改行為并基于 DOM 的表達式值提供對 DOM 的控制。所有 Vue 指令均以`v-`為前綴。該前綴用于以下目的： * 表示它是屬于 Vue 的特殊屬性 * 幫助保持語法一致 * 為開發人員提供可讀性 Vue 帶有一些內置指令。請注意，我們可以編寫自己的自定義指令，我們將在以后看到。這些指令可以在許多情況下為我們提供幫助。一些示例是， * 單向和雙向**綁定**：`v-bind`和`v-model` * **監聽 DOM 事件**：`v-on` * **條件渲染**：`v-if`，`v-else`，`v-for` * **插值**：`v-once`，`v-html`，`v-text` 在我們的教程系列中，我們將詳細處理所有這些指令。現在，讓我們看一下`v-once`的工作，并提供一個代碼示例，以大致了解指令的工作方式。 ## 場景： * 顯示標題 * 顯示帶有問候消息的段落，例如“嗨！” ### `Index.html` ```js <html> <head> <title>Hello Vue!</title>  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h1>{{ message }}</h1> <p>Calling the greet function - {{ greet() }}!</p> </div>  <script src="index.js"></script> </body> </html> ``` ### `Index.js` ```js var app = new Vue({ el: "#app", data: { message: "Hi everyone!" }, methods: { greet() { this.message = "Hi!" return this.message; } } }); ``` 你能猜出輸出嗎？ `greet()`函數返回的標題和值都將為“`Hi!`”。因為一旦`message`的值更改，所有出現的事件都會被重新渲染。這是默認行為。 ![without Vue Directives](https://img.kancloud.cn/b5/6f/b56f77c727bd9a6928e0f035cada7423_784x616.png) 但是，在某些情況下，即使稍后更改屬性，您可能仍要顯示其初始值。這是指令生效的地方。在我們的場景中，我們希望顯示`message`屬性的初始值“`Hi everyone!`” 作為標題。因此，通過將指令`v-once`添加到`<h1>`元素，該元素內部的所有內容將僅呈現一次。稍后通過`<p>`元素中的`greet()`方法對其進行更改時，將不會對其進行更新。 ![With Vue directives](https://img.kancloud.cn/c6/c0/c6c01cbf2fc43ed9774610295e3b1e97_788x591.png) 與往常一樣，所有代碼文件都可以在 [GitHub 倉庫](https://github.com/JBTAdmin/vuejs)中找到。請隨意創建您自己的副本，以嘗試使用`v-once`指令。不要忘記讓您的想象力瘋狂。再見！