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。