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 的核心库只关注视图层,不仅 ...
随机推荐
- T2695 桶哥的问题——吃桶 题解
校内测试 ------T3 对于这个题,首先想到的应该就是暴力枚举了吧,看看数据范围,60就是白送的啦!(但是我也不知道怎么才20分qwq) 思路分析: 这个题要你求所有套餐的总价值,先看一眼产生套餐 ...
- Web安全（白帽子讲）之第一章
安全问题的本质是信任的问题,并是一个持续的过程. 安全三要素 Confidentiality:机密性-----要求保护数据内容不能泄密 Integrity:完整性-----要求保护数据内容的完整,没有 ...
- DbFunctions 作为 LINQ to Entities 查询的一部分使用时，此方法调用规范 CreateDateTime EDM 函数以创建新的 DateTime 对象。
DbFunctions.CreateDateTime CreateDateTime(year, month,day,hour,minute,second)
- centos 安装mariadb 替代mysql
yum install mariadb-server mariadb systemctl start mariadbmysql -uroot -p默认密码mysql -uroot -pmysql_se ...
- 预处理、const、static、sizeof-说明内联函数使用的场合
1:首先使用inline函数可以完全取代表达式形式的宏定义. 内联函数在C++类中的应用最广的应该是用来定义存取函数.我们定义的类中一般会把数据成员定义成私有的或者保护的,这样,外界就不能直接读写我们 ...
- HearthBuddy 复生 reborn
https://hearthstone.gamepedia.com/Reborn Reborn is an ability that causes a minion to be resummoned ...
- docker save/load以及export/import使用测试
对于有些环境需要离线安装的情况,docker以及docker容器都需要能够支持离线安装,对于docker离线安装,比较简单,按照https://www.cnblogs.com/qq931399960/ ...
- js回调函数(callback)（转载）
学习jquery时,对回调函数感觉很困惑,在晚上找了半天,忽然发现这篇文章很浅显,基本说明了问题.故转载 原文: 自学jquery的时候,看到一英文词(Callback),顿时背部隐隐冒冷汗.迅速go ...
- Python接口测试-以&连接拼接字典数据（get中url请求数据）
get请求的utl数据是这样的,例如:/banner/findBanner?bannerType=1&_=1556107073181 ''' 1-banner图-banner/findBann ...
- JVM菜鸟进阶高手之路一[z]
https://mp.weixin.qq.com/s/qD1LFmsOiqZHD8iZX97OfA? 问题现象 代码如下,使用 ParNew + Serial Old 回收器组合与使用 ParNew ...