Question

我有一个Webforms项目，我想在其中使用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并避免这些模板解析错误？

Answer 1

这是一个可行的示例。它所做的一切都将您问题中包含的部分组合在一起。它只是工作。我没有遇到您的问题，所以我不知道您在做什么错。最好再加上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>

Answer 2

就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实例应在创建组件之后放置，以便其识别。

Answer 3

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

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

在多页WebForms项目中使用VueJS

3 个答案: