vue双向绑定原理

// Vue双向绑定原理示例代码

// 1. 创建一个Vue实例，使用v-model实现双向绑定
new Vue({
  el: '#app',
  data: {
    message: ''
  }
});

<!-- HTML部分 -->
<div id="app">
  <!-- v-model指令会自动在input元素和data中的message属性之间创建双向绑定 -->
  <input v-model="message" placeholder="输入一些文本">
  <p>你输入的内容是: {{ message }}</p>
</div>

// 解释说明：
// - v-model是一个语法糖，它背后实际上是通过监听input事件来更新data中的值，并且使用value属性来同步显示。
// - 当用户在<input>中输入内容时，Vue会自动更新data中的message属性。
// - 同时，当message属性发生变化时，Vue也会自动更新页面上的显示内容。

// 2. 实现简单的双向绑定逻辑（不使用Vue）
function createInputBinding() {
  const input = document.querySelector('input');
  const p = document.querySelector('p');

  // 初始化时设置p标签的文本内容为input的value
  p.textContent = input.value;

  // 监听input事件，更新p标签的文本内容
  input.addEventListener('input', function () {
    p.textContent = input.value;
  });

  // 监听p标签的点击事件，更新input的value
  p.addEventListener('click', function () {
    input.value = p.textContent;
    input.dispatchEvent(new Event('input')); // 触发input事件以保持同步
  });
}

// 解释说明：
// - 这个例子展示了如何手动实现一个简单的双向绑定逻辑，类似于Vue的v-model。
// - 通过监听input事件来更新DOM中的显示内容，并且通过点击事件来更新input的值。