将 Vue.js 混入现有的 SSR 网站？

Question

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

如果我将 Vue 实例安装到页面根元素上，它“工作”，但是 - 据我了解 - 在这种情况下，Vue 使用整个页面作为模板。我想这可能是一个性能问题，如果其他 javascript 代码与 DOM 发生冲突，会导致麻烦。

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

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

编辑 2：一些小提琴来说明问题。

基于 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 作为 cmets 组件的范围，该组件将嵌套在您页面的某个位置。

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