Vue.js中的输入元素是否可以进行双向数据绑定？

Question

我有以下代码：

<div id="app">
  {{ message }}
</div>

JS：

myObject = {message:"hello"}

new Vue({
  el: '#app',
  data: myObject
})

更新myObject.message后，div内容也会更新。 现在，当我更新div内容时，以jQuery为例：

$('#myapp').html('world');

该对象未更新。 我也尝试将v-model =“ message”设置为div，但也不会更新。 是否可以绑定数据而不将其附加到输入元素？

Answer 1

您与Vue签订的合同是您将使用viewmodel，而Vue将使其与DOM保持同步。

如果Vue无法提供所需的行为，则可以通过使用指令，组件等扩展Vue来告诉Vue如何执行所需的操作。

因此，原则上，您可以有一条指令，该指令使用MutationObserver来通知您何时替换了DOM的一部分，并对视图模型进行了某些操作。 由于Vue本身提供了结构更好的修改DOM内容的方法，因此，几乎肯定是个坏主意。 双向绑定旨在处理用户与DOM的交互，而不是程序员对其的修改。 Vue的优点在于您不必弄乱DOM。