在多页 WebForms 项目中使用 VueJS答案

【问题标题】：Using VueJS in multipage WebForms project在多页 WebForms 项目中使用 VueJS
【发布时间】：2019-04-04 16:52:15
【问题描述】：

我有一个网络表单项目，我想在其中使用 VueJS，但在设置根元素时遇到问题。

如果我将我的内容包装在 <div id="app"></div> 元素中并将其传递给 Vue 实例：

 new Vue({
    el: '#app',
    components: {
        foo
    },
    data: {
    },
    methods: {
    }
});

带有测试组件如：

var foo = Vue.component('foobar', {
    props: [
        'title'
    ],
    data: function () {
        return {
        };
    }
});

还有一个示例组件内联模板：

<foobar inline-template title="Hello world">
    <div>
        <h1>{{title}}</h1>
    </div>
</foobar>

我最终得到一个 Vue 控制台错误，因为它试图将页面的全部内容解析为 Vue 模板，并且在某些脚本管理器脚本上失败并出现错误 [Vue warn]: Error compiling template:：

<div id="app">
    <script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$manScript', 'aspnetForm', 
['tctl00$ctxM','','tctl00$pnlMessagePlaceholder$pMP',''], [], [], 90, 
'ctl00');
//]]>
</script>

如何在 Web 表单项目中包含 VueJS 并避免这些模板解析错误？

【问题讨论】：

您是否尝试过在 Web 表单页面的头部引用您的捆绑包？然后 Vue 应该能够将应用程序注入到#app 元素中。
@Jelle - 抱歉，我不确定你的意思。脚本已经在头部引用了，我刚刚得到了包裹整个页面内容的<div id="app"> 元素，Vue 将如何注入内容？我已将组件设置为 inline-template 类型，以允许它们在标准的 asp.net 用户控件中使用。

标签： c# asp.net vue.js webforms vuejs2

【解决方案1】：

就 Vue.js 而言，您提供的代码如下所示：

html文件

<div id="app">
<foo-component title="Hello world">   
</foo-component>
</div>

javascript 文件

var foo = Vue.component('foo-component', {
    props: [
        'title'
    ],
    data: function () {
        return {
        };
    },
  template:` <div>
        <h1>{{title}}</h1>
    </div>`
    });

new Vue({
    el: '#app'
});

您已将组件注册为 foo-component，但随后您调用了“foobar”。此外，您的 Vue 实例应该在您创建组件之后放置，以便它识别它。

【讨论】：

抱歉给您带来了困惑 - foobar / foo-component 只是一个错字，我会更正。该组件也是在 Vue 实例之前创建的。

【解决方案2】：

不确定是否有官方建议的解决方案。像这样使用它可能只是一个不好的做法。摆脱警告的一种巧妙方法是在执行 Vue 代码之前使用 javascript 将脚本标签重新定位到文档正文的底部：

const scripts = document.querySelector('#app').querySelectorAll('script');
for (let i = 0; i < scripts.length; i++) {
   document.body.appendChild(scripts[i]);
}

【讨论】：

谁投了反对票，请给个理由？

【解决方案3】：

这是一个工作示例。它所做的一切都将您包含在问题中的部分组合起来。它只是工作。我没有遇到你的问题，所以我不知道你做错了什么。最好再包含一个example per our guidelines，而不仅仅是部分片段——在我们的游戏中，魔鬼在细节中，而且它通常很愚蠢，我相信你知道:)

为了简单起见，我把js直接放到了页面中，所以这就是全部了。（后面的代码就是生成的空类）。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="scripts/vue.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div id="app">
                <foobar inline-template title="Hello world">
                    <div>
                        <h1>{{title}}</h1>
                    </div>
                </foobar>
                <script>
                    Vue.component('foobar', {
                        props: [
                            'title'
                        ],
                        data: function () {
                            return {
                            };
                        }
                    });
                    new Vue({
                        el: '#app',
                        //components: {
                        //    foo
                        //},
                        data: {
                        },
                        methods: {
                        }
                    });
                </script>
            </div>
        </div>
    </form>
</body>
</html>

【讨论】：

您误解了这个问题 - 阅读有关 Vue 尝试解析根元素中的嵌套脚本的内容，例如webforms <script> 由更新面板等生成的标签......你的例子不包括这个，所以它当然可以工作。这是一个非常老的问题，我最终通过为每个“事物”设置一个 Vue 根而不是将整个页面包装在单个根元素中来解决我的问题。