使用 .NET (MVC) 的模板实现 (VUE) 问题

Question

I'm trying to implement an external template (creating an HTML page), but I can not succeed.我正在尝试实现一个外部模板（创建一个 HTML 页面），但我无法成功。 This page is a ASP.NET MVC page that contains a Vue app.此页面是包含 Vue 应用程序的 ASP.NET MVC 页面。

I want to move the template section of this component to an external file, but whenever I do this it doesn't work.我想将此组件的模板部分移动到外部文件，但每当我这样做时，它都不起作用。

The following (below) does work, but it's not easy to maintain or build upon due to loss of text editing features.以下（下）确实有效，但由于失去了文本编辑功能，维护或建立起来并不容易。

Vue.component('my-component', { template: '#my-component' } Vue.component('my-component', { 模板：'#my-component' }

This is the current code and it works perfectly:这是当前的代码，它完美地工作：

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

To fetch the HTML template from a file you need a async component.要从文件中获取 HTML 模板，您需要一个异步组件。

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

In your example fetch the HTML and return the promise in the Vue.component factory.在您的示例中，获取 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模板.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

If your view is a razor .cshtml template then you can just extract your template to a html file and load that file to your ASP.NET MVC view as raw html code since Vue template is valid html:如果您的视图是 razor .cshtml模板，那么您只需将模板提取到 html 文件，然后将该文件作为原始 html 代码加载到 ASP.NET MVC 视图中，因为 Vue 模板是有效的 html：

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

And in your Vue component it should work with template: '#my-component' as you mentioned.并且在您的 Vue 组件中，它应该与您提到template: '#my-component'一起使用。

Docs: Vue: Edge Cases文档： Vue：边缘案例

PS You can prepare a partial view for your components or create some extension method to make code more readable and add some caching. PS 你可以为你的组件准备一个局部视图或者创建一些扩展方法来使代码更具可读性并添加一些缓存。

Answer 3

The best thing you can do is configure an entire Vue project, so you can use .vue template files.您可以做的最好的事情是配置整个 Vue 项目，这样您就可以使用 .vue 模板文件。 I recently found an article that explains in detail how to achieve this, but it's specifically aimed at browser extensions.我最近发现一篇文章详细解释了如何实现这一点，但它专门针对浏览器扩展。 The steps you have to undertake to achieve it, in this case, are identical for the most part, so I'll just link the article here anyway: https://medium.com/javascript-in-plain-english/how-i-built-a-browser-extension-with-vue-part-2-2c4ab2dd752d .在这种情况下，您必须采取的实现它的步骤在大多数情况下是相同的，所以无论如何我都会在这里链接文章： https ://medium.com/javascript-in-plain-english/how- i-built-a-browser-extension-with-vue-part-2-2c4ab2dd752d 。

Basically what's happening is, you'll configure the Vue project yourself with Webpack to compile the Vue files into one app.js file, which you'll then reference in your file (in the tutorial this file is his app.html).基本上发生的事情是，您将使用 Webpack 自己配置 Vue 项目，以将 Vue 文件编译成一个 app.js 文件，然后您将在文件中引用该文件（在本教程中，此文件是他的 app.html）。 It will then inject its components into the #app element and handle all virtual DOM manipulations.然后它将其组件注入 #app 元素并处理所有虚拟 DOM 操作。

使用 .NET (MVC) 的模板实现 (VUE) 问题

问题描述

3 个解决方案

解决方案1
3 2019-07-05 13:29:53

解决方案2
2 2019-07-07 11:12:54

解决方案3
2 2019-07-10 11:25:13

使用 .NET (MVC) 的模板实现 (VUE) 问题

问题描述

3 个解决方案

解决方案1 3 2019-07-05 13:29:53

解决方案2 2 2019-07-07 11:12:54

解决方案3 2 2019-07-10 11:25:13

解决方案1
3 2019-07-05 13:29:53

解决方案2
2 2019-07-07 11:12:54

解决方案3
2 2019-07-10 11:25:13