代码之家 › 专栏 › 技术社区 › DGibbs

在多页WebForms项目中使用VueJS

vuejs2 webforms vue.js asp.net c#

0

DGibbs · 技术社区 · 6 年前

我有一个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表单项目中包含VueJ并避免这些模板解析错误?

2 回复 | 直到 6 年前

1

0

Kiki 6 年前

至于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组件,但随后又调用了“foobar”。此外,应在创建组件后放置Vue实例,以便其识别该组件。

2

0

i-- 6 年前

不确定是否有官方建议的解决方案。这样使用可能是一种不好的习惯。消除警告的一种黑客方法是,在执行Vue代码之前,使用javascript将脚本标记重新定位到文档正文的底部:

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

3

0

Reg Edit 5 年前

下面是一个有效的例子。它所做的一切都是把你的问题中包含的部分组装起来。这很管用。我没有遇到你的问题,所以我不知道你做错了什么。最好包括 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>