Vue基础及架构模式
前端框架
- angular
MVC模式，双向数据绑定，依赖注入 - react
virtual DOM（虚拟DOM，即为与DOM一样的对象，操作对象避免DOM的直接操作从而提高性能），性能上辗轧angular - vue
结合angular和react的优点，MVVM模式，高性能高效率框架
架构模式
MVC模式
- M： Model (数据) => 数据保存
Model(模型)表示应用程序核心(比如数据库记录列表)。
Model(模型)是应用程序中用于处理应用程序数据逻辑的部分。
通常模型对象负责在数据库中存取数据。 - V： View (视图) => 用户界面
View(视图)显示数据(数据库记录)。
View(视图)是应用程序中处理数据显示的部分。
通常视图是依据模型数据创建的。 - C： Controller (控制器) => 业务逻辑
Controller(控制器)处理输入(写入数据库记录)。
Controller(控制器)是应用程序中处理用户交互的部分。
通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。
MVC 分层有助于管理复杂的应用程序，因为您可以在一个时间内专门关注一个方面。例如，您可以在不依赖业务逻辑的情况下专注于视图设计。同时也让应用程序的测试更加容易。
MVC 分层同时也简化了分组开发。不同的开发人员可同时开发视图、控制器逻辑和业务逻辑。
MVC是一个框架模式，它强制性的使应用程序的输入、处理和输出分开。使用MVC应用程序被分成三个核心部件:模型、视图、控制器。它们各自处理自己的任务。最典型的MVC就是JSP + servlet + javabean的模式。
MVP
MVP是模型（Model）、视图（View）、主持人（Presenter）的缩写，分别代表项目中3个不同的模块。
- 模型（Model）：
负责处理数据的加载或者存储，比如从网络或本地数据库获取数据等； - 视图（View）：
负责界面数据的展示，与用户进行交互； - 主持人（Presenter）：
相当于协调者，是模型与视图之间的桥梁，将模型与视图分离开来。
View与Model并不直接交互，而是使用Presenter作为View与Model之间的桥梁。其中Presenter中同时持有Viwe层以及Model层的Interface的引用，而View层持有Presenter层Interface的引用。当View层某个界面需要展示某些数据的时候，首先会调用Presenter层的某个接口，然后Presenter层会调用Model层请求数据，当Model层数据加载成功之后会调用Presenter层的回调方法通知Presenter层数据加载完毕，最后Presenter层再调用View层的接口将加载后的数据展示给用户。这就是MVP模式的整个核心过程。
MVVM
MVVM架构模式是MVP的演变
- Model
- View
- ViewModel 类似于MVP中的Presenter，唯一区别是它为双向绑定，View的变动自动反映在ViewModel，反之亦然。
- 核心：关注Model的变化，让MVVM框架利用自己的机制去更新DOM，让开发者从操作DOM的繁琐解脱。
安装引入
vue.js官网下载vue.js文件
script标签
cdn
npm
npm install vue
Vue实例化过程
vue是一个构造函数，使用必须先实例化
插值表达式（得到一个值的式，如三元运算、字符串split()等）
{{username}} - {{age}} = {{gender=='女'? 'female':'male'}}
页面中显示
zc- 18 = female
在浏览器中打开，F12或右击检查打开控制台输入
两种方式
model.username = 'zc'
vm.username = 'zc'
页面中的ck会变成zc，修改实例的属性，model数据与视图都做出响应；修改model另两个也会变。下面描述其原理
Vue响应式属性原理
let person1 = {
name : 'zc',
age : 20
}
let person2 = {
username : 'zc-k',
age : 22
}
1------------------------------------------------
Object.defineProperty(person2,'skill',{
enumberable : true,
get : function(){
console.log('getter');
} ,
set : function(){
console.log('setter');
}
});
浏览器控制台输入
person2.skill; // 获取值 执行get内容 打印getter
person2.skill = 'js'; // 设置值 执行set内容 打印setter
2------------------------------------------------
Object.defineProperty(person2,'skill',{
enumberable : true,
get : function(){
let res = person1.age - 1;
return res;
} ,
set : function(val){
person1.age = val;
}
});
浏览器控制台输入
person2.skill; // 操作了person1的age属性 现 age为17
person2.skill = 20; // 操作了person1的age属性 现 age为val(20)
这样就能够通过操作一个对象的属性去改变其他对象的属性
Vue就是通过这样的方法进行系列操作实现响应，就如操作了ViewModel同时改变View和Model的值
{{username}}
Vue指令
指令解析
前半部分如这里的v-text会在vue.js文件中找到解析
后半部分如这里的name会在对应的vue实例中data找到解析
v-text
两者效果一致，但{{}}形式会先加载{{}}再加载里面的的内容
网络差时，会出现大量的{{}}，视图体验不好，建议使用v-text指令
{{name}}
v-html
v-html 若内容包含标签结构，会进行标签解析
v-text 会直接将内容当作字符串显示
v-show & v-if
v-show 用法：
切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。
v-if 用法：
根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 ，将提出它的内容作为条件块。
当条件变化时该指令触发过渡效果。
v-show 里面值或表达式为true时显示，为false隐藏，标签结构仍在
v-if 里面值或表达式为true时显示，为false移除节点，标签结构删除
那么什么时候用v-show，什么时候用v-if?
状态经常不断变化用show，反之用if，因为if操作节点性能消耗高，而且if删除节点会把节点的绑定事件一并删除
v-if & v-else & v-else-if
v-else 和 v-else-if 前一兄弟元素必须有 v-if 或 v-else-if
也就是说if、else if、else要连用，不能中断。
BBBB
AAAAA
v-for
v-for 循环生成标签，for in可遍历数组对象
遍历数组时，con拿到数组内容，idx拿到数组下标
遍历对象时，con拿到对象的值, idx拿到对象的键
v-on
v-on事件绑定，v-on:简写为@
v-bind
v-bind用于绑定 DOM 属性,v-bind简写为:
在绑定 class 或 style 特性时，支持其它类型的值，如数组或对象。
为true写入该类名，为false不写入该类名
v-model
用 v-model 指令在表单 、