Question

我正在尝试实现外部模板（创建HTML页面），但是我无法成功。该页面是一个包含Vue应用程序的ASP.NET MVC页面。

我想将此组件的 template 部分移至外部文件，但是每当执行此操作时，它都将不起作用。

以下内容（以下）确实可以使用，但是由于缺少文本编辑功能，因此不容易维护或构建。

Vue.component（'my-component'，{ 模板：“＃my-component” }

这是当前代码，它可以正常工作：

var foo = Vue.component('foo', {
template:'
<table class="table">
 <template v-for="(foo, ColName, index) in foos">
    <template v-if="index % 3 == 0">
        <tr>
        </tr>
    </template>
    <th>{{ColName}}</th>
    <td v-if="foo">{{foo}}</td>
    <td v-else> -- </td>
 </template>
</table>',
data: function () { 
  return {
    foos: null,
    NumColuns: 3 
  }
}, 
mounted() { 
 axios
  .get('/api/account/foo/')
  .then(response => {
    this.foos = response.data                
   })
  .catch(error => {
    console.log(error1)
      this.errored = true
  })
  .finally(() => this.loading = false)
}
});
var foo = new Vue({ 
  el: '#foo-vue' 
});

Answer 1

要从文件中获取HTML模板，您需要一个异步组件。

文档：https://vuejs.org/v2/guide/components-dynamic-async.html

在您的示例中，获取HTML并在Vue.component工厂中返回诺言。

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/vue"></script>
</head>

<body>

  <div id="app">
    <foo></foo>
  </div>

  <script>
    var foo = Vue.component('foo', () => {
      return fetch('/template.html')
        .then((response) => response.text())
        .then((html) => {
          return {
            template: html,
            data: function () {
              return { foos: null, NumColuns: 3 }
            },
            mounted() {
              this.foos = [{ foo: 1, ColName: "A" }];
              //  axios.get('/api/account/foo/').then(response => {
              //     this.foos = response.data
              //    })
              //   .finally(() => this.loading = false)
            }
          };
        });
    });
    var foo = new Vue({
      el: '#app'
    });
  </script>
</body>

</html>

template.html

<table class="table">
 <template v-for="(foo, ColName, index) in foos">
    <template v-if="index % 3 == 0">
        <tr>
        </tr>
    </template>
    <th>{{ColName}}</th>
    <td v-if="foo">{{foo}}</td>
    <td v-else> -- </td>
 </template>
</table>

Answer 2

如果您的视图是剃须刀.cshtml模板，则由于Vue模板是有效的html，您可以将模板提取为html文件并将该文件作为原始html代码加载到ASP.NET MVC视图中。

<!-- in cshtml view -->
<script id="my-component" type="text/x-template">
    @Html.Raw(File.ReadAllText(Server.MapPath("~/Path/To/Template/my-component-template.html")))
</script>

在您的Vue组件中，它应该与您提到的template: '#my-component'一起使用。

文档：gallery

P.S。您可以为组件准备局部视图，也可以创建某种扩展方法以使代码更具可读性并添加一些缓存。

Answer 3

最好的办法是配置整个Vue项目，以便可以使用.vue模板文件。我最近找到了一篇文章，详细解释了如何实现此目的，但是它专门针对浏览器扩展。在这种情况下，您必须执行的步骤在大多数情况下是相同的，因此无论如何，我将仅在此处链接本文：https://medium.com/javascript-in-plain-english/how-i-built-a-browser-extension-with-vue-part-2-2c4ab2dd752d。

基本上是这样，您将使用Webpack自行配置Vue项目，以将Vue文件编译为一个app.js文件，然后在文件中引用该文件（在本教程中，此文件是他的app.html ）。然后，它将其组件注入#app元素并处理所有虚拟DOM操作。

使用.NET（MVC）的模板实现（VUE）的问题

3 个答案: