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() 函数中返回所需的数据和方法，使其被模板正确渲染和响应。