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 的核心库只关注视图层,不仅 ...
随机推荐
- 日期与时间（C/C++）
C++继承了C语言用于日期和时间操作的结构和函数,使用之前程序要引用<ctime>头文件 有四个与时间相关的类型:clock_t.time_t.size_t.和tm.类型clock_t.s ...
- node中的stream（流）内置模块
stream是Node.js提供的又一个仅在服务区端可用的模块,目的是支持“流”这种数据结构. 什么是流?流是一种抽象的数据结构.想象水流,当在水管中流动时,就可以从某个地方(例如自来水厂)源源不断地 ...
- Django-模板继承/组件/自定义标签
一.标签tags for标签 遍历每一个元素: 写个for,然后 tab键自动生成for循环的结构,循环很基础,就这么简单的用,没有什么break之类的,复杂一些的功能,你要通过js def get ...
- WebSSH2 界面ssh（转载）
工具:Virtual Machines14.1 系统环境:CentOS 7 64位 (2个) IP:192.168.163.138 IP:192.168.163.141 概述:在138系统中安装部 ...
- WIN7系统TortoiseSVN右键没有菜单解决办法
TortoiseSVN右键菜单不显示解决办法,亲测有效.其他操作系统解决办法类似,如有问题,给我留言. 百度经验:jingyan.baidu.com 工具/原料 TortoiseSVN 百度经验: ...
- Flume-Exec Source 监控单个本地文件
实时监控,并上传到 HDFS 中. 一.Flume 要想将数据输出到 HDFS,须持有 Hadoop 相关 jar 包 若 Hadoop 环境和 Flume 在同一节点,那么只要配置 Hadoop 环 ...
- article收藏
sca https://github.com/spring-cloud-incubator/spring-cloud-alibaba spring-cloud-document https://git ...
- jdbc结合commons-dbutils-1.6.jar做素材数据处理的例子
前两个 insertTitle,insertOpening 是刚开始做的针对单一素材数据解析及写入的方法,后面一个 insertMaterial 是后期封装的一个可处理各种素材导入的方法,main方法 ...
- js对象和jQuery对象的区别
(1)js对象的三种基本定位方式 (A)通过ID属性:document.getElementById() (B)通过NAME属性:document.getElementsByName() (C)通过标 ...
- eclipse下生成Java类图和时序图，生成UML图
1.安装和使用AmaterasUML 安装AmaterasUML前,需要先安装GEF采用eclipse在线安装方式安装就好.eclipse在线安装GEF的地址:http://download.ecli ...