如何使用 Vue 绑定/替换 HTML 中的现有数据

Question

我已经知道如何在 JavaScript 中为 Vue 组件等制作模板。

但是，假设我在服务器端生成了 HTML(不是使用 Vue，而是使用称为 UTL 的特定语言(

<table>
<tr>
<td>[% example_var; %]</td>
<td>[% another_var; %]</td>
</tr>
</table>

它会在前端渲染如下：

<table>
<tr>
<td>Some Field</td>
<td>Some Other Value</td>
</tr>
</table>

稍后，我可能计划绑定/更改 HTML 中的数据，并将其绑定到 Vue 组件。比如添加新行等，但我希望在某些情况下至少将后端生成的值作为起点或回退。

我应该如何处理这个问题？理想情况下，我想避免编写 2 个模板(服务器端和 JS(。

Answer 1

您可能希望使用后端中的数据从脚本标记中填充组件的初始数据。

<script>
var app = new Vue({
el: '#app',
data: {
message: '[% example_var; %]' // <<< your template renderer engine tags
}
})
</script>

但是，在我的理解中，做你想做的事情的最佳实践是使用商店(vuex(。让存储从后端加载初始值，让组件从此存储呈现数据。

现在，如果您需要出于 SEO 目的从后端打印在 html 标签中的这些值，那么您正在寻找使用 Vue 作为模板渲染引擎的服务器端渲染(请注意，Vue 使用浏览器的 DOM 来提供 html 输出(。在这种情况下，您需要拦截所有对服务器的 http 请求，运行虚拟浏览器的 DOM 服务器端以使其使用所需数据呈现您的组件，获取 DOM 的 HTML 输出并将其作为请求的响应传递。

如果你想节省一些白发，我建议你看看Nuxt.js因为这些家伙在为Vue创建SSR引擎方面做得非常出色。