Vue学习第一天，问题，js放置位置问题！

最新推荐文章于 2024-10-31 14:45:19 发布

原创最新推荐文章于 2024-10-31 14:45:19 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端同时被 2 个专栏收录

4 篇文章

订阅专栏

vue

3 篇文章

订阅专栏

本文揭示了Vue.js脚本加载位置对页面元素操作的影响，解释了为什么将JavaScript部分置于HTML元素之后才能确保Vue组件正常工作。

使用vue.js编写的js一定要放到网页元素后面，不然起不了作用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{message}}
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            message:'Hello Vue!'
        }
    });
</script>
</body>
</html>

结果：

如果将js放到页面元素前：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            message:'Hello Vue!'
        }
    });
</script>
<div id="app">
    {{message}}
</div>
</body>
</html>

结果（错误，取不到对应id元素）：