【无标题】

一 什么是MVVM
MVVM(Model-View-ViewModel)是一种软件架构设计模式，它是一种简化用户界面的事件驱动编程方式。
在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者。ViewModel是连接View和Model的中间件。

ViewModel能够观察到数据的变化，并对视图对应的内容进行更新。
ViewModel能够监听到视图的变化，并能够通知数据发生变化。
到此，我们就明白了，Vue.js就是一个MVVM的实现者，它的核心就是实现了DOM监听与数据绑定。

MVVM源自于经典的MVC（Model-View-Controller）模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用，其作用如下：

该层向上与视图层进行双向数据绑定。

向下与Model层通过接口请求进行数据交互。

MVVM已经相当成熟了，主要运用但不仅仅在网络应用程序开发中。当下流向的MVVM框架有Vue.js、AugularJS等。

为什么要使用MVVM
低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候，View也可以不变。
可复用：可以把一些视图逻辑放到一个ViewModel里面，让很多View重用这段视图逻辑。
独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
可测试：界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

**MVVM实现者**

Vue.js
AngularJS
微信小程序
二 CMD命令操作
Windows 命令提示符（即 cmd）是 Windows 系统的一种命令行操作工具，用户可以通过输入命令来完成各种各样的系统或程序操作。

虽然很多操作都可以通过图形程序完成，但也有非他不可的情况存在。因此了解一些日常可能用到的简单操作也是很必要的。

下面就介绍一些「CMD 常用命令和操作」，可以作为小白入门或者备忘录使用。
	目录操作

切换目录，进入指定文件夹：

切换磁盘：d:（进入 d 盘）
切换磁盘和目录：cd /d d:/test（进入 d 盘 test 文件夹）
进入文件夹：cd \test1\test2（进入 test2 文件夹）
返回根目录：cd
回到上级目录：cd …
新建文件夹：md test
显示目录内容：

显示目录中文件列表：dir
显示目录结构：tree d:\test（d 盘 test 目录）
显示当前目录位置：cd
显示指定磁盘的当前目录位置：cd d:

三 CDN

全称:Content Delivery Network或Content Ddistribute Network，即内容分发网络

基本思路：

尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。

目的：

解决因分布、带宽、服务器性能带来的访问延迟问题，适用于站点加速、点播、直播等场景。使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度和成功率。

控制时延无疑是现代信息科技的重要指标，CDN的意图就是尽可能的减少资源在转发、传输、链路抖动等情况下顺利保障信息的连贯性。

优势：

如果你在经营一家网站，那你应该知道几点因素是你制胜的关键：

内容有吸引力
访问速度快
支持频繁的用户互动
可以在各处浏览无障碍

四 ES6-键值对
WeakSet 是什么
WeakSet对象是一些对象值的集合，并且其中的每个对象值都只能出现一次。WeakSet 对象与Set 对象的区别主要有两点:

WeakSet对象中只能存放对象引用，不能存放值。而Set对象都可以。
WeakSet对象中存储的对象值都是被弱引用的。如果没有其他的变量或属性引用这个对象值,则这个对象值会被当成垃圾回收掉。正因为这样，WeakSet对象是无法被枚举的，没有办法拿到WeakSet集合包含的所有元素。

Map集合是什么
Map集合是键值对的集合。任何值都可以作为Map 集合中的键或值。Map 集合可以按照插入的顺序迭代它的元素。

Map 对象提供了size 属性用于返回Map对象的键值对的个数。
Map 对象提供了用于操作Map 集合的方法和用于遍历Map集合的方法，如下表所示:

Map集合与Object对比
一般情况下，Object 会被用于将字符串类型映射到数值。Object 允许设置键值对、根据键获取值、删除键、检测某个键是否存在。而Map具有更多的优势：

Object的键均为String类型，在Map里键可以是任意类型。
必须手动计算 Object的尺寸，但是可以很容易地获取使用Map 的尺寸。Map 的遍历遵循元素的插入顺序。
Object有原型，所以映射中有一些缺省的键。
WeakMap 集合是什么
WeakMap对象也是键值对的集合。它的键必须是对象类型，值可以是任意类型。它的键被弱保持，也就是说，当其键所指对象没有其他地方引用的时候，它会被回收掉。WeakMap 提供的接与Map相同。
与Map对象不同的是，WeakMap 的键是不可枚举的。不提供列出其键的方法。列表是否存在取决于垃圾回收器的状态，是不可预知的。

五 模板字符串
模板字符串是ES6中非常重要的一个新特性，这个特性使得我们处理相关业务变得更加容易。比如在处理嵌入表达式、多行字符串、字符串中插入变量、字符串格式化等方面的应用。模板字符串使用反钩号（backticks,`），而不是单引号或双引号。以下是个简单的示例：

let str1 = `hello!!!`; //template string
let str2 = "hello!!!";
console.log(str1 === str2); //output "true”

表达式
多行字符串
标签模板字符串（Tagged template literals）
原始字符串(Raw strings)

表达式
模板字符串的出现，给ES6添加了“表达式”的概念。在ES6之前，我们只能用加号连接变量表达式，代码如下：

var a = 20;
var b = 10;
var c = "JavaScript";
var str = "My age is " + (a + b) + " and I love " + c;
console.log(str);

复制
自从模板字符串表达式的出现后，我们嵌入表达式的方式更加简单，即${变量表达式}，变量表达式就相当函数一样，变量传值进行替换。如果我们要使用自定义的函数处理字符串，我们可以使用标签模板字符串（Tagged template literals），标签函数进行处理（a tag function）。下一小节将会讲到。先让我们看下如何使用模板字符串嵌入表达式，代码如下：

const a = 20;
const b = 10;
const c = "JavaScript";
const str = `My age is ${a+b} and I love ${c}`;
console.log(str);
//output “My age is 30 and I love JavaScript"

六 生命周期钩子
每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。

七 数组侦听
修改数组的继承关系，重写方法，进行拦截调用。
修改后的继承关系为：arr(数组对象) -> 自定义的对象（他的隐式原型对象__proto__指向数组的显示原型对象prototype） -> Array.prototype
这个自定义的对象继承了Array的方法重写了push,pop,shift,unshift,splice,sort,reverse
const ARRAY_METHODS = [‘push’, ‘pop’, ‘shift’, ‘unshift’, ‘splice’, ‘sort’, 'reverse]
const array_methods = Object.create(Array.prototype)
ARRAY_METHODS.formEach(method => {
array_methods[methos] = function() {
console.log(argument)
console.log(‘调用的是拦截的方法’)
Array.from(arguments).forEach(arg => {
console.log(‘监听当前的参数’)
})
// 当监听动作完成再进行函数调用
Array.prototyoe[method].apply(this, arguments)
}
})

八 事件对象属性
1、event是事件对象，是关于事件的一系列的集合，写在事件函数的小括号里面，习惯写e
2、只有有了事件（单击事件、 鼠标事件、 键盘事件）之后才会有事件对象，即事件对象发生在事件之后，或者说没有事件绑定就没有事件对象
3、事件对象是系统自动创建的，我们只需接收就好

二、事件对象的属性
1、事件对象的兼容性
不同的浏览器对于事件对象的创建有不同
1、 在高级浏览器中，使用的event,习惯写e
2、 在低级浏览器IE6-IE8中，使用的window.event
3、兼容性的写法是

元素.on+事件类型 = function(e){  
	e = e || window.event
}

九 事件修饰符
顾名思义，“事件修饰符”是用来修饰事件的。Vue.js为v-on提供了事件修饰符，修饰符是由点开头的指令后缀来表示的。

事件修饰符有：

.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身(不是子元素)触发时回调
.once 事件只触发一次

十 v-model修饰符

1、lazy修饰符
当用户使用v-model之后，用户每次修改输入内容，都会将后台的数据同时绑定，为了避免这种情况的发生，使用lazy修饰符来进行限定。只有当用户的input中失去焦点或者用户点击回车按钮时，才会将后台的数据进行修改。

<!--  lazy修饰符：使得用户在输入数据之后，当数据失去焦点或点击回车时，才会进行数据的更新-->
  <input type="text" v-model.lazy="message">
  <h2>用户输入的内容： {{message}}</h2>

2、number修饰符
当用户在input中输入数字时，浏览器会默认将输入的数字转化为string类型，使用number修饰符来将输入的数字转为number类型。

<!--  number修饰符：将用户输入的类型由string型转为number型-->
  <input type="number" v-model.number="num">
  <h2>{{num}}: {{typeof num}}</h2>

3、trim修饰符
用户可能输入的字符串中含有空格，这样系统在处理时可能会出现错误。使用trim修饰符来去掉字符串首部或者尾部的所有空格。

  <!--  trim修饰符：将用户输入的文本信息中开头的空格，结尾的空格都删除-->
  <input type="text" v-model.trim="name">
  <h2>用户输入的内容： {{name}}</h2>

十一 key属性的作用

key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。

如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。
而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误

最常见的用例是结合 v-for使用

十二 v-if与v-show的区别

控制手段不同
编译过程不同
编译条件不同
控制手段：v-show隐藏则是为该元素添加css–display:none，dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除

编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换

编译条件：v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染

v-show 由false变为true的时候不会触发组件的生命周期

v-if由false变为true的时候，触发组件的beforeCreate、create、beforeMount、mounted钩子，由true变为false的时候触发组件的beforeDestory、destoryed方法

性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

十三 v-for与v-if一同使用的注意事项

永远不要把 v-if 和 v-for 同时用在同一个元素上。 当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级。

十四 父子组件之间传递数据的方法

1.1 使用 $refs 直接调用
子组件

......  
/* 一个方法,打印输入的参数 */
show_value(value){
	console.log(value
}
.....

父组件

......
<children ref="chd"></children>
...
this.refs.chd. show_value(123)
......

结果是打印输出123

1.2 使用 $children 直接调用
子组件不变

父组件
调用多个子组件时,不一定是[0]

......
<children></children>
...
this.$children[0].show_abc(123)
......

结果是打印输出123

2,子组件调用父组件的方法
2.1 使用 $parent 直接调用
父组件

......
<children></children>
...
show_value(value){
	console.log(value)
}
.....

子组件

......
this.$parent.show_value(123)
......

结果是打印输出123

2.2 使用 props
父组件

…

<children :show_value="show_value"></children>
...
show_value(value){
	console.log(value)
}
.....

子组件

…

props: { show_value: Function }

this.show_value(123)
......

结果是打印输出123

2.3 使用 v-on
父组件

…

<children @show_value="show"></children>
...
show(value){
	console.log(value)
}
.....

子组件

…

props: { show_value: Function }

this.show_value(123)

结果是打印输出123

2.4 使用 $emit
父组件

…

<children @show_value="show"></children>
...
show(value){
	console.log(value)
}

…

子组件

…

this.$emit('show_value',123)

…

结果是打印输出123

十五 单页应用

什么是单页应用？
单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

单页面应用的优缺点：
优点：
1、用户操作体验好，用户不用刷新页面，整个交互过程都是通过Ajax来操作。
2、适合前后端分离开发，服务端提供http接口，前端请求http接口获取数据，使用JS进行客户端渲染。

缺点：
1、首页加载慢
单页面应用会将js、 css打包成一个文件，在加载页面显示的时候加载打包文件，如果打包文件较大或者网速慢则用户体验不好，首屏时需要请求一次html，同时还要发送一次js请求，两次请求回来了，首屏才会展示出来。相对于多页应用

2、SEO不友好
SEO效果差，因为搜索引擎只认识html里的内容，不认识js的内容，而单页应用的内容都是靠js渲染生成出来的，搜索引擎不识别这部分内容，也就不会给一个好的排名，会导致单页应用做出来的网页在百度和谷歌上的排名差。使用单页面应用将大大减少搜索引擎对网站的收录。

为什么页面切换快？
页面每次切换跳转时，并不需要做html文件的请求，这样就节约了很多http发送时延，我们在切换页面的时候速度很快。

、