在Vue 3中，setup 函数是组合式API的核心部分，它允许你在组件中使用更灵活的逻辑组织和复用代码。setup 函数在组件实例创建之前执行，因此它没有访问 this 的权限。以下是如何在HTML中正确使用Vue 3的 setup 语法的步骤：
首先，确保你已经引入了Vue 3。你可以通过CDN或本地文件引入Vue 3。
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
在HTML中创建一个Vue应用的容器。
<div id="app">
<p>{{ message }}</p>
<button @click="increment">Increment</button>
<p>Count: {{ count }}</p>
</div>
setup 函数在Vue组件中使用 setup 函数来定义组件的逻辑。
<script>
const { createApp, ref } = Vue;
const app = createApp({
setup() {
// 使用 ref 创建响应式数据
const message = ref('Hello, Vue 3!');
const count = ref(0);
// 定义一个方法
function increment() {
count.value++;
}
// 返回需要在模板中使用的数据和方法
return {
message,
count,
increment
};
}
});
// 挂载应用
app.mount('#app');
</script>
setup 函数: setup 函数是Vue 3组合式API的核心。它在组件实例创建之前执行，并且返回一个对象，该对象包含需要在模板中使用的数据和方法。
ref: ref 是Vue 3中的一个函数，用于创建一个响应式的数据引用。ref 返回一个对象，该对象的 value 属性是响应式的。
createApp: createApp 是Vue 3中用于创建应用实例的函数。
app.mount('#app'): 将Vue应用挂载到指定的DOM元素上。
以下是一个完整的HTML示例，展示了如何在HTML中使用Vue 3的 setup 语法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 3 Setup Example</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button @click="increment">Increment</button>
<p>Count: {{ count }}</p>
</div>
<script>
const { createApp, ref } = Vue;
const app = createApp({
setup() {
const message = ref('Hello, Vue 3!');
const count = ref(0);
function increment() {
count.value++;
}
return {
message,
count,
increment
};
}
});
app.mount('#app');
</script>
</body>
</html>
当你打开这个HTML文件时，你会看到一个简单的Vue 3应用，显示一条消息和一个按钮。点击按钮会增加计数器的值。
setup 函数中没有 this，因此你不能像在Vue 2中那样使用 this 来访问组件实例或数据。setup 函数返回的对象中的属性和方法可以直接在模板中使用。ref 和 reactive 是Vue 3中常用的响应式API，ref 用于基本类型数据，reactive 用于对象或数组。通过以上步骤，你可以在HTML中正确使用Vue 3的 setup 语法来构建响应式组件。