vue4怎么写入门代码
时间: 2023-07-09 13:15:36 浏览: 58
Vue.js 4 目前还没有正式发布,但是在 Vue.js 3 的基础上进行了一些改进和优化,以下是一个简单的入门代码:
1. 引入 Vue.js 库
```
<script src="https://unpkg.com/vue@next"></script>
```
2. 创建 Vue 实例
```
const app = Vue.createApp({
data() {
return {
message: 'Hello, Vue 4!'
}
},
methods: {
changeMessage() {
this.message = 'Vue 4 is awesome!'
}
}
})
```
上述代码中,我们使用Vue.createApp()方法创建了一个Vue实例,该实例包含一个data属性,其中定义了一个名为"message"的数据。还定义了一个名为"changeMessage"的方法,用于修改"message"数据。
3. 编写模板
```
<div id="app">
<p>{{ message }}</p>
<button @click="changeMessage">Change Message</button>
</div>
```
上述代码中,我们使用双大括号语法{{}}输出Vue实例中的"message"数据,并使用@click指令绑定点击事件,调用"changeMessage"方法。
4. 挂载 Vue 实例
```
app.mount('#app')
```
上述代码中,我们使用mount()方法将Vue实例挂载到id为"app"的DOM元素上。
完整的代码如下:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 4 Demo</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button @click="changeMessage">Change Message</button>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hello, Vue 4!'
}
},
methods: {
changeMessage() {
this.message = 'Vue 4 is awesome!'
}
}
})
app.mount('#app')
</script>
</body>
</html>
```
打开 HTML 文件即可看到 Vue 4 的效果。需要注意的是,Vue 4 目前还处于测试阶段,可能会有一些变化。如果您想深入学习 Vue 4,可以查看 Vue 4 的官方文档。