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或者VN的CDN不可用，您可以使用脚本模板方法。在Vue准备就绪时，在脚本标记中定义Vue.JS内容，该标记将替换原始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这样的组合

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13; 你只是不要在已经存在的元素上加v-repeat。

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

2 个答案: