vue入坑*（一）文件引用顺序

最新推荐文章于 2024-05-17 17:50:07 发布

祝福纱雾荼梻

最新推荐文章于 2024-05-17 17:50:07 发布

阅读量442

点赞数 1

分类专栏： Vue Bug修复

本文链接：https://blog.csdn.net/weixin_41355260/article/details/96994702

版权

Bug修复同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

Vue

1 篇文章 0 订阅

订阅专栏

正确写法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="../node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
</div>
    <script src="../node_modules/vue/dist/lesson1.js"></script>
</body>
</html>

或


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="../node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
</div>
<script>
    var lesson1=new Vue({
        el: '#app',
        data: {
            message: '进击的 Vue.js!'
        }
    });
</script>
</body>
</html>

错误写法


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="../node_modules/vue/dist/vue.min.js"></script>
    <script src="../node_modules/vue/dist/lesson1.js"></script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
</div>
</body>
</html>

原因分析

参考 HTML页面的加载顺序

head标签中会包含一些引用外部文件的代码，从开始运行就会下载这些被引用的外部文件
         当遇到script标签的时候
         浏览器暂停解析（不是暂停下载），将控制权交给JavaScript引擎（解释器）
         如果<script>标签引用了外部脚本，就下载该脚本，否则就直接执行，执行完毕后将控制权交给浏览器渲染引擎

如果此时遇到body标签中的<script>，同样会将控制权交给JavaScript引擎来解析JavaScript
解析完毕后将控制权交还给浏览器渲染引擎。
当body中的代码全部执行完毕、并且整个页面的css样式加载完毕后，css会重新渲染整个页面的html元素

所以<script>写到body标签内靠后比较好，
因为JavaScript 会操作html元素，如果在body加载完之前写JavaScript 会造成JavaScript 找不到页面元素
但是我们经常将<script>写到head中，body中不会有大量的js代码，body中的html代码结构会比较清晰
总结

用于数据绑定的js代码应放在所有待解析的dom之后再执行，一劳永逸的做法是坚持把js文件写在body最后再加载，有助于优化网页加载，也减少了出错率。

祝福纱雾荼梻

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue入坑*（一）文件引用顺序

正确写法<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="../node_modules/vue/dist/vue.min....
复制链接

扫一扫

专栏目录