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

最新推荐文章于 2025-06-16 10:45:14 发布

转载最新推荐文章于 2025-06-16 10:45:14 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/shixoamo/p/10480184.html

文章标签：

#javascript #python #ViewUI

今天开始接触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>