码迷,mamicode.com
首页 > 其他好文 > 详细

记Vue学习经历-------Vue未定义及无反应

时间:2019-03-05 22:52:37      阅读:266      评论:0      收藏:0      [点我收藏+]

标签:没有   开始   tps   极速模式   sage   效果   顺序   兼容模式   ie兼容   

今天开始接触Vue,并且随手敲代码查看效果

刚兴致勃勃的上手,就碰见了个很纠结的问题,Vue貌似并没有加载成功

技术图片

 

 下面是代码

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 </head>
 7 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 8 <body>
 9     <div id="app">
10         {{ message }}
11     </div>
12     <script>
13     var app = new Vue({
14       el: #app,
15       data: {
16         message: Hello Vue!
17       }
18     })
19 </script>
20 </body>
21 </html>

首先自己XJB调,更换代码块顺序,如下

 1 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 2 <script>
 3     var app = new Vue({
 4       el: #app,
 5       data: {
 6         message: Hello Vue!
 7       }
 8     })
 9 </script>
10 <div id="app">
11     {{ message }}
12 </div>

当然还是不可以正常显示,百度到一条是Vue不兼容IE,而之前浏览器查看时这样显示

技术图片

于是发现当前是在猎豹浏览器的IE兼容模式下,于是切换到极速模式

 

但发现还是不行,检查代码,发现之前XJB改,将js代码放在了元素前面,执行js时无法获取元素,修改代码

 1 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 2 <div id="app">
 3     {{ message }}
 4 </div>
 5 <script>
 6 var app = new Vue({
 7   el: #app,
 8   data: {
 9     message: Hello Vue!
10   }
11 })
12 </script>

好了,Vue正常运行

技术图片

 

记Vue学习经历-------Vue未定义及无反应

标签:没有   开始   tps   极速模式   sage   效果   顺序   兼容模式   ie兼容   

原文地址:https://www.cnblogs.com/shixoamo/p/10480184.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!