zoukankan      html  css  js  c++  java
  • 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>
    
    

    待续...

  • 相关阅读:
    安装xshell6
    eclipse的安装和汉化
    collectd+infludb+grafana实现tomcat JVM监控
    百度网站统计和CNZZ网站统计对比
    shell,计算指定行的和,计算指定列的和
    我为什么要写博客
    kafka监控之topic的lag情况监控
    用rundeck启动tomcat报错
    xwiki升级8.8.4
    矩阵掩膜操作
  • 原文地址:https://www.cnblogs.com/bitor/p/11353616.html
Copyright © 2011-2022 走看看