一.是什么
专注于视图，view视图层就当成模板
1.前端做的事儿
<1>网络通信
axios：前端的通信框架
<2>页面跳转
vue-router
<3>状态管理
vuex
<4>视图层
2.视图层
html+css+js
二.为什么用
1.vue的核心是实现了前端的MVVM模式
2.MVVM的核心就是modelview
三.怎么用
1.vue入门——IDEA直接用
<1>IDEA下载插件方式使用vue组件
<2>IDEA中使用cdn导入vue
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<3>vue编写
创建vue对象
绑定标签
写一个数据
拿出来数据
<4>测试
<5>MVVM解析
监听，双向绑定；
效果就是viewmodel根据数据变化立马响应给给前端页面，不需要刷新页面；
达到了前端和后端完全解耦的需求，后端只需要给前端数据就行（json键值对）
2.vue指令与7大属性
<1>v-:指令
v-bind:
作用和{{}}一样
v-on:监听，绑定事件
v-if
v-else
v-elseif
<2>7大属性
4.vue基础语法
<1>判断
I.if..else
II.elseif
<2>循环
<3>vue绑定事件
v-on与methods对象
5.基础用法总结
数据放在data： {}；
方法放在methods： {}；
绑定事件用v-on;
绑定数据{{}}；
6.vue核心——双向绑定
vue.js时一个MVVM框架，即数据双向绑定：
数据变视图跟着同步改变；视图变数据跟着同步改变（vue精髓）
v-model:（表单中使用双向数据绑定）
<1>text属性
<2>textarea属性
<3>input单选框
<4>下拉框
7.vue组件——自定义标签
<1>vue组件其实就是自定义标签
<2>组件中传递数据
8.网络通信——Axios异步通信
<1>IDEA中settings，javaScript更改es6
<2>为什么用
vue.js是视图层框架，严格遵守sos原则，所以不包含Ajax的通信功能，所以推荐使用Axios框架实现ajax异步通信
<3>Axios使用
I.创建一个json文件，编写一段假数据
II.使用cdn方式在线下载获取Axios
III.获取json数据并响应，测试是否异步
IV.将json数据渲染上页面
i.json数据渲染到前端
ii.解决闪烁问题
9.vue——计算属性
<1>是什么
计算出来的结果，保存到属性中；重点在属性；想像成缓存
<2>为什么用
内存中运行：虚拟DOM;
特性就是为了将不经常变化的计算结果进行缓存；对于前端，每节约一点，并发情况就能占优势
<3>怎么用
I.获取当前时间戳，分别用方法调和计算属性调
II.测试
10.vue——插槽slot
11.npm命令
四.实战
0.vue项目目录结构
1.vue-cli
<1>是什么
脚手架，快速生成一个vue的项目模板；
<2>为什么用
功能：（类似maven的功能）
统一的目录结构
本地调试
热部署
单元测试
集成打包上线
<3>怎么用
安装：
I.环境
Node.js:官网下载(会自动配置环境)
Git
镜像
II.确认是否安装成功
node -v
npm -v
III.cnpm
i.npm是软件包管理工具，国外下载慢，用国内淘宝镜像加速器cnpm；
ii. npm install cnpm -g
iii.cnpm的安装位置
IV.安装vue-cli
cnpm install vue-cli -g
V.测试vue是否安装成功
vue list
查看可以基于哪些模板创建vue应用程序；
大部分网站时es6，但是开发大部分是es5，所以需要webpack打包降级成es5
VI.创建vue项目
通过初始化的方式创建项目
i.进入存放vue项目的路径（我的是f:workspaces\vue）
ii.vue init webpack myvue
VII.初始化并运行
f:\workspaces\vue\myvue\cnpm install
f:\workspaces\vue\myvue\npm run dev
VIII.IDEA中运行vue程序
修改idea权限
VVI.IDEA中查看目录
2.模块化webpack
慢慢演进：
...
es6模块：
<1>es6规范，但是浏览器内核还是es5，所以浏览器还没有实现这个标准，所以开发想要使用es6，就需要es6使用时降级支持浏览器
<2>webpack
模块加载器兼打包工具，可以把各种资源当成模块化处理；它的作用就是把es6的代码打包编译成es5的规范，从而支持所有浏览器运行
<3>webpack使用
I.安装并测试
i.npm install webpack -g
ii.npm install webpack-cli -g
iii.f:\workspaces\vue\myvue\webpack -v
iv.f:\workspaces\vue\myvue\webpack-cli -g
II.配置
webpack.config.js
III.使用webpack
i.创建项目
在f:\workspaces\vue目录下新建一个文件夹
ii.项目中创建modules的目录，用于放置JS模块等资源文件（IDEA中在项目下新建一个Directory）
iii.模块化开发初体验
iv.新建webpack.config.js并执行webpack打包
v.引入
3.vue-router路由
<1>是什么
做多个页面之间的跳转
<2>为什么用
vue是soc原则，只关心试图层；后端可以通过请求转发和重定向做页面的跳转，前端需要用到路由组件
<3>怎么用
I.运行一个简单的vue项目
II.安装
III.测试
修改数据后，页面不需要刷新就可以自动的更新展示数据，说明是动态的，这就是热部署
VI.编写组件，使用路由
功能：完成从首页面跳转到内容页两个组件之间的跳转
i.目录
ii.编写组件
iii.编写路由配置文件
iv.编写主页面
v.编写程序主入口
vi.测试
4.实战——vue+elementUI
<1>安装
I.CDN安装
II.npm安装
npm i element-ui -S
<2>创建新项目（管理员权限进入f:\workspaces\vue）
<3>
<4>
<5>
