在这一篇中，我们将基于通过 Vue CLI 创建的项目，学习 Vue 的基础语法，包括数据绑定、插值语法、事件绑定等功能。项目代码将主要编写在 src/App.vue 文件和 src/main.js 文件中。
1. Vue 实例与挂载
在通过 Vue CLI 创建的项目中，Vue 实例的创建通常在 src/main.js 文件中完成：
// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
这里的 App.vue 是项目的根组件，所有的代码都会渲染到 #app 容器中。
2. 数据绑定：插值语法
在 Vue 中，可以通过插值语法将数据渲染到页面上。
修改 src/App.vue 文件：
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
message: "Hello, Vue！"
};
}
};
</script>
<style>
h1 {
color: green;
text-align: center;
}
</style>
解释：
{{ message }}是 Vue 的 插值语法，用于将数据动态渲染到页面上。data()返回一个对象，定义组件中使用的变量。
3. 单向数据绑定：v-bind
v-bind 指令用于将数据绑定到 HTML 元素的属性上。
修改 App.vue 文件：
<template>
<div>
<h1>单向数据绑定示例</h1>
<img v-bind:src="imageSrc" alt="Vue Logo" />
</div>
</template>
<script>
export default {
data() {
return {
imageSrc: "https://vuejs.org/images/logo.png"
};
}
};
</script>
<style>
img {
display: block;
margin: 0 auto;
width: 200px;
}
</style>
解释： v-bind 动态绑定数据到 HTML 属性，例如图片路径 src。
4. 双向数据绑定：v-model
v-model 用于实现表单元素的双向数据绑定。
修改 App.vue 文件：
<template>
<div>
<h1>双向数据绑定示例</h1>
<input v-model="name" placeholder="请输入你的名字" />
<p>你的名字是：{{ name }}</p>
</div>
</template>
<script>
export default {
data() {
return {
name: ""
};
}
};
</script>
<style>
input {
display: block;
margin: 10px auto;
padding: 5px;
font-size: 16px;
}
</style>
解释： v-model 让数据和输入框内容保持同步，用户输入时会实时更新 name 变量。
5. 事件绑定：v-on
使用 v-on 指令（简写为 @）绑定事件处理函数。
修改 App.vue 文件：
<template>
<div>
<h1>事件绑定示例</h1>
<button @click="showAlert">点击我</button>
</div>
</template>
<script>
export default {
methods: {
showAlert() {
alert("你点击了按钮！");
}
}
};
</script>
<style>
button {
display: block;
margin: 20px auto;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
解释：
@click是v-on:click的简写，用于绑定点击事件。methods定义了事件处理函数showAlert。
总结
在这一篇中，你学习了 Vue 的基础语法，包括：
- 插值语法：动态渲染数据。
- 单向数据绑定：使用
v-bind。 - 双向数据绑定：使用
v-model。 - 事件绑定：使用
v-on。
接下来，我们将在 第3篇 中深入学习 Vue 的核心功能：组件，并实现父子组件通信。
