有没有办法初始化保留初始HTML的Vue对象

Question

我想使用Vue.js来更轻松地操作DOM,但是当我初始化Vue对象时,它会在操作之前首先重写使用后端生成的初始数据.

例如,我有这个标记:

<ul id="list">
  <li v-repeat="elements" v-text="content">a</li>
  <li v-repeat="elements" v-text="content">b</li>
  <li v-repeat="elements" v-text="content">c</li>
</ul>

然后我想使用new Vue({ el: '#list' })它以便以某种方式读取已经存在的标记并在通过编辑操作之前保留它$data.这在某种程度上是可以实现的吗？

Answer 1

我认为这不可能按照您想要的方式进行。Vue.JS 不直接操作 DOM。它读取 DOM 元素，将它们转换为渲染函数，并用渲染函数的结果替换整个元素。

您可能应该使用 JQuery 扫描 DOM 并填充 $data 对象（可能还有 Vue 的模板字符串），然后使用生成的数据初始化您的 Vue 实例。

但总的来说 - 您应该重新考虑您的应用程序逻辑，因为您似乎正在做一些非常复杂的事情，这可能会更容易解决。生成 DOM 模板的任何内容都可能直接呈现为 JS 变量，甚至可以通过 AJAX 调用进行访问...

如果您想在客户端不支持 JS 或 Vue 的 CDN 不可用时渲染后备方法，您可以使用脚本模板方法。在 script-tag 中定义 Vue.JS 内容，当 Vue 准备就绪时，它将替换原始 DOM。

例子：

function loadVue() {
  new Vue({
    data: { values: [ 'aaa','bbb','ccc' ] },
    template: '#list-template',
    el: '#list'
  })
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>

<ul id="list">
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <button onclick="loadVue()">Load Vue.JS</button>
</ul>

<script type="text/x-template" id="list-template">
<ul id="list">
  <li v-for="v in values">{{v}}</li>
</ul>
</script>