将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作为注释组件的范围，它将嵌套在页面的某个位置。

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