初学Vue所遇
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 7 <script> 8 //let定义变量,,const定义常量 9 let app= new vue({ 10 el:'#app',//用于挂载要管理的元素 11 data:{ 12 message:'Hello Vue' 13 } 14 }) 15 </script> 16 </head> 17 <body> 18 <div id="app">{{message}}</div> 19 20 </body> 21 22 </html>
未能显示相应数据,打开开发者模式时发现vue没有引用成功,再次修改代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 7 8 </head> 9 <body> 10 <div id="app">{{message}}</div> 11 12 </body> 13 <script> 14 //let定义变量,,const定义常量 15 let app= new Vue({ 16 el:'#app',//用于挂载要管理的元素 17 data:{ 18 message:'Hello Vue' 19 } 20 }) 21 </script> 22 </html>
修改后,成功显示数据,需要注意的地方是Vue的定义要在Body下面,并且Vue需要首字母大写。