在 Vue.js 中，数据绑定和事件处理是最基本也是最强大的功能之一。数据绑定让你可以轻松地将视图和数据连接在一起，而事件处理则让你的应用可以响应用户的操作。本篇将详细讲解 Vue 中的数据绑定和事件处理。
一、数据绑定：v-bind 和 {{}} 的魔力
Vue.js 的数据绑定使用 v-bind 指令和 Mustache 语法（{{}}）。你可以将数据绑定到 DOM 的属性、内容以及样式等。
1. 单向绑定：{{}}
使用双大括号（{{}}）可以将数据动态绑定到 DOM 中：
<div id="app">
<p>欢迎来到 {{ appName }}！</p>
</div>
<script>
new Vue({
el: '#app',
data: {
appName: 'Vue2 入门指南'
}
});
</script>
运行结果：
欢迎来到 Vue2 入门指南！
2. 属性绑定：v-bind
v-bind 指令用于动态绑定 HTML 属性，例如 href、src 或自定义属性：
<div id="app">
<a v-bind:href="link" target="_blank">访问 Vue 官方网站</a>
</div>
<script>
new Vue({
el: '#app',
data: {
link: 'https://vuejs.org'
}
});
</script>
运行结果：
-
链接会动态绑定到
https://vuejs.org。 -
tip 简写
v-bind可以缩写为冒号（:）：
<a :href="link" target="_blank">访问 Vue 官方网站</a>
3. 动态绑定样式和类名
Vue 支持动态绑定 CSS 类和内联样式：
<div id="app">
<p :class="{ active: isActive }">这是一个动态类</p>
<p :style="styleObject">这是一个动态样式</p>
</div>
<script>
new Vue({
el: '#app',
data: {
isActive: true,
styleObject: {
color: 'red',
fontSize: '20px'
}
}
});
</script>
运行结果：
- 如果
isActive为true，第一个段落会添加active类。 - 第二个段落的文字会显示为红色并且字体大小为 20px。
二、事件处理：v-on 的妙用
事件处理通过 v-on 指令实现，允许你监听用户的交互（如点击、输入等）。
1. 监听点击事件
使用 v-on 监听点击事件，并触发一个方法：
<div id="app">
<button v-on:click="showMessage">点击我</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
},
methods: {
showMessage() {
alert(this.message);
}
}
});
</script>
运行结果：
-
点击按钮会弹出提示框显示
Hello, Vue!。 -
tip 简写
v-on可以缩写为@：
<button @click="showMessage">点击我</button>
2. 事件修饰符
Vue 提供了一些事件修饰符来简化事件处理，例如：
.stop：阻止事件冒泡.prevent：阻止默认行为.once：只触发一次事件.self：只在自身元素触发事件时调用
示例：
<div id="app">
<button @click.stop="showMessage">阻止冒泡</button>
<form @submit.prevent="onSubmit">
<button type="submit">提交表单</button>
</form>
</div>
<script>
new Vue({
el: '#app',
methods: {
showMessage() {
alert('事件冒泡已阻止');
},
onSubmit() {
alert('表单提交已阻止');
}
}
});
</script>
三、双向绑定：v-model
v-model 是 Vue.js 提供的一个双向绑定指令，常用于表单控件。
1. 输入框的双向绑定
<div id="app">
<input v-model="inputValue" placeholder="请输入内容">
<p>你输入的内容是：{{ inputValue }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
inputValue: ''
}
});
</script>
运行结果：
- 输入框的内容会实时显示在段落中。
2. 复选框、单选框和下拉菜单
v-model 同样适用于复选框、单选框和下拉菜单：
<div id="app">
<label>
<input type="checkbox" v-model="checked"> 是否同意
</label>
<p>状态：{{ checked }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
checked: false
}
});
</script>
运行结果：
- 勾选复选框时，
checked的值会变成true，段落会实时显示状态。
四、小结
数据绑定和事件处理是 Vue.js 的核心功能，也是开发 Vue 应用的基础。通过 v-bind 和 v-on，你可以快速实现动态交互。结合双向绑定的 v-model，你的应用能够轻松地同步数据和视图，提升开发效率。
在接下来的章节中，我们会进一步探索 Vue 的高级功能，敬请期待！
