Vue3的插值表达式、文本渲染命令、属性渲染命令、事件渲染命令、响应式数据的处理方式

本文主要记录一下Vue 3的模板语法和响应式数据处理，包括插值表达式、文本渲染命令、属性渲染命令、事件渲染命令。

代码如下：

<template>
  <div>
    <h1>{{ message }}</h1>
    <p v-if="isDisplayed">This paragraph is displayed conditionally</p>
    <a :href="url">Click me!</a>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue 3!');
    const isDisplayed = ref(true);
    const url = 'https://www.example.com';

    function updateMessage() {
      message.value = 'Welcome to Vue 3!';
    }

    return {
      message,
      isDisplayed,
      url,
      updateMessage
    };
  }
};
</script>

在上面代码中：

• 插值表达式 {{ message }} 用于将 message 数据显示在页面上。
• 文本渲染命令 v-if 用于根据条件显示或隐藏元素。
• 属性渲染命令 :href 用于动态绑定元素的属性。
• 事件渲染命令 @click 用于监听元素的点击事件并执行相应的方法。

在响应式数据的处理方面，使用 ref 函数来定义响应式数据，确保数据的变化能够在视图中得到反映。在 setup() 函数中，返回了需要在模板中使用的数据和方法，使其能够被正确渲染和响应。