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实例。

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

1 个答案: