<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue3 基础语法案例</title>
<!-- 引入 Vue3 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<!-- 使用插值表达式显示数据 -->
<p>{
{ message }}</p>
<!-- 使用 v-bind 绑定属性 -->
<img v-bind:src="imageUrl" alt="示例图片">
<!-- 使用 v-on 绑定事件 -->
<button v-on:click="changeMessage">点击我</button>
</div>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hello, Vue3!',
imageUrl: 'your-image-url.jpg'
};
},
methods: {
changeMessage() {
this.message = 'Message changed!';
}
}
});
app.mount('#app');
</script>
</body>
</html>
在这个案例中:
一、插值表达式
通过{
{ message }}
在页面中显示了定义在 Vue 实例中的message
数据。当数据发生变化时,页面会自动更新显示的内容。
二、属性绑定(v-bind)
使用v-bind:src="imageUrl"
将imageUrl
的值绑定到<img>
标签的src
属性上,这样可以动态地设置图片的来源。
三、事件绑定(v-on)
通过v-on:click="changeMessage"
为按钮绑定了一个点击事件,当用户点击按钮时,会调用changeMessage
方法,该方法会改变message
的值,从而触发页面的更新。
这个案例展示了 Vue3 中一些基础的语法特性,包括数据绑定、属性绑定和事件绑定,帮助你初步了解 Vue3 的开发方式。