有没有办法初始化一个保留初始 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-Template 都可能直接渲染成一个 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>

Answer 2

没有理由不能像这样使用现有元素和v-repeat 的组合

new Vue({
    el: '#list',
    data: {
        elements: [{
            content: "d (v-repeat)"
        }, {
            content: "e (v-repeat)"
        }, {
            content: "f (v-repeat)"
        }]
    }
});

<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.11.4/vue.min.js"></script>
<ul id="list">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li v-repeat="elements" v-text="content">c</li>
</ul>

您只是不要将v-repeat 放在已经存在的元素上。