第一个Vue程序

提前要做的一件事:去网上下好Vue.js文件或者也可以直接通过cdn进行在线编程

第一步:启动IDEA,创建打开一个空的文件夹,并创建vue目录后如下图

 第二步:在vue目录下创建一个名为demo01.html的静态文件,并编码如下

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <!--  1、导入Vue.js  -->
 7     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
 8 </head>
 9 <body>
10     <div id="app">
11         <!-- 显示message中的内容 -->
12         {{message}}
13     </div>
14 
15     <script type="text/javascript">
16         let vue = new Vue({
17             el: "#app",
18             data: {
19                 // 给message属性赋值
20                 message: "Hello Vue !!!"
21             }
22         });23     </script>
24 </body>
25 </html>

第三步:点击IDEA中的任意一个浏览器图标,我这里通过火狐打开,运行效果如下

 

 

 

 

到此,我们的第一个Vue程序就结束了。

posted @ 2021-03-08 13:08  没有你哪有我  阅读(101)  评论(0编辑  收藏  举报