什么是MVVM（ViewModel）？
ViewModel能够观察到数据的变化，并对视图对应的内容进行更新。
ViewModel能够监听到视图的变化，并能够通知数据发生改变。
Vue.js就是一个MVVM的实现者，他的核心就是实现了DOM监听和数据绑定。
idea集成Vue（第一个小demo用于理解mvvm模式）：
1.直接新建一个空文件夹，用idea打开。或者新建一个。
2.file-setting-plugins
3.搜索vue，安装成功。
5.在线导包：cdn：
<script src="https://cdn.jsdeliver.net/npm/vue@2.5.21/dist/vue.js"></script>
6.新建一个html，引入包
7.新建一个vue对象并绑定
vue基本语法
还可以使用v-bind来绑定元素特性
<span v-bind:title:"message">
鼠标悬停几秒查看此处动态绑定的信息
</span>
<script type="text/javascript">
var app=new Vue({
el:#app,
data:{
message:"我是动态绑定的信息"
}
})
</script>
v-等称之为一个指令。指令带有前缀v-以表示他们是vue提供的特殊属性。
条件判断语句：v-if v-else v-else-if
===三个等于号表示数据类型和数值都相等
循环：v-for
vue绑定事件：v-on指令可以监听dom事件，并且在触发时候运行一些js代码
vue的七大属性：元素 el、数据data、方法methods、
方法必须定义在vue的methods对象中
vue双向绑定
vue.js就是一个mvvm框架，即数据可以双向绑定。
在表单中实现数据双向绑定：v-model指令
在<input> <select> <textarea>元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素。
v-model会忽略所有表单元素的value，checked、selected特性的初始值，而始终将vue实例的数据作为数据来源。
vue组件讲解
组件是vue可复用的实例，说白了就是可以重复使用的模板。
//定义一个vue组件component
Vue.component("第一个组件",{
props:['qin']
template:'<li>{{qin}}</li>'
})
使用props属性传递参数
axios异步通信
网络通信
Axios是一个开源的可以用在浏览器和NodeJs的异步通信框架，他的主要作用就是实现AJAX异步通信。
其功能特点如下：
从浏览器创建XMLHttpRequests
从node.js创建http请求
支持PromiseAPI（JS中的链式编程）
拦截请求和响应
取消请求
自动转换json数据
客户端支持防御XSRF（跨站请求伪造）
为什么要使用AXIOS？
由于vue.js是一个视图层框架，并且作者是严格遵守soc（关注度分离原则）原则的，所以vue.js中并不包含AJAX的通信功能，推荐使用axios，少用jquery，因为dom操作太频繁。
vue实例有一个完整的生命周期：
也就是从开始创建、初始化数据、编译模板、挂载dom、渲染、更新、渲染，卸载等一系列功能，我们称这是vue的生命周期。通俗说这就是vue实例从创建到销毁的过程，就是生命周期。
钩子函数：beforeCreate：创建实例之前执行的钩子事件。
create：实例创建完成后执行的钩子
beforeMount：将编译完成的HTML挂载到对应的虚拟dom时触发的钩子，此时页面没有内容
mounted：编译好的html挂载到页面完成后执行是事件钩子，此钩子函数中一般后做一些ajax请求获取数据进行数据初始化
beforeUpdate：更新之前的钩子
updated：更新之后的钩子
beforeDestory：实例销毁之前执行的钩子
destoryed：实例销毁执行完成后的钩子
mounted这个钩子函数比较重要，因为用于实现请求获取数据。
mouted(){
axios.get('data.json').then(response=>(console.log(response.data)));
}
v-clock解决闪烁问题：自定义标签v-clock
<style>
[v-clock]{
display:none;
}
</style>
使用axios的步骤：
1.使用钩子函数
mouted(){
axios.get('data.json').then(response=>(console.log(response.data)));
}
2.data函数将数据返回
data(){
return{
//请求的返回参数合适，必须和json字符串一样
}
}
计算属性
计算属性的重点突出在属性两个字上，属性是名词，计算是动词。
简单来说：就是一个能够将计算结果缓存起来的属性（将行为转化为静态的属性），可以理解为缓存。
好处：在内存中运行
//计算属性
computed:{
}
computed和methods的区别：
1.里面的方法名不能重名，重名之后methods中方法的优先级高于computed中的。
2.调用方式不同。
调用methods中的方法时：方法名()
调用计算属性中的方法时：方法名
3.同样计算一个值，计算属性中的结果可以缓存在内存中，节约浏览器成本。
计算属性的主要特性就是为了将不经常变化的计算结果缓存起来，以节约我们的系统开销。
插槽slot
在vue.js中我们使用<slot>元素作为承载分发内容的出口，可以应用在组合组件的场景中。
Vue.componet("todo",{
template:
//这里定义插槽
})
Vue.componet("todo-title",{
props:[title],
template:
//这里定义一个替代上面插槽的一个模板
<div>{{title}}</div>
})
methods:{//跟上面插槽模板绑定的事件函数都在这里
remove:function(){
alert("111")
} }
自定义事件内容分发：
Vue.componet("todo",{
template:
//这里定义插槽
})
Vue.componet("todo-title",{
props:[title],
//只能调用当前组件的方法
template:
//这里定义一个替代上面插槽的一个模板
<div>{{title}}</div>
methods:
})
//写在vm中的一个删除方法
removeItems:function(index){
this.todoItems.slice(index,1);//删除一个元素
}
删除操作要在组件中完成，那么组件如何才能删除vue实例中的数据呢，此时就涉及到参数传递和事件分发了。
vue提供的一个自定义事件的功能，使用this.$emit('自定义事件名',参数)
vue对象是前后端进行交接的关键。
vue入门小结：
核心：数据驱动，组件化
优点：借鉴了AngulaJS的模块化开发和React的虚拟dom，虚拟dom就是把dom操作放到内存中执行。
常用属性：
v-if
v-else-if
v-else
v-for
v-bind:给组件绑定参数，简写 :
v-on:简写@
v-model:数据双向绑定
组件化：
组合组件slot插槽
组件内部绑定事件需要使用this.$emit('自定义事件名',参数)
计算属性的特色：缓存计算数据。
遵循Soc关注度分离原则，Vue是纯粹的视图框架，不包含通信功能，推荐使用axios框架做异步通信。
Vue开发一般都要基于NodeJS，实际开发中采用vue-cli脚手架开发，vue-router路由，vuex做状态管理；Vue UI界面一般使用Element UI（饿了么出品），或ICE（阿里巴巴出品），来快速搭建前端项目。
第一个vue-cli项目
vue-cli是官方提供的一个脚手架，用于快速生成一个vue的项目模板
预先定义好的目录结构及基础代码，就好比咱们在创建maven项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架，我们的开发更加快速。
主要的功能：
统一的目录结构
本地调试
热部署
单元测试
集成打包上线
webpack学习使用
webpack是一个现代JavaScript应用程序的静态模块打包器（module bundler）当webpack处理应用程序时，他会递归的构建一个依赖关系图，其中包含应用需要的每个模块，然后将所有模块打包成一个或多个bundle。
通过export显式的暴露接口供其他接口调用。
前端开发和其他主要开发工作的主要区别，首先是前端基于多语言，多层次的编码和组织工作，其次是前端产品的交付是基于浏览器的，这些资源是通过增量加载的方式运行到浏览器端。
模块化的演进
1.通过script标签将js文件加载进来，如果把每个文件都看作一个模块，那么他们的接口是暴露到全局作用域中，也就是定义在window对象下，不同模块的调用都是同一作用域。
这种原始的加载方式暴露了一些弊端：
全局作用域下容易造成变量冲突
文件只能按照script标签的书写顺序进行加载进来
开发人员必须主观解决模块和代码库的依赖关系
在大型项目中，各种资源难以管理，长期积累的问题导致代码库混乱不堪。
2.CommonJS
服务端的的NodeJS遵循CommonJS规范，该规范的核心思想是通过require方法来同步加载所需依赖的其他模块，通过exports或者module.exports来导出需要暴露的接口。
优点：
服务器端模块包便于重用
NPM中已经有超过45万个可以使用的模块包
简单易用。
缺点：
同步的模块加载方式不适合在浏览器环境中，同步意味着加载阻塞，浏览器资源是异步加载的
不能非阻塞的并行加载多个模块。
3.AMD
AMD规范中，要在生命模块时指定所有的依赖，并且还要当作形参传到factory中，对于依赖的模块提前执行。
优点：
适合在浏览器环境中异步加载模块
可以并行加载多个模块
缺点：
提高了开发成本，代码的阅读和书写比较简单，模块定义方式的语义不畅。
不符合通用的的模块化思维方式，是一种妥协的实现。
4.CMD
5.ES6模块
es6的设计思想：尽量静态化，使编译时就能确定这些模块的依赖关系，以及输入和输出变量。之前的CommonJS和AMD都只能在运行时确定这些东西。
优点：容易进行静态分析
面向未来的es6标准
缺点：
原生浏览器端还没有实现这些标准
全新的命令，新版的NodeJS才支持。
6.安装webpack
是一款模块化加载器加打包工具，他能把各种资源，如JS,JSX,ES6,SASS,LESS图片等都作为模块来处理和使用。
作用：把es6开发的软件打包成es5浏览器都支持的规范。
配置文件：
创建webpack.config.js配置文件
entry：入口文件，指定webpack用哪个文件作为入口文件
output：输出，制定webpack把处理完的文件放置到指定路径。
module：模块，用于处理各种类型的文件
plugins：插件，如热更新，代码重用等。
resolve：设置路径指向。
watch：监听，用于设置文件改动后自动打包。
使用webpack：
1.创建项目
2.创建一个名为modules的目录，用于放置JS模块等资源文件。
webpack --watch：实现热部署，监听改变；
vue-router路由：多页面跳转
Vue Router是Vue.js官方的路由管理器，他和vue.js的核心深度集成，让构建。
包含的功能有：
嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于Vue.js过渡系统的视图过渡效果。
细粒度的导航控制。
带有自动激活的CSS Class链接
HTML5历史模式和hash模式，在IE9中自动降级
自定义的滚动条模式。
1.安装路由
2.定义一个专门的文件夹，在src目录下，专门存放路由。
3.导入路由插件，编写路由插件。
4.在Main.js中配置路由
5.在App.vue中使用路由。
Vue+ElementUI
嵌套路由
参数传递以及重定向
