我有一个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并避免这些模板解析错误？
就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实例应该放在你创建组件之后，这样它就能识别它
不确定是否有官方建议的解决方案。这样使用它可能只是一种糟糕的做法。一种摆脱警告的方法是在Vue代码执行之前，使用javascript将脚本标记重新定位到文档的底部：
const scripts = document.querySelector('#app').querySelectorAll('script');
for (let i = 0; i < scripts.length; i++) {
document.body.appendChild(scripts[i]);
}
这里是一个工作示例。它所做的一切都是把你在问题中包含的部分组装起来。它只是起作用。我没有遇到你的问题，所以我不知道你做错了什么。最好下次根据我们的指导方针包括一个例子，而不仅仅是部分片段——在我们的游戏中，魔鬼在于细节，这通常是愚蠢的，我相信你知道：(
为了简单起见，我把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>