时间戳

首页 > 解决方案 > 如何使用 Vue 绑定/替换 HTML 中的现有数据

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

问题描述

我已经知道如何在 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）。

标签： htmlvue.js

解决方案

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

<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 引擎方面做得非常出色。

推荐阅读