有没有可能使用Vue创建组件,然后实例化到由PHP应用程序渲染的自定义标签上?类似于“自定义元素轻量级”?
如果我将Vue实例挂载到页面根元素上,它可以“工作”,但是据我所知,在这种情况下,Vue会将整个页面作为模板。我想这可能会导致性能问题,并在其他JavaScript代码干扰DOM时引起麻烦。
目标是逐步替换传统的jQuery代码。对于这个问题,是否有常见的解决方法?
编辑:嵌套这些组件也是一个要求。一个简单的例子是嵌套折叠面板。
编辑2:一些演示问题的fiddle链接。
基于riot.js的工作解决方案: https://jsfiddle.net/36xju9sh/
如果我将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',
});
Vue
实例是独立的,除非它们是组件,因此可以从具有本地化功能的独立Vue
实例开始,然后在完成后将其转换为组件并使用单个 Vue 应用程序。 - Mat J