Vue2 基础知识点一：数据绑定 (Data Binding)

Vue2 基础知识点一：数据绑定 (Data Binding)

在 Vue2 里，数据绑定是最核心的功能。通过它，你可以让 视图 (HTML) 和 数据 (JavaScript 对象里的值) 自动保持同步。

---

1. 单向绑定

v-bind

• 语法糖：
• 用途：把 JS 数据渲染到 HTML 属性里。

<div id="app"><img :src="imageUrl" :alt="desc">
</div><script>
new Vue({el: "#app",data: {imageUrl: "https://vuejs.org/images/logo.png",desc: "Vue Logo"}
})
</script>

页面会自动显示一张 Vue 的图片。只要 imageUrl 改变，img 标签里的 src 也会跟着变。

---

2. 双向绑定

v-model

• 主要用在表单元素（input、textarea、select）。
• 可以让输入框的值和 JS 数据保持实时同步。

<div id="app"><input v-model="msg" placeholder="输入点什么"><p>你输入的内容是：{{ msg }}</p>
</div><script>
new Vue({el: "#app",data: {msg: ""}
})
</script>

输入框里输入文字，下面的

会自动更新。

---

3. 插值语法

{{ }}

• 用于把数据插入到 HTML 内容中。

<div id="app"><p>欢迎你，{{ username }}</p>
</div><script>
new Vue({el: "#app",data: {username: "桃子"}
})
</script>

---

👉 这就是 Vue2 数据绑定的三种核心方式：

• {{ }} 插值
• v-bind 单向绑定
• v-model 双向绑定

---