初识Vue

初学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需要首字母大写。

posted @ 2020-03-31 09:50  默緣心  阅读(122)  评论(0)  编辑  收藏  举报