Vue的理解
- 那什么是构建用户界面呢？
就是吧你拿到手里的数据通过vue变成用户可以看见的界面
- 什么是渐进式框架呢？
比如你有一个简单的应用，只需要引入一个轻量小巧的核心库就可以了，这个库压缩完只有100多kb，
如果是一个复杂应用，你可以引用各式各样的Vue插件库，
从一个小巧的核心库逐渐递进到使用各式各样的Vue插件库，就是这么回事.
Vue的特点
1.组件化模式,提高代码复用率,且让代码更好维护
组件化.png
2.声明式编码,无需直接操作dom,提高开发效率
3.使用虚拟dom+优秀的diff算法,尽量复用dom节点
Vue/jquery/layui/bootstrap/element-ui都有什么不同之处
- Layui/bootstrap/element-ui是UI组件库，前端 UI 框架.
1.layui 更偏向与后端开发人员使用，在服务端页面上有非常好的效果
2.bootstrap 在前端响应式方面做得很好，PC端和移动端表现都不错。做网站不错。
3.element-ui是饿了么前端团队推出的一款基于Vue.js 2.0的桌面端UI框架.知道了vue的核心思想是组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的,所以饿了吗推出了基于VUE2.0的组件库,提供现成的PC端组件
- Vue/jquery前端js库.jquery是命令式的，vue是声明式。
1.jQuery是使用选择器＄选取DOM对象，对其进行赋值、取值、事件绑定等操作，
其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。
比如需要获取label标签的内容：$("lable").val();,它还是依赖DOM元素的值。
２.Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。
Vue.js 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连起来，通过对数据的操作就可以完成对页面视图的渲染。这就是传说中的MVVM模型。
MVVM响应式编程模型，避免直接操作DOM , 降低DOM操作的复杂性。
M（model）：普通的javascript数据对象
V（view）：前端展示页面
VM（ViewModel）：用于双向绑定数据与页面，就是vue的实例
VUE核心功能
基础功能：页面渲染、表单处理提交、帮我们管理DOM(虚拟DOM)节点
组件化开发：增强代码的复用能力，复杂系统代码维护更简单
vuex：专门在Vue中实现集中式状态(数据)管理的一个vue插件，
对Vue应用中多个组件的共享状态进行集中式的管理(读/写)，
也是一种组件间的通信方式,且适用于任意组件间通信
- 使用场景:
1.多组件依赖于同一状态(数据)
2.来自不同组件的行为需要变更同一状态(数据)
vuex.png
vueRouter路由：vue的一个插件库,专门来实现
SPA单页面应用
- SPA单页面：整个应用只有
一个完整的页面，点击页面中的导航链接不会刷新页面，只会做页面的局部更新，数据通过ajax请求获取理解路由：
1.一个路由(route)就是一组映射关系(key-value),
2.多个路由需要由路由器(router)进行管理
3.前端路由:Key为路径,value是组件component,用于展示页面内容
vuerouter.png
前端工程化：结合webpack等前端打包工具，管理多种静态资源，代码，测试，发布等，整合前端大型项目。
vue的简单使用
view视图区域
<div id="root">
<h1>hello,{{name}}</h1>
</div>
<script>
new Vue({ 创建vue实例 vm
el:'#root' , 用于指定当前vue实例为哪个容器服务,值通常为css选择器字符串
data:{ data中用于存储数据,数据供el所指定的容器去使用 model
name:'帅哥美女'
}
})
</script>
1.想让vue工作,就必须创建一个vue实例,且要传入一个配置对象
2.root容器里的代码依然符合html规范,只不过混入了一些特殊的vue语法
3.root容器里的代码被称为vue模板
4.vue实例和容器是一一对应的
5.实际开发中只有一个vue实例,并且会配合着组件一起使用
6.{{xxx}}插值语法,用于读取标签体内容,<h1>解析这里的东西</h1>，xxx是js表达式，且xxx可以自动读取到data中的所有属性
7.一旦data中的数据发生改变,页面中用到该数据的地方也会自动更新
vue-cli 脚手架
Vue CLI 脚手架是Vue官方提供的标准化开发工具（开发平台），写完的.vue文件需要通过vue-cli脚手架做转换翻译来让浏览器认识.
- CLI全称：command line interface：命令行接口工具
- 通过 @vue/cli 实现的交互式的项目脚手架。
- CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包，局部安装在每个 @vue/cli 创建的项目中。
- CLI 插件是向你的 Vue 项目提供可选功能的 npm 包，例如 Babel/TypeScript 转译、ESLint 集成、单元测试和 end-to-end 测试等。Vue CLI 插件的名字以 @vue/cli-plugin- (内建插件) 或 vue-cli-plugin- (社区插件) 开头，非常容易使用。
- 脚手架的下载可以用命令行的方式，也可以再vue面板中进行下载
