3 Vue 指令简介

    今天，我们将探讨 Vue 指令的全部内容。

    首先是第一件事。 什么是指令？ 这些是特殊的说明，它们会在附加到 HTML 元素时更改其行为。 换句话说，这些是附加到 HTML 元素的特殊属性，这些属性可以更改行为并基于 DOM 的表达式值提供对 DOM 的控制。

    所有 Vue 指令均以为前缀。 该前缀用于以下目的：

    • 表示它是属于 Vue 的特殊属性
    • 帮助保持语法一致
    • 为开发人员提供可读性

    一些示例是，

    • 单向和双向绑定：v-bind和v-model
    • 条件渲染：v-if，v-else，v-for
    • 插值：v-once，v-html，v-text

    在我们的教程系列中，我们将详细处理所有这些指令。 现在，让我们看一下v-once的工作，并提供一个代码示例，以大致了解指令的工作方式。

    • 显示标题
    • 显示带有问候消息的段落，例如“嗨！”

    Index.js

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

    你能猜出输出吗？

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

    With Vue directives