基于:浏览器加载html是从上往下加载。
在学习vue.js的时候,看到demo上写得注释语句:
<!-- JavaScript 代码需要放在尾部(指定的HTML元素之后) -->
<script>
new Vue({
el:'#app',
data: {
message:'Hello World!'
}
});
我尝试了把这段代码放在了head部分,发现demo运行异常,f12看到报错:
错误写法1:
是因为vue.min.js放在了它的下面,而new Vue 的时候,引用的vue.min.js还未发现,所以就会报错,因此vue.min.js应该放在new Vue 的前面。
而如果把这new Vue 的js代码放在引用的js后面,发现虽然不会报错了,但是还是数据显示有问题。
错误写法2:
这是因为,new Vue 的方法里,要绑定到元素id为“app”的div,但是此时还未加载到这个div元素,所以绑定不到,也就无法去改变div里的占位符{{message}}的值。
所以本demo生效有2个前提
1.vue.min.js必须放在new Vue这个js的前面
2.new Vue这个js必须放在指定要绑定的html元素之后。
所以这个demo也有2种写法:
从上往下位置顺序
1.依次是先vue.min.js-->指定html元素部分-->new Vue所在的js
2.依次是 指定html元素部分 --> vue.min.js --> new Vue所在的js
总结:被引用的js,作为资源文件,最好放在最前面,最好是头部,防止自定义的js部分去引用找不到。有一些获取元素对象进行操作的函数,必须放在底部(也可以说是指定div后面),如果js放在开头,DOM元素还没加载,js就会出现无法获取对象的情况,就会报错。(然而错误写法2却没报错,这是为啥?)。而且出于对网页响应速度的考虑,非必要放在头部的js文件最好放在尾部,否者浏览器会等到全部加载或者是下载完js部分,才会去显示页面内容,造成页面阻塞问题,影响用户体验
PS :非前端人员,如果有错误地方欢迎大佬评论指出。