javascript - 从渲染元素加载 JavaScript 状态

Question

只是想知道是否有任何 JavaScript 框架或库可以从现有 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

喜欢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}
})