html中使用Vue及script标签的引用位置
1、html中Vue is not defined错误
2、那么，新的问题有随之而来了，script标签所引用的脚本放在head中和放在body中有何不同呢？
*-*先给结论：
- 若将js放在head中，js会在被调用时执行
- 若将js放在body中，js会在页面被加载时执行 （放在此处的脚本通常被用来生成页面内容）（注意：放在body中是指放在</ body >标签结束之前的位置）
*-*即一般来说，放在< head ></ head >里面的会比放在< bod ></ body >中的脚本先执行，在head标签中的代码会在页面还未开始绘制之前解析并执行，而在body中的代码则会zai页面渲染的同时被执行。 -具体使用时，可将类似jquery库、vue库等放在head标签中，因为放在此处，则在此页面以后的任何位置都可放心大胆地使用；可将页面显示等独立功能放在body标签中，目的是整个页面载入后，才处理这部分也不会对这个页面的使用造成影响
*-*实例：
-
可一并放入body结束前 亦可加载库功能放至head，显示等功能放至body head标签内和body标签内的加载顺序，通过下面代码一试便知
<head> <script type="text/javascript"> alert(我是head中的代码片段： +i1引用:+document.getElementById(i1) +" i2引用:"+document.getElementById(i2) +" i3引用:"+document.getElementById(i3)); </script></head> <body> <h1 id=i1/> <script type="text/javascript"> alert(我是body中的代码片段1： +i1引用:+document.getElementById(i1) +" i2引用:"+document.getElementById(i2) +" i3引用:"+document.getElementById(i3)); </script> <h1 id=i2/> <script type="text/javascript"> alert(我是body中的代码片段2： +i1引用:+document.getElementById(i1) +" i2引用:"+document.getElementById(i2) +" i3引用:"+document.getElementById(i3)); </script> <h1 id=i3/> <script type="text/javascript"> alert(我是body中的代码片段3： +i1引用:+document.getElementById(i1) +" i2引用:"+document.getElementById(i2) +" i3引用:"+document.getElementById(i3)); </script> </body>
3、html内使用Vue的两种方法
- 例如上文‘ 1、’ 中所用的方法，直接利用script标签，将Vue对象的创建及使用都在script中完成；对于Vue内对象值的显示，则是利用method进行自定义输出到控制台或其他地方。
- 例如上文’2、‘ 中所用的方法，即将Vue对象的创建写在一个js中；而后在html的body中利用div标签，通过使div标签id与js中el名称一样的方式，利用 ’ { { }} ’ 来获取在js中定义的data变量值 ；最后在body标签结束前写上对js引用的script标签。
