你看见本文时，你肯定已经对前端有一定的了解，或者已经使用过其他类似vue的框架。如：react、angularJS等等。有的人一上来直接就是用脚手架来学习 vue 的基础知识，不推荐这样去做。下面将介绍怎样通过 <script> 标签引入 vue 的 JS 库文件，然后通过 new Vue() 的方式去使用 Vue。
进入 https://vuejs.org/v2/guide/installation.html 地址，点击页面下面的 “Development Version” 按钮。去下载一个开发版本的 vue 库，该库下面包含了完整警告和调试模式。使用开发库，当我们的代码有些地方出现不推荐写法时，将在控制台给出告警信息。
假设我已经将 vue 的库文件下载下来，vue 版本为 2.6。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>学习 VUE</title>
<script type="text/javascript" src="../libs/vue-2.6/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>如果仅仅为了学习，我们也可以直接使用 CDN 的方式去安装 VUE。即在 <script> 标签的 src 元素中填写一个 VUE 网络地址。这样你能够使用最新版本的 VUE，如下：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
在生产环境，建议链接到特定的版本号并进行构建，以避免新版本导致程序以外出错。如下：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
如果您使用的是本机ES模块，也有与ES模块兼容的构建方式，如下：
<script type="module"> import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.esm.browser.js' </script>
你能通过浏览器打开 https://cdn.jsdelivr.net/npm/vue 地址浏览 vue 的源码。
实例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>学习 VUE</title>
<!--<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>总结
手动创建一个 Vue 对象，这个 Vue 对象的 DOM 上下文为 id="app" 的 DIV 元素，并且该 Vue 对象内部定义了一个 message 数据，最后将 message 变量中的数据显示在 DOM 中。这也说明，我们在一个页面可以创建多个 Vue 对象，每个 Vue 对象绑定到不同的 DOM 上下文。
知识点
（1）el：绑定一个 DOM 元素到当前 Vue，通过Vue的方式去操作数据、DOM等
（2）data： 该字段定义了 Vue 中可以用到的数据，即允许使用 {{}}、v-bind 等指令使用，也是响应式的
（3）{{ message }}： 将 Vue data 字段中的 message 数据输出到当前位置
还有更多的知识，请继续阅读接下来的文章。
川公网安备51010802032098
