在普通html中使用vue3,请给我一个例子
时间: 2024-03-21 17:43:44 浏览: 14
在普通 HTML 页面中使用 `Vue 3`,需要先引入 `Vue 3` 库,可以通过以下方式引入:
```html
<script src="https://unpkg.com/vue@next"></script>
```
然后,可以在 HTML 页面中使用 `v-*` 作为自定义指令来使用 `Vue 3` 提供的功能。例如,可以使用 `v-text` 指令来实现文本插值:
```html
<div id="app">{{ message }}</div>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hello, Vue 3!'
}
}
})
app.mount('#app')
</script>
```
在上面的示例中,我们创建了一个 `Vue` 实例,将其挂载到 `id` 为 `app` 的元素上,并在该元素中使用了 `v-text` 指令来插入 `message` 变量的值。
需要注意的是,在 `Vue 3` 中,我们需要使用 `createApp` 方法来创建 `Vue` 实例,而不是 `new Vue`,这是 `Vue 3` 的一个重要变化。
此外,在 `Vue 3` 中,还可以使用 `v-model` 指令来实现双向数据绑定:
```html
<div id="app">
<input type="text" v-model="message">
<p>{{ message }}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hello, Vue 3!'
}
}
})
app.mount('#app')
</script>
```
在上面的示例中,我们在 `input` 元素上使用了 `v-model` 指令来实现双向数据绑定,将 `input` 元素的值绑定到 `message` 变量上,并在 `p` 元素中插入 `message` 变量的值。
需要注意的是,与 `Vue 2` 不同,`Vue 3` 中的 `v-model` 指令默认会使用 `value` 属性来进行数据绑定,而不是 `input` 事件。如果需要使用其他属性或事件进行数据绑定,可以通过参数的形式进行配置。例如,可以使用 `v-model:checked` 来绑定 `checked` 属性,或者使用 `v-model:debounce.500ms` 来设置防抖等特殊效果。