javascript - 将 Vue.js 混合到现有的 SSR 网站中？

Question

是否可以/可行地使用 Vue 来创建实例化到由例如呈现的自定义标签上的组件？ PHP 应用程序？某种“自定义元素灯”？

如果我将 Vue 实例挂载到页面根元素上，它“有效”，但据我所知，Vue 在这种情况下使用整个页面作为模板。我想这可能是一个性能问题，如果其他 javascript 代码与 DOM 混淆会导致麻烦。

目标是逐步替换遗留的 jQuery 代码。这个问题有通用的方法吗？

编辑:嵌套这些组件也是一项要求。一个简单的例子是嵌套的可折叠物。

编辑 2:一些 fiddle 来说明问题。

基于 riot.js 的可行解决方案: https://jsfiddle.net/36xju9sh/

<div id="page">
  <!-- This is supposed to show "This is a test." twice. -->
  <test>
    <test></test>
  </test>
</div>
<script type="riot/tag">
  <test>
    <p>This is a test.</p>
    <yield/>
  </test>
</script>
<script>riot.mount('*')</script>

使用 Vue.js 的两种方法: https://jsfiddle.net/89ejjjsy/1/

HTML:

<div id="page">
  <!-- This is supposed to show "This is a test." twice. -->
  <test>
    <test></test>
  </test>
</div>
<script type="text/x-template" id="test-template">
  <p>This is a test.</p>
  <slot></slot>
</script>

Javascript:

Vue.config.ignoreCustomElements = ['test'];

// This won't hit the nested <test> element.
new Vue({
    el:'test',
    template: '#test-template',
});

// This does, but takes over the whole page.
Vue.component('test', {
    template: '#test-template',
});

new Vue({
  el: '#page',
});

Answer 1

您不必使用整个页面作为 Vue 实例范围。例如，使用 #comments-container 作为将嵌套在页面某处的评论组件的范围是非常好的。

您可以在一个页面上有多个 VueJS 实例。