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-marker中提取数据，之后保持该元素的状态。

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

Answer 1

与crazy nastyass honeybadger一样，vue并不关心。你可以做任何你喜欢的事（阅读dom，替换），只要你在实例化vue之前这样做。

This fiddle显示您的方案正常运行。这个想法让我感到有点担心，当然服务器端渲染是解决这个问题的首选方式。 Vue也有server-side rendering，但你可能会因为害怕而被原谅。如果这让你走出一个洞，那就去吧。正如他们所说，做得好，如果你做得不好，要小心： - ）

<强> 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

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

从渲染的元素加载javascript状态

2 个答案: