VUE的“单向数据绑定” 和 “双向数据绑定”

在 Vue.js 中，数据绑定可以分为单向数据绑定和双向数据绑定两种类型。实现单向数据绑定的指令是v-bind。v-bind指令用于创建一个属性绑定，可以将一个表达式的值绑定到一个HTML元素的属性上。例如绑定元素的class、id、href等属性，或者在自定义组件中传递属性。

• ‌单向数据绑定‌：使用v-bind，数据从Vue实例流向DOM。可以实现这一点。
• ‌双向数据绑定‌：使用v-model，数据可以在DOM和Vue实例之间双向流动。它主要用于表单输入元素，如<input>、<textarea>和<select>等。

单向数据绑定

单向数据绑定是指数据从模型流向视图，即数据的变化会自动反映到视图中，但视图中的变化不会自动反映回模型。

Vue.js 中的单向数据绑定主要通过以下方式实现：

使用双大括号 {{ }} 进行文本插值。

使用示例

1. ‌绑定HTML元素的属性 ‌
   <div id="app"> <a v-bind:href="url">Link {{ url }} </a> </div>

2. 在这个例子中，v-bind:href会将Vue实例的url数据属性的值绑定到<a>标签的href属性上。

3. ‌简写形式‌

   由于:是v-bind:的缩写，上面的例子可以更简洁地写作：

   <a :href="url">Link `` {{ url }} </a>

双向数据绑定

双向数据绑定是指数据不仅从模型流向视图，而且从视图流向模型，即数据的变化会自动反映到视图中，同时视图中的变化也会自动反映回模型。Vue.js 中的双向数据绑定主要通过 v-model 指令实现。

v-model：

用于在表单输入元素和应用状态之间创建双向数据绑定。

例如，使用v-model进行双向数据绑定：

<input v-model="message" placeholder="EditMessage">

在这个例子中，输入框的值与Vue实例的message属性双向绑定。用户输入的内容会更新message属性的值，反之亦然。

<template>
  <div>
    <input v-model="message" placeholder="EditMessage">
    <p>{{ message }}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>