Vue脚本加载

我想在asp.net mvc应用程序中将角度应用程序重构为Vue。以下作品：Vue脚本加载

<div id="app" style="margin-top:100px;"> 
{{message}} 
</div> 

<script> 

const v = new Vue({ 
    el: '#app', 
    data: { 
     message: 'Hello Vue.js!' 
    } 
}) 

</script>

但是，当我将脚本移动到JavaScript文件它dosent工作。我想它是在加载脚本的时候。这里最好的做法是什么？

布局：我负荷跟踪在laysouts文件：

<head> 
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>@ViewBag.Title - My ASP.NET Application</title> 
@Styles.Render("~/Content/css") 
@Scripts.Render("~/bundles/modernizr") 

<script src="~/Scripts/vue.js"></script> 
<script src="~/app/main.js"></script> 

</head>

来源

2017-10-06 Thomas Segato

你在加载div后的脚本吗？ –

查看[DOMContentLoaded事件]（https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded） –

但是，是正常的做法与VUE加载它在加载事件？我没有看到有人这样做。我想我也可以使用jQuery准备好？ –

你的问题是，你加载你的VUE文件加载的DOM之前。由于尚未加载，因此找不到id="app"。

在我的项目中，我有我的所有html，然后在</body>结束标记之前加载vue.js文件。像这样：

<body> 
    <div id="app" style="margin-top:100px;"> 
     {{message}} 
    </div> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script> 
    <script src="/myfile.js"></script> 
</body>

这是防止呈现阻止脚本的最佳做法。当您将JavaScript放入您的<head>中时，它必须在<body>可以开始渲染之前加载这些文件。

来源

2017-10-06 19:41:23

工作。谢谢！ –

Vue脚本加载

回答

相关问题