Vue3 模板语法详解：插值、指令与响应式数据

Vue3 模板语法详解

代码示例

<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 }} 将数据绑定到页面显示。
• 文本渲染命令：v-if 根据条件控制元素显示或隐藏。
• 属性渲染命令：:href 用于动态绑定 HTML 属性。
• 事件渲染命令：@click 监听点击事件并执行方法。

响应式数据处理

在 Vue3 中，使用 ref 函数定义响应式数据，确保数据变化能反映在视图中。在 setup() 函数中返回所需的数据和方法，使其被模板正确渲染和响应。