Question

我正在尝试在asp.net mvc应用程序中将角度应用程序重构为Vue。以下作品：

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

<script>

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

</script>

然而，当我将脚本移动到javascript文件时，它起作用了。我想它在加载脚本时有一些时间。这里的最佳做法是什么？

布局：我在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>

Answer 1

您的问题是您在加载DOM之前加载了vue文件。它找不到您的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>

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

加载了Vue脚本

1 个答案: