如何在 VueJs 的模板中加载外部 html 文件

我是 vue js 的新手。我只是在创建一个简单的项目，我只是通过 CDN 包含 vuejs。不使用节点/npm 或 cli。

我将所有 html 标记保存在单个 html 中，随着它的增长，它看起来很乱。我试图将 html 拆分为视图，并希望通过类似于 angularJs 的 ng-include 的方式包含它

我以前在 Angular 中工作过，有 ng-include 来加载外部 html 文件。我正在寻找与vue中类似的东西。重点是将我的 html 文件拆分为更易于维护的单独文件。

遇到过 <template src="./myfile.html"/> 但它不起作用有人可以帮我吗

原文由 Khaleel 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 577

这实际上非常容易，但你需要记住一些事情。在幕后，Vue 将您的 html 模板标记转换为代码。也就是说，您看到的每个定义为 HTML 的元素都会被转换为 javascript 指令以创建一个元素。模板很方便，所以单文件组件（vue 文件）不是你可以在不使用 webpack 之类的东西编译的情况下完成的。相反，您需要使用其他一些模板方式。幸运的是，还有其他定义模板的方法不需要预编译并且可以在这种情况下使用。

1 - 字符串/模板文字

例如： template: '<div>{{myvar}}</div>'

2 - 渲染功能🤢

例如： render(create){create('div')}

Vue 有其他几种创建模板的方法，但它们不符合标准。

这是两者的示例：

AddItem.js - 使用渲染😠函数

'use strict';
Vue.component('add-item', {
  methods: {
    add() {
      this.$emit('add', this.value);
      this.value = ''
    }
  },

  data () {
    return {
      value: ''
    }
  },

  render(createElement) {
    var self = this
    return createElement('div', [
      createElement('input', {
        attrs: {
          type: 'text',
          placeholder: 'new Item'
        },
        // v-model functionality has to be implemented manually
        domProps: {
          value: self.value
        },
        on: {
          input: function (event) {
            self.value = event.target.value
            // self.$emit('input', event.target.value)
          }
        }
      }),
      createElement('input', {
        attrs: {
          type: 'submit',
          value: 'add'
        },
        on: {
          click: this.add
        }
      }),
    ])
  }
});

ListItem.js - 使用模板文字（反引号）

 'use strict';
Vue.component('list-item', {
  template: `<div class="checkbox-wrapper" @click="check">
    <h1>{{checked ? '☑' : '☐'}} {{ title }}</h1>
  </div>`,
  props: [
    'title',
    'checked'
  ],
  methods: {
    check() {
      this.$emit('change', !this.checked);
    }
  }
});

和html

 <!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>
  <script src="ListItem.js"></script>
  <script src="AddItem.js"></script>
</head>
<body>
<div id="app">
  <add-item @add='list.push({title:arguments[0], checked: false})'></add-item>
  <list-item v-for="(l, i) in list" :key="i" :title="l.title" :checked="l.checked" @change="l.checked=arguments[0]"></list-item>
</div>
<script type="text/javascript">
new Vue({
  el: '#app',
  data: {
    newTitle: '',
    list: [
      { title: 'A', checked: true },
      { title: 'B', checked: true },
      { title: 'C', checked: true }
    ]
  }
});
</script>
</body>
</html>

TL;博士；

请参阅： https ://repl.it/OEMt/9

原文由 Daniel 发布，翻译遵循 CC BY-SA 3.0 许可协议

如何在 VueJs 的模板中加载外部 html 文件

1 - 字符串/模板文字

2 - 渲染功能🤢

TL;博士；

请参阅： https ://repl.it/OEMt/9

你尚未登录，登录后可以

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

vue2.6，打包后app.js，8M,chunk.js，6M，加载打开页面很慢，有什么办法减少，打开页面快一些？

Element Plus表格组件如何呈现复杂布局如图？

多个vue项目，后台接口都是一样的，每个vue项目的同一个页面都只是一小部分修改，怎样把公共的代码提出来复用？

如何实现从一个div中拖拽dom到另一个div容器？

electron如何屏蔽鼠标上的前进后退快捷键？

Stack Overflow 翻译