VUE前半部分考点整合

最新推荐文章于 2023-02-28 08:26:27 发布

流萤604

最新推荐文章于 2023-02-28 08:26:27 发布

阅读量365

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_62800694/article/details/128054490

版权

本文介绍了前端开发中的MVVM模式，详细解析了Vue中的v-if、v-show和v-for指令的使用，以及数组操作方法。此外，还探讨了Windows CMD命令、内容分发网络（CDN）的功能和字符串模板的优势。最后，讨论了在父子组件间的数据传递以及单页应用（SPA）的优缺点。

摘要由CSDN通过智能技术生成

一、MVVM模式

1. M：模型(Model) ：由核心的业务逻辑产生的数据对象
2. V：视图(View) ：用户界面，
3. VM：视图模型(ViewModel) ：用于链接匹配模型和视图的专用模型

它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。

二、CMD命令

1、CMD命令是什么？

Windows 命令提示符，它是 Windows 系统的一种命令行操作工具，用户可以通过输入命令来完成各种各样的系统或程序操作。

内部命令：操作系统提供的基本命令，例如进入一个目录，目录里面的一个文件列表等。

外部命令：安装程序在计算机中，执行相应的文件名。

创建目录： md 目录名（文件夹）
删除目录： rd 目录名（文件夹）
复制文件： copy 路径\文件名路径\文件名：把一个文件拷贝到另一个地方。
移动文件：move 路径\文件名路径\文件名：把一个文件移动（就是剪切+复制）到另一个地方。
删除文件的，但不能删除文件夹：del 文件名
查看当前路径下的文件列表： dir
进入单级目录（tab补足目录名称： cd目录
回退到上一级目录： cd..
回退到盘符目录 cd/
清屏 cls 退出命令提示符窗口 exit 启动计算机 calc
必备命令
Shutdown -s -t 60 一分钟后关机 Shutdown -a 取消关机计划
Shutdown -l 注销计算机 Tasklist 列出正在运行的进程
5、Command MMc 启动计算机管理 chkdsk（检查磁盘,默认为C盘）
regedit（启动注册表编辑器） taskmgr（启动任务管理器）
tsshutdn（60秒后关机） rononce -p（15秒后关机）

三,CDN

CDN的全称是Content Delivery Netword，即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。

CDN的主要功能

节省骨干网带宽，减少带宽需求量；
提供服务器端加速，解决由于用户访问量大造成的服务器过载问题；
服务商能使用Web Cache技术在本地缓存用户访问过的Web页面和对象，实现相同对象的访问无须占用主干的出口带宽，并提高用户访问因特网页面的相应时间的需求；
能克服网站分布不均的问题，并且能降低网站自身建设和维护成本；
降低“通信风暴”的影响，提高网络访问的稳定性。

四、字符串模板

优点：可以跨行，直接产生多行文本

语法：把字符串写在``里面，${变量、表达式、函数}：获取值

var obj ={
    name: '张三',
    age: 20
}

// 传统打印
console.log("我的名字叫" + obj.name + ",今年" + obj.age + "岁");

// ES6
console.log(`我的名字叫${obj.name},今年${obj.age}岁`);

如果模板字符串的变量没有声明，将报错
由于模板字符串的大括号内部，就是执行 JavaScript 代码，因此如果大括号内部是一个字符串，将会原样输出
模板字符可以嵌套，但是没有必要

五、数组的增删改查

 let array = ['小枣','小草','小熊']
        console.log(array);//['小枣','小草','小熊']
        //新增数组
        //添加末尾
        array.push('小溪')
        console.log(array);//['小枣','小草','小熊','小溪']
        //添加开头
        array.unshift('小花')
        console.log(array);// ['小花', '小枣', '小草', '小熊', '小溪']
        // 删除数组
        //删除最后一个数组
        array.pop()
        console.log(array);//['小花', '小枣', '小草', '小熊']
        //删除第一个元素
        array.shift()
        console.log(array);//['小枣', '小草', '小熊']
        // 数组改动
        array[0] = '玛奇朵'
        console.log(array);//['玛奇朵', '小草', '小熊']
        array[4] = '小丑'
        // 删除指定的数列
        array.splice(2,2)
        console.log(array);//['玛奇朵', '小草', '小丑']

sort() 排序 reverse()逆序

六、V-IF和V-SHOW

共同点：
v-if 和 v-show 都能实现元素的显示隐藏

区别：
1. v-show 只是简单的控制元素的 display 属性，而 v-if 才是条件渲染（条件为真，元素将会被渲染，条件为假，元素会被销毁）；

2. v-show 有更高的首次渲染开销，而 v-if 的首次渲染开销要小的多；

3. v-if 有更高的切换开销，v-show 切换开销小；

4. v-if 有配套的 v-else-if 和 v-else，而 v-show 没有

5. v-if 可以搭配 template 使用，而 v-show 不行

v-show与v-if的使用场景：
v-if 与 v-show 都能控制dom元素在页面的显示

v-if 相比 v-show 开销更大的（直接操作dom节点增加与删除）

如果需要非常频繁地切换，则使用 v-show 较好

如果在运行时条件很少改变，则使用 v-if 较好

七、v-for中的key的作用

key属性主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes；
如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法；
而使用key时，它会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的元素；

八、v-if和v-for一同使用的注意事项

v-if 作用及语法
v-if 指令用于条件性地渲染所在元素块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。v-if 指令可以和 v-else-if、v-else 指令配合使用，使用逻辑和 JavaScript 中的 if...else if... else 一致，一层一层向下判断，判断条件是否符合，符合则渲染，不符合则继续判断，直到 else 无需判断直接渲染

<!-- 案例一 -->
<div v-if="isShow_1">
	当isShow_1 = true 时，展示
</div>

<div v-else-if="isShow_1 && isShow_2">
	当isShow_1 = true 且 isShow_2 = true 时，展示
</div>

...

<div v-else>
	以上条件渲染均不成立时，展示
</div>

<!-- 案例二 -->
<div v-if="isShow_1">
	当isShow_1 = true 时，展示
</div>

<div v-if="isShow_1 && isShow_2">
	当isShow_1 = true 且 isShow_2 = true 时，展示
</div>

...

<div v-else>
	以上条件渲染均不成立时，展示
</div>

案例一和案例二会形成两种不同的结果。案例一，至多展示一个元素容器；案例二，至多展示两个元素容器。而且对代码逻辑执行，isShow_1 必定执行，案例一中，isShow_2 不一定，而案例二中 isShow_2 则一定执行里面的渲染条件。需要区分使用方法，灵活使用，往往能带来很好的效果！

v-for 作用及语法
v-for 指令可以接收一个数组 / 整数 / 对象来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组或者对象，而 item 则是被迭代的数组元素的别名。具体语法详见下面的案例代码中。

在 v-for 的时候，建议设置key值，并且保证每个key值是独一无二的，这便于 diff 算法进行优化，提高 v-for 指令渲染效率，降低因某些情况下，v-for循环内容过多而导致的性能降低。

九、在父子组件传递数据

1、从父组件向子组件传递数据最主要的方式，可通过props（属性）和slot（插槽）来实现。

2、vue.js还允许使用更明确的方式定义属性，即通过一个对象而不是一个数组来定义一个组件的各种属性。

[props单向数据流]

概念:父组件的数据改变了会自动流动到子组件，但是子组件不允许修改由props流过来的数据

所谓的单向数据流不允许子组件修改，是不允许改栈，但是可以改堆。

例如:父组件传了数组给子直接，在子组件里面可以通过调用push，pop，shift，unshift，splice等等方法来改堆。而且改完后父组件也会跟着改，因为他们指向的是同一个堆。但是在这里不允许改props栈上的数据，父总监可以改，而且改完后能流入到子组件。

总结：配置props

-------让组件接收外部传来的数据

接收数据三种方式：

（1）只接收：props: ['name','age','sex']

（2）接收并限制类型：props: { "name":Number }

（3）限制类型、限制必要性指定默认值：

十、单页应用SPA

单页应用是将所有内容放在一个页面中，使得整个页面更加流畅，更简单、方便地浏览。

优点
1、有良好的交互体验
能提升页面切换体验，用户在访问应用页面是不会频繁的去切换浏览页面，从而避免了页面的重新加载；
2、前后端分离开发
单页Web应用可以和 RESTful 规约一起使用，通过 REST API 提供接口数据，并使用 Ajax 异步获取，这样有助于分离客户端和服务器端工作。更进一步，可以在客户端也可以分解为静态页面和页面交互两个部分；
3、减轻服务器压力
服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍；
4、共用一套后端程序代码
不用修改后端程序代码就可以同时用于 Web 界面、手机、平板等多种客户端；

缺点：
1、初次加载耗时多