javascript - 有没有一种方法可以初始化一个保留初始 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 不可用时呈现后备方法，你可以使用脚本模板方法。在脚本标签中定义您的 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>