记Vue学习经历-------Vue未定义及无反应
Posted shixoamo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了记Vue学习经历-------Vue未定义及无反应相关的知识，希望对你有一定的参考价值。
今天开始接触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未定义及无反应的主要内容，如果未能解决你的问题，请参考以下文章