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

工作。謝謝！ –

回答

相關問題