1:概念:什么是vue
vue是用于关键用户页面的渐进式开源JavaScript框架 也是一个创建SPA单页面应用的web应用框架,Vue所关注的和兴是MVC模式中的视图层,同时,它也能方便的获取数据更新,并通过内部组件的特定方法实现视图与模型的交互
见形势代表的含义:主张量少,自底向上,增量开发,组建集合,便于复用
特性:数据驱动(MVVM),组件化开发,特殊指令的系统
1.数据驱动:MVVM表示的是:Model-View-ViewModelModel: 模型层，负责处理业务逻辑以及和服务器端进行交互
View:视图层: 负责将数据模型转化为UI展示出来，可以简单的理解为HTML页面ViewModel: 视图模型层，用来连接Model和View，是Model和View之间的通信桥梁
2.组件开发: 把图形、非图形的各种逻辑均抽象为一个统一的概念 (组件)来实现开发的模式
降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求
调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件之间低耦合，职责单一，所以逻辑会比分析整个系统要简单
提高可维护性，由于每个组件的职责单一，并且组件在系统中是被复用的，所以对代码进行优化可获得系统的整体升级
3.指令系统: 指令(Directives) 是带有v- 前缀的特殊属性作用: 当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM条件渲染指令V-if列表渲染指令 v-for属性绑定指令 v-bind事件绑定指令 v-on双向数据绑定指令 v-model
2.vue常用的修饰符
V-on
.stop - 调用 event.stopPropagation()。 阻止默认事件
.prevent - 调用 event.preventDefault()。阻止默认行为.native - 监听组件根元素的原生事件。
v-bind
.prop - 作为一个 DOMproperty 绑定而不是作为 attribute绑定。(差别在哪里? )
.came1 -(2.1.0+)将 kebab-caseattribute 名转换为 camelCase。(从2.1.0 开始支持)
.sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on侦听器。
v-model
.lazy- 取代 input监听change 事件
- 输入字符串转为有效.number
的数字
.trim- 输入首星空格过滤
3.内置组件
component
渲染一个“元组件”为动态组件。依 is的值，来决定哪个组件被染
在一个多标签的界面中使用 is attribute来切换不同的组件: tap栏切换
transition
用于在 Vue 插入、更新或者移除 DOM时，提供多种不同方式的应用过渡、动画效果
transition-group
<transition-group>用于给列表统设置过渡动画。
keep-alive
主要用于保留组件状态或避免组件重新渲染
include 属性用于指定哪些组件会被缓存，具有多种设置方式。
exclude 属性用于指定哪些组件不会被缓存。
max 属性用于设置最大缓存个数
slot
name - string，用于命名插槽< slot> 元素作为组件模板之中的内容分发插槽。< slot> 元素自身将被替换。
4.SPA单页面应用
SPA (single-page application) ，翻译过来就是单页应用 SPA 是一种网络应用程序或网站的模型
它通过动态重写当前页面来与用户交互，这种方法避免了页面之间切换打断用户体验在单页应用中，所有必要的代码 ( HTML、 JavaScript 和 CSS )都通过单个页面的加载而检索
或者根据需要(通常是为响应用户操作)动态装载适当的资源并添加到页面页面在任何时间点都不会重新加载，也不会将控制转移到其他页面
举个例了来讲就是你去公司上班老婆给你送饭，饭盒早上装的包子 豆浆 油条饭盒中午装的米饭 面条 大鸡腿，饭盒晚上装的蔬菜沙拉 烤地瓜。我们发现变的始终是早中晚饭和饭盒里菜的样式，而饭盒始终是那个饭盒
我们熟知的JS框架如 react ，vue ，angular 都属于 SPA
4.1单页面的优缺点
1， 优点:
具有桌面应用的即时性、网站的可移植性和可访问性用户体验好、快，内容的改变不需要重新加载整个页面
2.缺点:
首次渲染速度相对较慢不利于搜索引擎的抓取
5.MVVM以及MVC
MVC
M: model数据模型V:view视图模型，C: controller控制器
是项目的一种分层架构思想，它把复杂的业务逻辑，抽离为职能单一的小模块，每个模块看似相互独立，其实又各自有相互依赖关系
它的好处是:保证了模块的智能单一性，方便程序的开发、维护、耦合度低。
mvm
M: model数据模型V:view视图模型，VM: viewModel视图数据模型
已是一种双向数据绑定的模式，用viewModel来建立起model数据层和view视图层的连接，数据改变会影响视图视图改变会影响数据