第一个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程序就结束了。