vue期末复习

Posted mysql.cj

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue期末复习相关的知识,希望对你有一定的参考价值。

此文章根据老师上课划的重点进行整理

Vue考试题型

考试时间120分钟。

考试重点:

1.var和let的区别、应用

  • var关键字:传统方式

  • let关键字:现代javascript中的方式

  • 两者的区别:

    let声明的变量只在代码块内有效,实现块级作用域,而var声明的变量没有块级作用域,只有函数作用域和全局作用域。
    var声明的变量存在变量提升,而let声明的变量不存在变量提升

2.变量提升

  • var声明提高到所属作用域的顶端:如var声明变量在任何函数之外,则变量的作用域会提升到整个代码的最高处(全局变量);在函数体内使用var声明变量,其作用域会被提升至所在函数。

  • 注意:

    1. 仅声明被提升,赋初值仍在原位置;

    2. 变量提升不会跨script块。

  • “变量提升”现象:即变量可以在声明之前使用,值为undefined。

  • let命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错。

3.使用const赋初值

  • 常量在脚本代码整个运行过程中保持不变

  • 使用const声明常量时,必需赋初值

  • const 常量名 = 值

  • 常量不能重复声明

4.js中的数据类型

5.字符串模板(模板字面量)

  • 允许嵌入表达式的字符串字面量

  • 使用反引号 (``) 来代替普通字符串中的用双引号和单引号

  • 模板字符串可以包含特定语法($expression)的占位符

6.严格相等和非严格相等

  1. == 左右两边的值相等即返回true,数据类型可不相同
  2. === 左右两边的值相等,且数据类型相同,返回true
  3. != 和 !== 与以上类似,其区别在数据类型是否相同

7.数据类型的转换

  1. 加号

    1. 加号(+)两边存在字符串或引用类型时,加号为字符串连接符,非字符串操作数自动转换为字符串,引用类型调用其toString()方法转换为字符串。
    2. 加号(+)两边为数值、布尔、null或undefined类型时,加号为加法算术操作符,此时非数值操作数自动转换为数值型,若存在不能转换为数值的操作数(仅有undefined),结果为NaN。
  2. 其他操作符

    1. 减(-)、乘(*)、除(/)、取余(%)两边存在字符串时,字符串自动转换为数字(如有无法转换操作数,则结果为NaN)

    2. ++和–,字符串自动转换为数字,无法转换的结果为NaN

    3. ‘>、<、==、<=、>=’:表达式包含数字和字符串时,字符串自动转换为数字,不能转换成数字的字符串或其它类型值,表达式均返回false

    4. 当比较两个字符串的大小时,按ASCII码比较,比较true false null 的大小时,按值比较( true=1, false=null=0)

    5. !:将操作数转换为布尔值后取反

      非零数值和非空字符串能够转换为true,零和空字符串能够转换为false

8.JS函数定义的不同方法

有名函数,函数名称为函数变量;匿名函数赋值于某变量后,该变量为函数变量

函数变量的值为整个函数定义语句

  • 定义方法一:有名函数

    function 函数名([参数列表]) 
      函数体;
      [return [表达式];]
    
    
  • 定义方法二:函数表达式(匿名函数)

    变量名 = function ([参数列表]) 
      函数体;
      [return [表达式];]
    
    
    • 不需要函数名
    • 常用于定义事件的回调函数
  • 定义方法三: 箭头函数

    (参数1, 参数2,, 参数N) =>  函数声明; 
    var f = (num1, num2) => 
        return num1 * num2;
    ;
    
    (参数1, 参数2,, 参数N) => 表达式(单一)
    var f = (num1, num2) => num1 * num2;
    
    单一参数 => 函数声明
    var f = num => num * num;
    
    () => 函数声明  // 无参数
    var f = () => 'hello world';
    

9.JS对象的创建方式

  • 方法一:调用Object()创建对象
let student = new Object();
student.num = '001';
student.sex = '男';
student.getAge = function()
    let now = new Date();
    ...

  • 方法二:使用对象字面量,相比方法一,更简洁
let s2 = 
    num = '002';
    sex = '女';
    getAge: function()
        ...
    

  • 方法三:使用构造函数模式

    构造函数实质上是具有如下特点的普通函数

    • 构造函数内通常使用this关键字对属性和方法赋值
    • 通过 new 构造函数名()的形式调用构造函数创建对象
    • 构造函数不需要返回值
function s3(num, sex)
    this.num = num;
    this.sex = sex;
    this.getAge = function()
        ...
    ;
;
  • 方法四:原型法
function s4(num, sex)
    this.num = num;
    ...

//使用prototype定义Student
s3.prototype.getAge = function()
    ...

  • 方法五:使用class关键字定义类
class s5
    constructor(num, sex)
        this.num = num;
        ...
    
    getAge()
        ...
    

10.数组定义

JavaScript中的数组为Array对象,Array为JavaScript语言内置对象

  • 方式一(更常用)
let a1 = [5, 10. 15];
let a2 = ['aaa', 'bbb', 'ccc']

  • 方式二
let a3 = new Array('a1', 'a2', 'a3');

11.数组的常用方法

  1. 数组元素的访问
console.log(a1[1]); // 10
console.log(a2[0]); // aaa
console.log(a3[a3.length - 1]); // a3

  1. 数组元素的常用属性及方法

    1. length属性: 可读写,读返回数组中元素的个数,写可增加或减少元素的个数

    2. push(e1, …, en):将参数指定的元素依次添加到数组的末尾,并返回新数组的长度

    3. pop():弹出(返回,并在数组中删除)数组最末一个元素

    4. shift(): 删除数组的第一个元素,并返回该元素

    5. unshift(e1, …, en): 将参数e1, …, en依次添加到数组的开头,并返回新数组的长度

    6. splice(index, count[, e1, …, en): 在数组中删除、替换或添加元素

      1. 删除元素:只提供index和count两个参数,删除从index位置开始的count个元素,并返回删除的元素数组

        let a = [1, 2, 3, 4, 5];
        let e = a.splice(2, 1); // 从索引为2的位置开始,删除1个元素
        console.log(e); // (1) [3],被删除元素组成的数组
        console.log(a); // (4) [1, 2, 4, 5],改变后的数组
        
        
      2. 替换元素:提供三个以上参数,前两个参数的作用与1相同,在1删除的基础上,第三个及之后的参数被插入到index位置,返回值与1相同

        let a2 = [1, 2, 3, 4, 5];
        // 从索引为2的位置开始,删除2个元素,并将元素10播放到索引为2的位置
        let e2 = a2.splice(2, 2, 10); 
        console.log(e2);  // (2) [3, 4]
        console.log(a2);  // (4) [1, 2, 10, 5]
        
        a2.splice(1, 1, 6);	// a2[1] = 6
        console.log(a2); // (4) [1, 6, 10, 5 ]
        
        
      3. 添加元素:提供三个以上参数,第二个count参数值为0,此时不删除元素,只在index位置插入第三个及之后的参数,返回值为空数组

        let a3 = [1, 2, 3, 4, 5];
        // 从索引为2的位置开始,删除0个元素,并将元素10播放到索引为2的位置
        let e3 = a3.splice(2, 0, 10); 
        console.log(e3);  // []
        console.log(a3);  // (6) [1, 2, 10, 3, 4, 5]
        
        
    7. sort()或sort(compareFunction):对数组元素排序

      • 不提供参数时,按字典顺序(Unicode从小到大)排序
      • 提供compareFunction时,如compareFunction返回正值则交换元素
    8. forEach(function(currentValue[, index[, array]])[, thisArg]): 对数组中的每个元素执行一次回调函数

    9. filter(function(currentValue[, index[, array]])[, thisArg]): 对所有元素依次应用回调函数,返回一个新数组,包含所有回调函数返回true的元素

    10. 生成一个新的数组,其中的元素为指定数组中的元素应用回调函数返回值

    11. reduce(function(previousResult, currentValue[, index[, array]])[, initialValue]):使用回调函数对数组中的每个元素进行处理,并将处理结果汇总返回,其中:

      • previousResult: 必须提供,上一次执行的结果,第一次执行时,如提供initialValue参数,则previousResult的值为initialValue,否则previousResult的值为数组中的第一个元素, 且currentValue为数组中的第二个元素
      • currentValue:必须提供,当前正在处理的元素

12.json相关语法的定义和运用,json数据

Json简介

JSON(JavaScript Object Notation, JavaScript对象表示法)是一种轻量级数据交换格式,易于理解,易于解析与生成,基于JavaScript的一个子集。

JSON数据采用文本格式,独立于编程语言。

JavaScript原生支持生成与解析JSON格式数据,主流编程语言均支持JSON格式,是目前前后端数据交互的主流数据格式之一。

相比XML,JSON可读性更好,更轻量。

Json数据格式

  • JSON数据基于两种结构:
  1. " 名称/值"对的集合,在JavaScript中,由对象(Object)实现
  2. 值的有序列表,在JavaScript中,由数组(Array)实现
  • JSON数据格式与JavaScript中对象和数组的定义类似
  • JSON中对象由花括号包裹,其中的每个“名称/值”对之间使用(英文)逗号分隔,最后一个“名称/值”对后不需要逗号
  • JSON“名称/值”中的**“名称”必须是双引号包裹的字符串**

Json数据的解析

  • JSON格式基于文本,因此JSON数据可以字符串形式赋值给变量
let studentJson = '"name": "小明",  "gender": "男",  "dob": "1990-01-01"';

  • 通过JSON.parse(jsonData)方法将JSON数据转换为JavaScript对象,该方法接收的参数为字符串类型的JSON数据
let studentJson = '"name": "小明",  "gender": "男",  "dob": "1990-01-01"';
let student = JSON.parse(studentJson);
console.log(typeof student); // object
console.log(student.name);  // 小明
console.log(student.gender);// 男
console.log(student); // “name": "小明",  "gender": "男",  "dob":... ...

Json数据的生成

  • 通过JSON.stringify(object)方法将JavaScript对象/数组转换为JSON数据
let s1 = name: '小红', gender: '女', dob: new Date('1991-6-2');
let s2 = name: '小刚', gender: '男', dob: new Date('1991-5-16');
let students = [s1, s2];
console.log(JSON.stringify(students));
// [
//  "name":"小红","gender":"女","dob":"1991-06-01T15:00:00.000Z",
//  "name":"小刚","gender":"男","dob":"1991-05-15T15:00:00.000Z"
// ]

13.promise对象

Promise是ES 6新增的用于异步操作的对象,它包装了异步操作的最终完成和结果

Promise对象包装了一个将来会得到、当前未知的结果(如AJAX请求的响应),允许设置操作成功完成和失败时的回调函数

通过使用Promise,异步方法可以像同步方法一样返回值:一个Promise对象

  1. 一个Promise对象总是处于以下三种状态之一:
    • pending: 初始状态, 既没有完成也没有拒绝
    • fulfilled: 意味着操作成功完成
    • rejected:意味着操作失败
    • fulfilled和rejected这两种状态又被称为settled状态
  2. 一个Promise对象有两种可能的状态改变:
    • 从pending转变为fulfilled,或者
    • 从pending转变为rejected
    • 且状态改变之后不会再改变
  3. Promise对象的基本使用
    1. then(onFulfilled[, onRejected])方法:接受两个参数:操作成功和失败时的回调函数,返回一个新的Promise对象以实现链式调用
      • onFulfilled回调函数接收一个参数,是异步操作的返回值
      • onRejected函数接收一个参数,是操作失败的原因
    2. then方法的二个参数均是可选的,常常提供只提供第一个参数而忽略第二个参数,在catch方法中处理失败的情况
    3. catch(onRejected)方法处理失败的情况,同样返回Promise,参数onRejected是失败时的回调函数
    4. 实质上,p.catch(onRejected)内部调用的是p.then(undefined, onRejected)
    5. finally(onFinally)方法:参数onFinally为进入settled状态时执行的回调函数,即进入fulfilled或rejected状态,时序上会先执行then和catch方法设置的onFulfilled或onRejected回调函数

14.响应式布局的使用和原理

​ 采用CSS的媒体查询(media query)技术,将三种已有的开发技巧,包括弹性网格布局、弹性图片、媒体和媒体查询整合在一起

15.bootstraps怎么支持相应布局的(栅格系统)

容器

  • Bootstrap中最基本的布局元素之一
  • 容器用来容纳内容,设置内边距,并将内容居中
  • 使用Bootstrap的栅格系统需要使用容器元素
  • Bootstrap中的三类容器:
    • container,所有响应断点设置max-width
    • .container-fluid,所有响应断点设置width为100%
    • .container-breakpoint,断点以下设置width为100%

工作方式

  1. 行必须放置在 .container class内,以便获得适当的对齐(alignment)和内边距(padding)。
  2. 使用行(row)来创建列的水平组。内容应该放置在列内,且唯有列可以是行(row)的直接子元素。
  3. 预定义的网格类,比如 .row 和 .col-xs-4,可用于快速创建网格布局。
  4. 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如,要创建三个相等的列,则使用三个 .col-xs-4

16.移动优先原则

​ 移动优先的响应式布局采用的是渐进增强原则,制作响应式网站时,先搞定手机版,然后再去为更大设备去设计和开发更复杂的功能。特征是使用min-width匹配页面宽度。从上到下书写样式时,首先考虑的是移动设备的使用场景,默认查询的是最窄的情况,再依次考虑设备屏幕逐渐变宽的情况。

​ 由简入繁易,由繁入简难。如果是桌面优先,布局端是桌面端代码,只有在media中,才是手机端代码,加载了多余的桌面端代码。如果是图片文件,则下载的无用资源更多。

  1. 显示设备种类繁多,尺寸差异大
  2. 问题:横屏、竖屏、2K、4K,不同像素密度 … …

17.mvm模式的定义

  • MVVM(Model­View­ViewModel) 是一种软件架构设计模式
  • MVVM 的核心是数据驱动即 ViewModel,ViewModel 是 View 和 Model 的关系映射
  • ViewModel 类似中转站 (Value Converter),负责转换 Model 中的数据对象,使得数据 变得更加易于管理和使用
  • MVVM 本质是基于操作数据来操作视图进而操作 DOM,借助于 MVVM 无需直接操作 DOM,开发者只需完成包含声明绑定的视图模板,编写 ViewModel 中有业务,使得 View 完全实现自动化

18.VUE的语法和应用

参考课本吧

19.第六章不考

以上是关于vue期末复习的主要内容,如果未能解决你的问题,请参考以下文章

有关期末复习的贪心题目——课程表III

java期末复习3 (施工中)

期末复习——同步互斥死锁

[期末复习]《语义网与知识图谱》期末复习

Python期末复习资源

智能机器人-期末复习大纲