vue复习（一）

最新推荐文章于 2023-04-18 11:06:37 发布

原创最新推荐文章于 2023-04-18 11:06:37 发布 · 291 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文详细介绍了MVVM模式在软件开发中的作用，包括模型层的业务逻辑处理、视图层的UI展示以及ViewModel作为两者间的桥梁。同时涵盖了CMD命令操作、CDN的工作原理及其优势，以及ES6中的键值对、模板字符串、生命周期钩子和数据侦听。

1.什么是mvvm模式？

Model：模型层，负责处理业务逻辑以及和服务器进行交互。
View：视图层，负责将数据模型转化为 UI 显示出来，可以简单的理解为 HTML 页面。
ViewModel：试图模型层，用来连接 Model 和 View ，是 Model 和 View 之间的桥梁。每当V层获取或者保存数据的时候，都要由VM层做中间的处理，从而交给M层（View-model: 比较抽象,为连接层,为引发数据驱动的一些事件和方法）。
注：1，在data中所有的属性最后都体现在vm中
2，vm上所有的属性以及vue上，在vue模板中都可以直接使用

2.CMD命令操作

dir：显示一个目录中的文件列表
cd：进入一个目录
md：创建一个目录等等

3.CDN是什么？

CDN 意为内容分发网络，它是在现有网络基础之上的智能虚拟网络，分布在各地的边缘服务器。其基本思路是避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。

特点：

1.本地 Cache 加速：提高了企业站点（尤其含有大量图片和静态页面站点）的访问速度，并大大提高以上性质站点的稳定性。

2.镜像服务

3.远程加速

4.带宽优化

5.集群抗攻击

功能：

1.节省骨干网带宽，减少带宽需求量；

2.提供服务器端加速，解决由于用户访问量大造成的服务器过载问题；

3.服务商能使用 Web Cache 技术在本地缓存用户访问过的 Web 页面和对象，实现相同对象的访问无须占用主干的出口带宽，并提高用户访问因特网页面的相应时间的需求；

4.能克服网站分布不均的问题，并且能降低网站自身建设和维护成本；

5.降低“通信风暴”的影响，提高网络访问的稳定性。

4.ES6——键值对

其中一些常用的方法：

方法名称	描述
add(value)	在 Set集合尾部添加一个元素，返回该 Set 对象，支持链式操作
delete(value)	从Set集合删除指定的元素。返回布尔值，表示是否删除成功
has(value)	检索Set 集合是否包含指定的元素。返回布尔值，表示是否包含
clear()	清除Set 集合中所有元素，没有返回值

has（）得到的是一个bool类型：

键与值都是一一对应的，类似于上图的'one' 对应的是'1'

// keys：返回map对象中键的数组，同理values：返回map对象中值的数组

// sets：在map对象中设置数组中的值，同理gets：在对象中获得数组中的值

//entries：object.entries得到的是包含key和values的一个数组

5.模板字符串

    const name =`模板字符串`;
         const age =19;
         const gender =`男`;
         function habit(){
            return `wake`
         }
     
    //  常规拼接
    const people2 = name +'今年' + age + '岁了,他是个' + gender +'人,喜欢' + habit()     


    // 使用模板字符串拼接
    // ${} 内部可以是变量，三元表达式，或者是一个函数

    const people = `${name}今年${age}了,他是个${gender === `男` ?`男孩` :`女孩`},喜欢${habit()}`
  console.log(people2);
  console.log(people);

let h = " she is " +
        "beautiful" +
        "girl";
       console.log(h);//she is beautifulgirl

   let q = " she is \
       beautiful";
       console.log(q); //she is        beautiful

优点：

使用模板字符串可以跨行，直接产生多行文本，而普通字符串不能跨行，如果需要定义多行字符串，那么就必须将多个单行字符串拼接才能获得

注：

每一行的\后面不允许有空格，否则脚本之间错误

6.生命周期钩子：

beforeCreate() 在实例创建之前调用。
created() 在实例创建之后调用，此时尚未开始DOM编译。
beforeMount() 在挂载开始之前调用。
mounted() 在实例被挂载后调用，这时页面的相关DOM节点已被新创建的vm.$el替换，相当于JavaScript中的window.onload0方法。
beforeUpdate（）每次页面中有元素需要更新时，在更新前就会调用beforeUpdate0钩子
updated（）每次页面中有元素需要更新时，在更新完之后就会调用updated(钩子函数）
beforeDestroy(）在销毁实例前调用，此时实例仍然有效。
destroyed() 在实例被销毁之后调用。