Question

我是Vue.js的新手，我已经使用了AngularJS一段时间，我们曾经用角度加载模板，例如，

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>

Answer 1

您只需引用其id。

即可使用脚本标记模板

{
  template: '#some-id'
}

尽管如此，我强烈建议您使用 ~~vueify（如果您使用browserify）或~~ vue-loader（如果您使用webpack），这样您就可以将您的组件存储在漂亮的小{{ {1}}这样的文件。

此外，Vue的作者写了一篇关于外部模板网址主题的好文章：

https://vuejs.org/2015/10/28/why-no-template-url/

Answer 2

你可以试试这个： https://github.com/FranckFreiburger/http-vue-loader

示例：

 new Vue({
        components: {
            'my-component': httpVueLoader('my-component.vue')
        },
        ...

Answer 3

David，这是一个很好的例子，但是确保编译DOM的最佳方法是什么？

https://jsfiddle.net/q7xcbuxd/35/

当我模拟异步操作时，如上例所示，它可以工作。但是一旦我加载外部页面＆＃34;即时＃34; Vue抱怨因为DOM还没准备好。进一步来说： Uncaught TypeError: Cannot set property 'vue' of undefined 有没有比在页面加载时调用$compile更好的方法呢？我曾尝试使用$mount，但这并没有帮助。

<强>更新没关系，我终于想出了怎么做：

Vue.component('async-component', function (resolve, reject) {
    vue.$http.get('async-component.html', function(data, status, request){
        var parser = new DOMParser();
        var doc = parser.parseFromString(data, "text/html");
        resolve({
            template: doc
        });
    });
});

在实际模板中，我删除了

<script id="someTemplate" type="text/x-template"></script>

标签，仅包含html。

（此解决方案需要来自https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.10/vue-resource.min.js的http加载程序）

Answer 4

1。在Vue 2.x中，我建议使用.vue文件坚持约定，但相反，请反转导入顺序：

// template.vue
<template>
  <div class="helloworld">
      <h1>Hello world</h1>
  </div>
</template>

<script>
  import src from './src'
  export default src
</script>

并在单独的文件中

// src.js
export default {
  name: 'helloworld',
  props: {},
  ...
}

然后在组件注册中

import helloworld from './helloworld/template.vue'

new Vue({
 components: {
 'helloworld': helloworld
},
...})

通过这种方式，您可以充分利用两个方面的优势，而不必强迫自己在字符串中构建模板。

2。如果您想延迟加载，显然可以在Vue 2.x

中做到这一点。

new Vue({
 components: {
 'helloworld': () => import(/* webpackChunkName: "helloworld" */ './helloworld/template.vue')
},
...})

这将根据浏览器中该页面的请求加载helloworld.js（其中将包含所有组件的代码）。

当然，以上所有条件都假设您使用的是具有import功能的ES6

Answer 5

至少有两种方法可以实现您想要的目标，其中有Bill Bills Criswell已经提到过的（x模板），但是我认为值得添加一个示例

像这样定义您的组件

Vue.component('my-checkbox', { // id of x-template template: '#my-template' });
使用x模板添加html文件（id应与您在组件中指定的文件匹配）

<script type="text/x-template" id="my-template">...</script>

另一种方法（我更喜欢这种方法）是使用内联模板

像这样定义模板

Vue.component('my-template', {});
添加带有组件和模板的html文件

<my-template inline-template>place for your html</my-template>

请不要忘记添加inline-template属性，否则它将无法正常工作

Answer 6

您可以将此方法与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应该可以使用。

确保在Vue编译有问题的DOM之前完成此操作。或使用$mount手动设置。

Answer 7

使用browserify捆绑所有内容：

//Home.js

import Vue from 'vue';

var Home = Vue.extend({
    template: require('./Home.vue')
});

export default Home;

//Home.vue
<h1>Hello</h1>

// And for your browserify bundle use a transform called stringify

... .transform(stringify(['.html', '.svg', '.vue', '.template', '.tmpl']));

Answer 8

我已经尝试过http-vue-loader，并且工作正常。该库易于使用，并具有良好的文档说明和examples

尽管您不能直接从文件中加载模板，但仍可以将html保留在单独的单文件组件中。您甚至可以跳过<script>...</script>部分。

用法（来自加载程序的文档）

my-component.vue

<template>
    <div class="hello">Hello {{who}}</div>
</template>

index.html

<!doctype html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/http-vue-loader"></script>
  </head>

  <body>
    <div id="my-app">
      <my-component></my-component>
    </div>

    <script type="text/javascript">
      new Vue({
        el: '#my-app',
        components: {
          'my-component': httpVueLoader('my-component.vue')
        }
      });
    </script>
  </body>
</html>

两个文件都应放在同一级别的一个文件夹中

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

8 个答案:

1。在Vue 2.x中，我建议使用.vue文件坚持约定，但相反，请反转导入顺序：

2。如果您想延迟加载，显然可以在Vue 2.x

用法（来自加载程序的文档）