如何使用CMS中的服务器端呈现内容来保存Vue.js？

Question

让我们说，这就是情况：

• 内容通过＆＃34; classic＆＃34;进行管理。 CMS喜欢WordPress或TYPO3
• 内容由CMS提供为完全呈现的HTML和CSS

在前端 Vue.js 应该用于与UI的所有互动。

即使我阅读了vue的大部分文档以及页面Vue.js Server-Side Rendering Guide以及Usage in non-Node.js Environments，我仍然不确定如何使其发挥作用。

示例 ^*

该页面有一个组件，它基本上是一个产品列表。对于使用JavaScript的eveybody，此列表会在顶部获得一个过滤器。

现在，从CMS我得到完整的呈现列表，如：

<div class="product-component">
    <ul class="products">
        <li data-id="1">Product 1</li>
        <li data-id="2">Product 2</li>
        <li data-id="3">Product 3</li>
    </ul>
</div>

JavaScript运行后，它应如下所示：

<div id="product-component">
    <form>
        <select>
            <option value="1">Show Product 1 only</option>
        </select   
    </form>

    <ul class="products"></ul>
</div>

Vue.js中的组件可能是这样的：

<div id="product-component">
    <form>
        <!-- Vue.js logic for the filter -->
    </form>

    <ul class="products">
        <li v-for="product in products">
            {{ product.name }}
        </li>
    </ul>
</div>


var vm = new Vue({
  el: '#product-component',
  data: {
    products: [
        {id: 1, name: 'Product 1'},
        {id: 2, name: 'Product 2'},
        {id: 3, name: 'Product 3'},
    ],
    filterCurrent: null,
  }
});

现在我的问题是：

• 如何将Vue.js挂钩到预渲染模板？
• 如何在运行时更新/注入Vue.js变量（尤其是data）？
  • 这意味着：如何将CMS中的产品列表添加到组件中？
• 由于列表和模板的那些部分已经呈现，Vue.js在初始化后是否必须重新渲染？
• 如何在Vue.js' Lifecycle中表示？

最后但并非最不重要：是否可以设置？

_{^* 代码只是伪代码来说明问题。}

Answer 1

只要您在自己的扩展名中，通过JSON呈现数据就没有问题。 Vue.js可以获取它们并接管前端渲染。