01 初识Vue：写一段最简单的Vue程序

小半 • 2022年5月19日上午12:29 • 后端开发 • 阅读 187

阅读这篇文章之前，阁下需要掌握一点点的HTML、CSS、JavaScript代码基础，能看懂基础的标签和语法即可。

1、安装IDE工具

写代码，终归是要找一款像样的开发工具的，总不能上来就拿个txt开干吧，跟约会一样，没有谁会直接到第一次见面就叫女孩子去开房，言归正传，开发工具你来选一款：WebStorm，还是VS Code，自己装一个吧。

我学习用的这台电脑装的是WebStorm 2018，后续就以它为讲解工具了，至于各位观众，你们随意，我干了，哈哈。

2、初识VueJS

（1）用IDE工具创建一个空的项目，就命名为：demo-01

（2）再创建一个index.html文件，用来编写最简单的VueJS

（3）在index.html中引入VueJS库，这里直接使用网上cdn提供的VueJS库

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

（4）编写VueJS代码，显示一段文字

<body>
    <div class="bg">
        {{msg}}
    </div>
    <style>
        .bg{
            background-color: red;
        }
    </style>
</body>

上面的代码中，在HTML文件<body>标签里面增加了一个div标签，并使用.bg这个CSS类样式，到这里为止，还没有编写任何一段VueJS的程序代码，下面引入正题，在<script></script>标签中编写一段简单的VueJS程序：

<body>
    <div class="bg">
        {{msg}}
    </div>
    <style>
        .bg{
            background-color: red;
        }
    </style>
    <script>
        new Vue({
            el:'.bg',
            data:{
                msg:'Hello,VueJS!'
            }
        });
    </script>
</body>

上面的<script></script>标签对中，new Vue()用来创建一个Vue对象，并通过 el:’.bg’ 属性来绑定页面中名为 class=”bg” 的元素到VueJS中，属性 data:{} 用来定义数据变量和变量的值，msg表示变量名称，’Hello,VueJS!’是变量的值，这个变量 msg 被放在了<div>标签中，变量的使用通过{{}}来实现，到此为止，一段最简单的VueJS程序编写完毕。

3、运行index.html文件，查看第一个VueJS程序

在WebStorm开发工具中打开index.html文件，如下图箭头所示，选择其中一款浏览器查看VueJS的运行结果：