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

JavaScript

TomGO

2020-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>

第535篇《VueJs模板化。如何加载外部模板》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答
null 2020.03.11

您可以将这种方法与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手动设置。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android