在多页 WebForms 项目中使用 VueJS
Posted
技术标签:
【中文标题】在多页 WebForms 项目中使用 VueJS【英文标题】：Using VueJS in multipage WebForms project 【发布时间】：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 用户控件中使用。
【参考方案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 根而不是将整个页面包装在单个根元素中来解决我的问题。以上是关于在多页 WebForms 项目中使用 VueJS的主要内容，如果未能解决你的问题，请参考以下文章