Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular（模块化）和React（虚拟DOM）的优点，虚拟DOM就是把DOM *** 作放到内存中执行。
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
Vue是 MVVM 模式的实现者。
MVVM（Model-View-ViewModel）是一种软件架构设计模式，是一种简化用户界面的事件驱动编程方式。核心是ViewModel层，负责转换Model中的数据对象，让数据变得更容易管理和使用，其作用如下：
该层向上与视图层进行双向数据绑定向下与Model层通过接口请求进行数据交互好处：
低耦合：视图可以独立于Model变化和修改；
可复用：把视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑；
独立开发：开发人员可以专注于业务逻辑和数据的开发，设计人员专注于页面设计。
可测试：界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。
MVVM的组成部分：
MVVM框架已经把最脏最累的一块做好了，我们开发者只需要处理和维护ViewModel，更新数据视图就会自动得到相应更新，真正实现事件驱动编程。
View层展现的不是Model层的数据，而是ViewModel的数据，由ViewModel负责与Model层交互，这就完全解耦了View层和Model层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。
在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，Vue.js就是MVVM中的ViewModel层的实现者，它的核心就是实现了DOM监听与数据绑定。
第一个Vue程序CDN:
压缩版：
完整版：
<body>
<div id="app">
{{message}}
div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js">script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "hello,vue!"
}
});
script>
body>
安装Vue插件
新建文件：Vue Component
带有前缀 v- 称为指令，表示Vue提供的特殊特性，它们会在渲染的DOM上应用特殊的响应式行为。
if判断
<body>
<div id="app">
<h1 v-if="type==='A'">Ah1>
<h1 v-else-if="type==='B'">Bh1>
<h1 v-else-if="type==='D'">Dh1>
<h1 v-else="type==='C'">Ch1>
div>
<script>
var vm = new Vue({
el: "#app",
data: {
type: 'A'
}
});
script>
body>
for循环
<body>
<div id="app">
<li v-for="(item, index) in items">
{{index}}: {{item.message}}
li>
div>
<script>
var vm = new Vue({
el: "#app",
data: {
items: [
{message: '前端'},
{message: '后端'},
{message: '测试'},
{message: '运维'}
]
}
});
script>
body>
方法必须定义在Vue的methods对象中。v-on：事件
<div id="app">
<button v-on:click="sayHi">click mebutton>
div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js">script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "java工程师"
},
methods: {
sayHi: function () {
alert(this.message);
}
}
});
script>
当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。
我们可以用v-model指令在表单 、