有没有办法初始化保存初始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或CDN时渲染备用方法对于Vue不可用，您可以使用脚本模板方法。在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这样

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。