Vue.js学习笔记-script标签在head和body的区别
初学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>
待续...
Vue.js学习笔记-script标签在head和body的区别的更多相关文章
- Vue.js学习笔记（2）vue-router
vue中vue-router的使用:
- Vue.js学习笔记：在元素 和 template 中使用 v-if 指令
f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- Vue.js 学习笔记 第2章 数据绑定和第一个Vue应用
本篇目录: 2.1 Vue实例与数据绑定 2.2 指令与事件 2.3 语法糖 学习任何一种框架,从一个Hello World应用开始是最快了解该框架特性的途径. 我们先从一段简单的HTML代码开始,感 ...
- Vue.js 学习笔记之二：数据驱动开发
在 Vue.js 框架中,与 HTML 页面元素的交互方式没有像原生 JavaScript 接口那么直接,它是通过先在 HTML 元素标签中嵌入一系列类似于普通标签属性的 Vue 指令属性来绑定数据, ...
- Vue.js 学习笔记之三：与服务器的数据交互
显而易见的,之前的02_toDoList存在着一个很致命的缺陷.那就是它的数据只存在于浏览器端,一但用户关闭或重新载入页面,他之前加入到程序中的数据就会全部丢失,一切又恢复到程序的初始状态.要想解决这 ...
- Vue.js 学习笔记之四：Vue 组件基础
到目前为止,这个系列的笔记所展示的都是一些极为简单的单页面 Web 应用程序,并且页面上通常只有几个简单的交互元素.但在实际生产环境中,Web 应用程序的用户界面往往是由多个复杂的页面共同组成的.这时 ...
- Vue.js 学习笔记之五：编译 vue 组件
正如上一篇笔记中所说,直接使用 ES6 标准提供的模块规范来编写 Vue 组件在很多情况下可能并不是最佳实践.主要原因有两个,首先是市面上还有许多并没有对 ES6 标准提供完全支持的 Web 浏览器, ...
- Vue.js——学习笔记
Vue-自学笔记 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅 ...
随机推荐
- NSObject和反射2
NSObject和反射2. commend +R run id stu=[Student student]; // –> Student *stu=[Student student]; : ...
- jQuery的入口函数
原生的JS的入口函数指的是:window.onload = function(){}: 如下所示: //原生js的入口函数.页面上所有内容加载完毕, 才执行.//不仅要等文本加载完毕, 而且要等图片也 ...
- Linux查看进程的启动路径——pwdx
想要找到transfer的启动路径. 一般是ps -ef | grep keyward 但是这个刚好是没有用绝对路径执行. 再用pwdx pid获得
- centos7下面改变亮度
通过改自己的配置文件来改变亮度的方法在我的机器上面是不中用了,我的是台式机,我用的集成显卡,目前我找到的还勉强的方法就是通过安装redshift来改变屏幕的亮度,我就是不喜欢太亮,差点瞎了. 具体是这 ...
- Mysql索引查询失效的情况
首先,复习一下索引的创建: 普通的索引的创建: CREATE INDEX (自定义)索引名 ON 数据表(字段); 复合索引的创建: CREATE INDEX (自定义)索引名 ON 数据 ...
- python中selenium操作下拉滚动条方法
场景:在当前显示的页面元素不可见,拖动下拉条后元素就出来了. 解决方法: 在python中有几种方法解决这种问题,简单介绍下,给需要的人: 方法一)使用js脚本直接操作,方法如下: #将页面滚动条拖到 ...
- Phos 技术服务支持
Phos Mail: tencenter@163.com
- css3_1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- LC 973. K Closest Points to Origin
We have a list of points on the plane. Find the K closest points to the origin (0, 0). (Here, the d ...
- PLSQL连接本地oracle或远程oracle数据库，实现随意切换
转: PLSQL连接本地oracle或远程oracle数据库,实现随意切换 置顶 2018年01月12日 19:36:45 前方一片光明 阅读数 43542 版权声明:本文为博主原创文章,未经博主 ...