15项 -作业

1. 什么是MVVM模式、
MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。

简单点来说，MVVM（Model-View-ViewModel）框架的由来便是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去，以应对客户日益复杂的需求变化。

微软的WPF：WPF（Windows Presentation Foundation）是微软推出的基于Windows 的用户界面框架，属于.NET Framework 3.0的一部分。它提供了统一的编程模型、语言和框架，真正做到了分离界面设计界面设计人员与开发人员的工作；同时它提供了全新的多媒体交互用户图形界面。

2.CMD命令操作

这是一些常用的命令

1、 cd  显示当前目录名或改变当前目录。
2、 dir 显示目录中的文件和子目录列表。
3、 md  创建目录。
4、 del 删除一或数个文件。
5、 chkdsk 检查磁盘并显示状态报告。
6、 cacls  显示或者修改文件的访问控制表(ACL)?
7、 copy   将一份或多份文件复制到另一个位置。
8、 date   修改日期
9、 format 格式化磁盘
10、type   显示文本文件的内容。
11、move   移动文件并重命名文件和目录。
12、expand 展开一个或多个压缩文件。
13、ren    重命名文件。
14、attrib 显示或更改文件属性。
15、time   显示或设置系统时间。
16、at     at命令安排在特定日期和时间运行命令和程序。要使用AT?命令，计划服务必须已在运行中。
17、net    [user],[time],[use]多，自己去查
18、netstat 显示协议统计和当前tcp/ip连接
19、nbtstat 基于NBT（net?bios?over?tcp/ip）的协议统计和当前tcp/ip连接
20、route   操作和查看网络路由表
21、ping    就不说了，大家都熟悉吧
22、nslookup 域名查找
23、edit  命令行下的文本编辑器
24、netsh 强大的命令行下修改tcp/ip配置的工具
25、fdisk 相信现在用的人比较少了，不过在没有其他工具的情况，他还是有用的

3.CDN 

1、什么是CDN？
CDN的全称是Content Delivery Network，即内容分发网络

其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定

通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上

其目的是使用户可就近取得所需内容，解决Internet网络拥挤的状况，提高用户访问网站的响应速度

2、CDN的优势
1、CDN节点解决了跨运营商和跨地域访问的问题，访问延时大大降低

2、大部分请求在CDN边缘节点完成，CDN起到了分流作用，减轻了源站的负载

4.ES6-键值对 

1. Set
类似于数组，但成员的值都是唯一的，集合实现了iterator接口，所以可以使用扩展运算符和for…of进行遍历，集合的属性和方法：

size：返回集合的元素个数
add：增加一个新元素，返回当前集合
delete：删除元素，返回Boolean值
has：检测集合中是否包含某个元素，返回Boolean值
let s = new Set();
let s1 = new Set(['aa','bb']);  // 括号中是可迭代对象

2. Map
类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map也是想了iterator接口，所以可以使用扩展运算符和for…of进行遍历。Map的属性和方法：

size：返回Map的元素个数
set：增加一个新元素，返回当前Map
get：返回键名对象的键值
has：检测Map中是否包含某个元素，返回Boolean值
clear：清空集合，返回undefined
let m = new Map();

5.模板字符串 

模板字符串是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`
 
 console.log(`string text line 1
string text line 2`);

// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?` //Hello Bob, how are you today?

 

6.生命周期钩子

1.生命周期有什么用?
1.1.生命周期概念：事物从出生到死亡的过程.
1.2.Vue的生命周期：Vue实例从创建到销毁的过程 ，这些过程中会伴随着一些函数的自调用。我们称这些函数为钩子函数。
1.3.生命周期作用：生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑
1.4 生命周期还有一个名字叫钩子函数
钩子函数    简介

beforeCreate    在实例初始化之后，数据观测和事件配置之前被调用 此时data 和 methods 以及页面的DOM结构都没有初始化 什么都做不了

created    在实例创建完成后被立即调用此时data 和 methods已经可以使用 但是页面还没有渲染出来
beforeMount    在挂载开始之前被调用 此时页面上还看不到真实数据 只是一个模板页面而已
mounted    el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。 数据已经真实渲染到页面上 在这个钩子函数里面我们可以使用一些第三方的插件
beforeUpdate    数据更新时调用，发生在虚拟DOM打补丁之前。 页面上数据还是旧的
updated    由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。 页面上数据已经替换成最新的
beforeDestroy    实例销毁之前调用
destroyed    实例销毁后调用
 

7.数组侦听 

    数组是应用类型,存在比较复杂的侦听规则。

    从理论上说，修改一个数组的内容，比如修改数组中某个元素的值,或者给数组添加新的元素,都不会修改数组本身的地址。为此.Vue.is对数组做了特殊处理,使得使用标准的数组操作方法对数组所做的修改,都可以被侦听到。

    1.Vue不能检测以下数组的变动:

    a.当你利用索引值直接设置一个数组时,例如:vm.items[index0fItem] = newValue

    b.当你修改数组的长度时,例如:vm.items.length = newlength

    2.使用标准方法修改数组可以被侦听到

    push() 尾部添加

    pop()尾部删除

    unshift()头部添加

    shift()头部删除

    splice()删除、添加、替换

    sort()排序

    reverse()逆序

8.事件对象属性

事件就是浏览器网页中的操作行为
事件对象：浏览器网页中发生的操作行为，代码中也可以通过对象的形式展示出来，通过提供的事件对象可以跟那个号的处理发生的行为

属性    描述
altKey    事件发生的时候是否同时按下了Alt键
ctrlKey    事件发生的时候是否同时按下了Ctrl按键
clientX    事件发生时鼠标指针距离浏览器窗口左侧的距离
clientY    事件发生时鼠标指针距离浏览器窗口顶部的距离
pageX    事件发生时 鼠标指针距离网页文档左侧的距离
pageY    事件发生时 鼠标指针距离网页文档顶部的距离
screenX    事件发生时鼠标指针距离电脑屏幕左侧的距离
screenY    事件发生时鼠标指针距离电脑屏幕顶部的距离
offsetX    事件发生时鼠标指针离事件标签左侧的距离
offsetY    事件发生时鼠标指针离事件标签顶部的距离

9.事件修饰符

1.事件的基本使用
1.使用v-on:xxx或者@xxx绑定事件，其中xxx是事件名

2.事件的回调需要配置在methods中，最终会在vm上

3.methods中配置的函数，不要用箭头函数，否则this就不是vm了

4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象

5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参

2.事件修饰符
1.prevent：阻止默认事件

2.stop：阻止事件冒泡（常用）

3.once：事件只触发一次（常用）

4.capture：使用事件的捕获模式；

5.self：只有event.target是当前操作的元素时才触发事件

6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕


10.v-model修饰符

  <!DOCTYPE html>
  <html lang="en">

  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <script src="../vue01/vue.js"></script>
  </head>

  <body>
      <div id="app">
          <!-- 修饰符  ：lazy    懒惰的 -->
        <input type="text" v-model.lazy="msg">
        <h2>{{msg}}</h2>
        <!-- 修饰符  number -->
        <input type="number" v-model.number="age">
        <h2>{{typeof age}}</h2>

        <!-- 修饰符  trim -->
        <input type="text" v-model.trim="name">
        <h2>您输入的名字{{name}}</h2>

      </div>
  </body>

  </html>
  <script>
      const app = new Vue({
          el: "#app",
          data: {
              msg:"修饰符lazy",
              age:"",
              name:""
          },
          methods: {},
      })
  </script>

11.key属性的作用 

        1. 提升v-for渲染的效率

        2. 提高渲染性能

        若对数据进行：逆序添加、逆序删除等破坏顺序操作， 会产生没有必要的真实DOM更新，虽然界面效果没问题, 但效率低。

        3.避免数据混乱的情况出现 

   如果结构中还包含输入类的DOM： 会产生错误DOM更新 ，出现数据混乱。

12.v-if与v-show的区别

一、概念
v-if：v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
v-show：v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。

二、区别
1、主要区别

（1）“v-show”只编译一次；而“v-if”不停地销毁和创建
（2）“v-if”更适合于带有权限的操作，渲染时判断权限数据
（3）v-show更适合于日常使用，可以减少数据的渲染，减少不必要的操作

2、本质区别

（1）vue-show本质就是标签display设置为none，控制隐藏
（2）vue-if是动态的向DOM树内添加或者删除DOM元素

3、编译区别

v-show其实就是在控制css；v-show都会编译，初始值为false，只是将display设为none，但它也编译了。
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-if初始值为false，就不会编译了。

4、性能

v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。

5、用法

v-if更适合于带有权限的操作，渲染时判断权限数据，有则展示该功能，没有则删除。v-show更适合于日常使用，可以减少数据的渲染，减少不必要的操作。

13.v-for与v-if一同使用的注意事项 

v-if和v-for的注意事项
如果将v-if和v-for 在同一个标签内使用，会出现每次先循环，在去判断渲染，在性能上出现了浪费

要注意这个细节，在写代码时，可以将for包含到if判断中，使其不在一个标签内，从而避免了同是使用的情况。

14.父子组件之间传递数据的方法

父组件要做的：

1.父组件import引用子组件；

2.在components中注册子组件；

3.通过v-bind属性向子组件中传值。

<child :parent-name="parentName"></child>

子组件要做的：

4.子组件通过props获取父组件传递的值；

props: { /* 通过属性接收父组件传过来的数据，属性是parent-fun, props中可以使用parentFun变量接收 */ 
  parentName: {
    type: String,
    default: () => '',
  },
}

4.子组件通过props获取父组件传递的值；

props: { /* 通过属性接收父组件传过来的数据，属性是parent-fun, props中可以使用parentFun变量接收 */ 
  parentName: {
    type: String,
    default: () => '',
  },
}

子组件向父组件传递数据
1.子组件中通过子组件的$emit方法自定义事件向父组件传数据

methods: {
  sendMsgToParent() { //1.子组件通过子定义事件child-msg的方式将msg传给父组件
    this.$emit('child-msg', this.msg)
  }
}

15.单页应用(SPA)
 

什么是单页应用？

单页应用的全称是 single-page application，简称 SPA，它是一种网站应用的模型，它可以动态重写当前的页面来与用户交互，而不需要重新加载整个页面。单页应用的流畅性让 Web 应用更像桌面端或 Native 应用了。相对于传统的 Web 应用，单页应用做到了前后端分离，后端只负责处理数据提供接口，页面逻辑和页面渲染都交给了前端。前端发展到现在，单页应用的使用已经很广泛，目前时兴的 React、Vue、Angular 等前端框架均采用了 SPA 原则。单页应用意味着前端掌握了主动权，也让前端代码更复杂和庞大，模块化、组件化以及架构设计都变得越来越重要。

说白了 就是整个使用流程里浏览器由始至终没有刷新，整个webapp就一个html文件，里面的各个功能页面是javascript通过hash,或者history api来进行路由，并通过ajax拉取数据来实现响应功能。因为整个webapp就一个html，所以叫单页面！

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

缺点：
1、首页加载慢
单页面应用会将js、 css打包成一个文件，在加载页面显示的时候加载打包文件，如果打包文件较大或者网速慢则用户体验不好
2、SEO不友好