VueJs模板化。如何加载外部模板

TomGO2020-03-11

我是Vue.js的新手，我已经使用AngularJS一段时间了，在过去我们一直使用Angular来加载模板，例如，

template: '/sometemplate.html',
controller: 'someCtrl'

我们如何在Vue中做这样的事情，而不是像这样在JavaScript中保留大型HTML模板，

new Vue({
  el: '#replace',
  template: '<p>replaced</p>'
})

小型模板可以这样做，但大型模板是否可行？

是否有办法加载外部模板HTML或在Vue中的脚本标签内使用HTML模板？

<script type="x-template" id="template>HTML template goes here</html>

2020/03/11 10:25:53

您可以将这种方法与superagent一起使用：

var promise = superagent.get("something.html")
    .end(function (error, response) {
        if (error) {
            console.error("load of something.html failed", error));
            return;
        }

        var parser = new DOMParser()
        var doc = parser.parseFromString(response.text, "text/html");
        document.body.appendChild(doc.scripts[0]);
    });

只需将<script>基于标签的模板放在something.html服务器上即可。

如果您使用的是jQuery，则.load应该可以工作。

只需确保在有关DOM由Vue编译之前完成即可。或使用$ mount手动设置。

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer