Vue.js主要基于MVVM模式（Model-View-ViewModel）和观察者模式。MVVM模式是Vue.js的核心设计模式，它将应用程序的数据（Model）、用户界面（View）和业务逻辑（ViewModel）分离，提高了开发效率和代码的可维护性
下载node.js以及配置环境
首先要使用vue必须先安装node.js并配置好环境
这里就引用大佬的文章做参考
node.js安装及环境配置超详细教程【Windows系统安装包方式】_node 0.12.6 安装 node-echarts 包-CSDN博客
vue官方网站Vue.js - 渐进式 JavaScript 框架 | Vue.js
什么时MVVM模式？
MVVM（Model-View-ViewModel）是一种软件架构设计模式，由微软 WPF（用于替代 WinForm，以 前就是用这个技术开发桌面应用程序的）和 Silverlight（类似于 Java Applet，简单点说就是在浏览器上 运行的 WPF） 的架构师 Ken Cooper 和 Ted Peters 开发，是一种简化用户界面的事件驱动编程方式。 由 John Gossman（同样也是 WPF 和 Silverlight 的架构师）于 2005 年在他的博客上发表。 MVVM 源自于经典的 MVC（Model-View-Controller）模式。MVVM 的核心是 ViewModel 层，负责转 换 Model 中的数据对象来让数据变得更容易管理和使用，其作用如下： 该层向上与视图层进行双向数据绑定 向下与 Model 层通过接口请求进行数据交互
第一个VUE程序
Vue.js 的核心是实现了 MVVM 模式，她扮演的角色就是 ViewModel 层，那么所谓的第一个应用程序就 是展示她的 数据绑定 功能，操作流程如下：
创建一个 HTML 文件 01-hello.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>
</body>
</html>
引入 Vue.js
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script
创建一个 Vue 的实例
<script type="text/javascript">
var vm = new Vue({
el: '#vue',
data: {
message: 'Hello Vue!'
}
});
</script>
el:'#vue'：绑定元素的 ID
data:{message:'Hello Vue!'}：数据对象中有一个名为 message 的属性，并设置了初始值 Hello Vue!
数据绑定到页面元素（视图层）
<div id="vue">
{{message}}
</div>
说明：只需要在绑定的元素中使用 双花括号 将 Vue 创建的名为 message 属性包裹起来，即可实现数据 绑定功能，也就实现了 ViewModel 层所需的效果，是不是和 EL 表达式非常像？
测试：
为了能够更直观的体验 Vue 带来的数据绑定功能，我们需要在浏览器测试一番，操作流程如下：
1、在浏览器上运行第一个 Vue 应用程序，进入 开发者工具
2、在控制台输入 vm.message = 'Hello World' ，然后 回车，你会发现浏览器中显示的内容会直 接变成 Hello World
此时就可以在控制台直接输入 vm.message 来修改值，中间是可以省略 data 的，在这个操作中，我并 没有主动操作 DOM，就让页面的内容发生了变化，这就是借助了 Vue 的 数据绑定 功能实现的；MVVM 模式中要求 ViewModel 层就是使用 观察者模式 来实现数据的监听与绑定，以做到数据与视图的快速响应
