从渲染的元素加载 JavaScript 状态

Question

只是想知道是否有任何javascript框架或lib可以从现有的DOM元素加载部分初始状态。

reactjs 或 vuejs 可以做这样的事情吗？

因此，为了非常清楚，我想在服务器上渲染页面并将一些元素标记为模型的一部分。这个想法是能够用一些重要的数据呈现html，这样搜索引擎就可以在没有js的情况下获得它。常规使用将具有完全相同的页面，但是一旦js启动，我希望它从标记的字段中获取数据并添加到当前状态。

即

<h1 x-marker="pageTitle">Page Title</h1>
<h2>{{ subtitle }}</h2>

var state = {
subtitle: 'This is subtitle',
}

搜索引擎看到这个：

<h1>Page Title</h1>
<h2>{{subtitle}}</h2>

普通用户看到这个：

<h1>Page Title</h1>
<h2>This is subtitle</h2>

但是状态应该是

var state = {
pageTitle: 'Page Title',
subtitle: 'This is subtitle',
}

所以我希望它最初从 x 标记中提取数据，然后维护该元素的状态。

我可以自己实现这种事情，只是想检查是否已经存在这样的事情。

Answer 1

就像疯狂讨厌的蜜獾一样，vue 不在乎。你可以做任何你喜欢的事情(阅读dom，替换(，只要你在实例化vue之前做。

此小提琴显示您的方案工作正常。这个想法让我感到有点笨拙，当然服务器端渲染是处理这个问题的首选方法。Vue 也有服务器端渲染，但你可以原谅你害怕。如果这让你摆脱困境，那就去做吧。正如他们所说，要好，如果你不能做好，要小心：-(

.HTML

<div id="crazyNastyass">
<h1 id="pageTitle">Page Title</h1>
<h2>{{state.subtitle}}</h2>
</div>

.JS

var state = {
pageTitle:null,
subtitle: 'This is subtitle'
}
var titleNode = document.getElementById('pageTitle');
state.pageTitle = titleNode.innerHTML;
titleNode.innerHTML = '{{state.pageTitle}}'
var vm = new Vue({
el: '#crazyNastyass',
data: {state:state}
})

Answer 2

我强烈建议不要使用您提出的方法，并研究如何为您的 React 应用程序进行服务器端渲染。

在 React 文档中有一些关于服务器渲染的内容： https://facebook.github.io/react/docs/react-dom-server.html#rendertostring

接下来.js是一个很好的框架来帮助你解决这个问题 https://github.com/zeit/next.js