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 的核心库只关注视图层,不仅 ...
随机推荐
- 刚注册blog，先来刷个存在
我想以后能够走数字ic设计的道路,努力复习考研,努力提升专业素养,2017加油!青春加油!
- AcWing：237. 程序自动分析（离散化 + 并查集）
在实现程序自动分析的过程中,常常需要判定一些约束条件是否能被同时满足. 考虑一个约束满足问题的简化版本:假设x1,x2,x3,…x1,x2,x3,…代表程序中出现的变量,给定n个形如xi=xjxi=x ...
- java中判断空字符串和null的判断方法
简单总结几个方法: 1.直观的: if(s == null ||"".equals(s)); //先判断是否对象,再判断是否是空字符串 2.比较字符串长度, 效率高, 比较绕: i ...
- golang——写文件和读文件
之前聊过,操作文件——读写文件,直接调用接口即可. 如果是一直写入操作,写入操作一直进行的,免不了会有,有时一大批数据过来,有时没有一条数据. 鉴于此场景,选择用select....channel 的 ...
- LeetCode 221. 最大正方形（Maximal Square）
题目描述 在一个由 0 和 1 组成的二维矩阵内,找到只包含 1 的最大正方形,并返回其面积. 示例: 输入: 1 0 1 0 0 1 0 1 1 1 1 1 1 1 1 1 0 0 1 0 输出: ...
- 移动端——JS（一）
javascript(简称js)语言在移动前端可以说必不可少,许多效果都是和js相关的,包括现在移动端的一些框架:jqmobi.jqtouch.sencha touch.jquerymobile等等. ...
- linux 执行shell脚本的时候，生成的log文件乱码
脚本执行后,生成的log文件,cat打开没有问题,vim打开就是文字乱码. file1完全没有问题,其他人的file2追加到file中间的时候就出现了这个问题. 因为使用notepad在win7写的, ...
- maven项目无法导入Oracle的jdbc连接jar包【我】
导入一个maven项目,启动一直报错 找不到Oracle的jdbc连接驱动Class, 用Eclipse导入 ojdbc14.jar 连接包,各种方法都无效,无法引入到部署后的lib目录中,可以直接放 ...
- ObjectId初探
ObjectId MongoDB每个集合存储的每个文档必须有一个"_id"键,默认是个ObjectId对象. "_id"作为当前文档在集合的唯一标识. 71st ...
- es6 实现单链表
第一种/** * 链表节点类 */ class Node { constructor(ele) { this.ele = ele; this.next = null; } } /** * 链表类 */ ...