Vue.js学习笔记-script标签在head和body的区别-CSDN博客

初学JavaScript，项目需要没有系统学习，只能边查资料边码代码，埋下的坑不知道有多少，还是建议时间充足的情况下系统的将Javascript学习一遍，涉及的HTML知识也务必了解。

问题

最开始在单个html文件中使用了vue.js一些基础功能，在head中使用script标签，

<head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<\head>

自己写的js代码在body中

<body>

<script>
...
</script>
</body>

之后为了调试方便，将自己写的js代码独立成单个文件(独立成单个文件不需要包含script标签)，没多想便直接在head中像使用vue.js将自己的js文件导入，结果就是不起作用

<head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="./my.js"></script>
<\head>

改成在body中将my.js文件导入又正常了。

结论

通过网上的一些文章发现应该是浏览器的加载顺序有关。
常理head在body之前，如果head在body之后，那么先前将my.js在head中导入也是正常的。
08.15 更新：先前js代码未生效其实只是部分代码未生效，未生效的原因是因为自己的js代码中要对一些元素进行修改但如果这段js代码出现在元素前则就无法修改，对于是否在head中还是body中影响并不大，总结就是与浏览器的加载顺序有关。如下，如果js代码在div标签之前出现则p标签不变但还是弹出提示框，反之p标签中为From JavaScript：

<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'From JavaScript'
  }
});
alert("'From JavaScript");
</script>

待续...

转载于:https://www.cnblogs.com/bitor/p/11353616.html