2.1 Vue.js的使用
在项目中使用Vue.js的方式有很多，本章所要讲解的几种方式较为简单，分别是将Vue.js下载到本地、使用CDN引入Vue.js和通过Node包管理器（Node Package Manager，NPM）安装Vue.js。
1.将Vue.js下载到本地
访问Vue.js的官网，根据需要把相应版本的Vue.js下载到本地，并通过<link>标签将其引用到HTML文件中。Vue.js下载界面如图2-1所示。
图2-1 Vue.js下载界面
下载完成后，将文件放置到项目目录中，可以通过以下代码引入Vue.js（注意文件路径）。
<script src="Vue.js" type="text/javascript" charset="utf-8"></script>
提示 在项目开发中，建议下载及使用开发版本，以便在控制台提示错误时调试程序。
2.使用CDN引入Vue.js
除了可以使用下载的Vue.js以外，还可以在HTML文件中直接使用CDN引入Vue.js。访问网址https://www.bootcdn.cn，在搜索框中输入“vue”，单击下方的“vue”按钮，找到https://cdn.bootcss.com/vue/2.6.10/vue.js。搜索及查找Vue.js的界面，如图2-2和图2-3所示。
图2-2 搜索Vue.js的界面
图2-3 查找Vue.js的界面
找到Vue.js后，复制该地址，在HTML文件中可以通过以下代码直接引用Vue.js。
<script src=" https://cdn.bootcss.com/vue/2.6.10/vue.js "></script>
提示 Vue.js会定期更新，不一定要使用其最新版本。另外，不建议使用Vue.min.js，虽然这个文件更小，但是不提供报错信息功能，不方便代码调试。
3.通过NPM安装
使用NPM安装Vue.js时需要先安装Node.js。使用NPM安装Vue.js属于工程化的开发，在第7章中将详细介绍，因此前7章可以通过下载或引入CDN的方式来使用Vue.js。
4.Vue.js的Hello World程序
下面从一段简单的HTML代码开始，从Hello World程序中感受Vue.js最核心的功能和编程方法，代码如下。
<body>
<div id="app"> {{msg}}</div>
<script src="js/Vue.js"></script>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
msg:'Helo world!'
}
});
</script>
</body>
Hello World程序的渲染效果如图2-4所示。
图2-4 Hello World程序的渲染效果
在上述代码中，可以将代码分为3部分：第1部分是div标签，其中有一个模板语法，使用双大括号（Mustache语法）“{{}}”将动态绑定的数据实时显示出来；第2部分是使用script标签引入Vue.js文件；第3部分是在<script>标签中写入JavaScript代码，这部分代码的功能是创建Vue实例和设置实例选项el、data。