3 Vue 指令简介

原文： 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

  1. <html>
  2.   <head>
  3.     <title>Hello Vue!</title>
  4.     <!-- including Vue with development version CDN -->
  5.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  6.   </head>
  7.   <body>
  8.     <div id="app">
  9.       <h1>{{ message }}</h1>
  10.       <p>Calling the greet function - {{ greet() }}!</p>
  11.     </div>
  12.     <!-- including index.js file-->
  13.     <script src="index.js"></script>
  14.   </body>
  15. </html>

Index.js

  1. var app = new Vue({
  2.   el: "#app",
  3.   data: {
  4.     message: "Hi everyone!"
  5.   },
  6.   methods: {
  7.     greet() {
  8.       this.message = "Hi!"
  9.       return this.message;
  10.     }
  11.   }
  12. });

你能猜出输出吗？

greet()函数返回的标题和值都将为“Hi!”。 因为一旦message的值更改，所有出现的事件都会被重新渲染。 这是默认行为。

without Vue Directives

但是，在某些情况下，即使稍后更改属性，您可能仍要显示其初始值。 这是指令生效的地方。 在我们的场景中，我们希望显示message属性的初始值“Hi everyone!” 作为标题。 因此，通过将指令v-once添加到<h1>元素，该元素内部的所有内容将仅呈现一次。 稍后通过<p>元素中的greet()方法对其进行更改时，将不会对其进行更新。

With Vue directives

与往常一样，所有代码文件都可以在 GitHub 仓库中找到。 请随意创建您自己的副本，以尝试使用v-once指令。 不要忘记让您的想象力疯狂。 再见！