vue---基本原理(二)

1、slot的基础理解

        slot又名插槽,是vue的内容分发机制,组件内部的模板引擎使用slot元素作为承载分发的出口。是子组件的一个模板标签元素,而这一个标签元素是否显示,以及怎么显示,是由父元素控制的。slot又分为默认插槽、具名插槽、作用域插槽。

        默认插槽:即匿名插槽,slot没有指明name属性值,就是一个默认插槽。一个组件中只能有一个默认插槽。

        具名插槽:带有name属性值的插槽,一个组件中可以有多个具名插槽。

        作用域插槽:既可以是匿名插槽,又可以是具名插槽,该插槽的不同点在于是在子组件渲染作用域插槽时,可以将子组件内部的数据传递给父组件,让父组件根据子组件传递过来的数据,决定如何渲染该插槽。实现:当子组件实例化时,获取到父组件传入的slot内容,存放在vm.$slot中,默认插槽为vm.$slot.default,具名插槽为vm.$slot.name,当组件执行渲染函数时,遇到slot标签,使用$slot的内容进行替换,此时可为插槽传递数据。

2、常见的事件修饰符

  • .stop:等同于 JavaScript 中的event.stopPropagation(),防止事件冒泡;
  • .prevent:等同于 JavaScript 中的event.preventDefault(),防止执行预设的行为(如果事件可取消,则取消该事件,而不停止事件的进一步传播);
  • .capture:与事件冒泡的方向相反,事件捕获由外到内;
  • .self:只会触发自己范围内的事件,不包含子元素;
  • .once:只会触发一次

3、v-if、v-show、v-html的原理,即v-if、v-show的区别

  • v-if会调用addIfCondition方法,生成vnode的时候,会忽略对应节点,render的时候就不会渲染
  • v-show会生成vnode,render的时候会渲染成真是的节点,只是在render的过程中,会修改节点的display属性
  • v-html会先移除节点下的所有节点,调用html方法,通过addProp添加innerHTML属性,并设置值

        v-if与v-show的区别:

  • 手段:v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样式属性控制显隐;
  • 编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换;
  • 编译条件:v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译; v-show是在任何条件下,无论首次条件是否为真,都被编译,然后被缓存,而且DOM元素保留;
  • 性能消耗:v-if有更高的切换消耗;v-show有更高的初始渲染消耗;
  • 使用场景:v-if适合运营条件不大可能改变;v-show适合频繁切换。

 4、data为什么是一个函数而不是一个对象

        js中的对象是引用数据类型,当多个实例引用一个对象的时候,只要一个实例操作这个对象,其他实例中的数据也会发生变化。vue中,数据以函数返回值的形式定义,当复用组件时,会返回一个新的data,即每个组件有自己的私有数据空间,不会感染其他组件的操作。

5、vue单页面与多页面的区别

  • SPA单页面应用:指只有一个主页面的应用,一开始只需要加载一次js、css等相关资源。所有内容都包含在主页面中,对每一个模块功能组件化。单页面应用跳转,就是切换相关组件,仅刷新局部资源。
  • MPA多页面应用:指有多个独立页面的应用,每个页面要重复加载js、css等相关资源。多页面跳转,需要整页刷新资源。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/771072.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

论文学习笔记1:Federated Graph Neural Networks: Overview, Techniques, and Challenges

文章目录 一、introduction二、FedGNN术语与分类2.1主要分类法2.2辅助分类法 三、GNN-ASSISTED FL3.1Centralized FedGNNs3.2Decentralized FedGNNs 四、FL-ASSISTED GNNS4.1horizontal FedGNNs4.1.1Clients Without Missing Edges4.1.1.1Non-i.i.d. problem4.1.1.2Graph embed…

小白福音:teamOS系统,一键部署企业网盘,实现在线预览功能

在传统的办公模式中,当我们需要查看一份文件时,往往需要下载、打开、编辑等一系列繁琐的步骤,如果是PDF、CAD、Markdown等特殊格式,还需要安装各种软件才能打开。 但最近get到了一个好用的东西,如果同事发来的文件格式…

轮廓检测(python和c++实现)

利用轮廓检测,我们可以检测物体的边界,并在图像中轻松定位。这通常是许多有趣应用的第一步,如图像前景提取、简单图像分割、检测和识别。 无人看管物体检测:公共场所的任何无人看管物体一般都被视为可疑物体。一种有效而安全的解…

一文搞懂MySsql的Buffer Pool

Buffer Pool是什么 Buffer Pool是MySQL数据库中一个非常关键的组件。数据库中的数据最终都是存放在磁盘文件上的。但是在对数据库执行增删改查操作时,不可能直接更新磁盘上的数据。因为如果直接对磁盘进行随机读写操作,那速度是相当的慢的。随便一个大磁…

联系表单提交后,自动发送邮件的实现方法?

联系表单自动邮件回执功能怎么样?如何设置邮件回执? 联系表单是用户与网站所有者沟通的重要渠道。为了提升用户体验,许多网站会在联系表单提交后自动发送确认邮件给用户。AokSend将探讨如何实现这一功能,介绍不同的方法和步骤&am…

如何在 Selenium Python 中解决验证码 | 2024 完整指南

由于在进行网络自动化时遇到验证码是让许多人感到不知所措的问题。这些验证码专为区分人类用户和自动化脚本而设计,对于使用Selenium进行网络爬虫或自动化任务而言,无疑是一个巨大的挑战。2024年的完全指南将为您提供全面的解决方案,帮助您高…

LabVIEW新能源汽车电池性能测试系统

新能源汽车的核心部件之一是电池,其性能直接关系到整车的续航里程、安全性和寿命。为了确保电池的性能和可靠性,测试是必不可少的环节。本文介绍了一种基于LabVIEW的新能源汽车电池性能测试系统,通过LabVIEW与数据采集设备的无缝集成&#xf…

【Spring Boot 源码学习】初识 ConfigurableEnvironment

《Spring Boot 源码学习系列》 初识 ConfigurableEnvironment 一、引言二、主要内容2.1 Environment2.1.1 配置文件(profiles)2.1.2 属性(properties) 2.2 ConfigurablePropertyResolver2.2.1 属性类型转换配置2.2.2 占位符配置2.…

docker容器技术、k8s的原理和常见命令、用k8s部署应用步骤

容器技术 容器借鉴了集装箱的概念,集装箱解决了什么问题呢?无论形状各异的货物,都可以装入集装箱,集装箱与集装箱之间不会互相影响。由于集装箱是标准化的,就可以把集装箱整齐摆放起来,装在一艘大船把他们…

C++基础(五):类和对象(上)

从今天开始,我们正式进入面向对象编程,这是C与C语言的重要区别,编程思想发生变化,那到底什么是面向对象编程呢?接下来,我们慢慢的深入学习。 目录 一、面向过程和面向对象初步认识 1.1 面向过程 1.2 面…

【Python】变量与基本数据类型

个人主页:【😊个人主页】 系列专栏:【❤️Python】 文章目录 前言变量声明变量变量的命名规则 变量赋值多个变量赋值 标准数据类型变量的使用方式存储和访问数据:参与逻辑运算和数学运算在函数间传递数据构建复杂的数据结构 NameE…

腾讯混元文生图开源模型推出小显存版本,6G显存即可运行,并开源caption模型

7月4日,腾讯混元文生图大模型(混元DiT)宣布开源小显存版本,仅需6G显存即可运行,对使用个人电脑本地部署的开发者十分友好,该版本与LoRA、ControlNet等插件,都已适配至Diffusers库;并…

达梦数据库 页大小与数据库字段长度的关系

对于达梦数据库实例而言,页大小 (page_size)、簇大小 (extent_size)、大小写敏感 (case_sensitive)、字符集 (charset) 这四个参数,一旦确定无法修改;如果过程中发现这些数据设置的不对,只能是重新新建数据库实例,而不…

脑启发设计:人工智能的进化之路

编者按:你可以用左手(不常用的那只手)的小指与食指拿起一件物品么? 试完你是不是发现自己竟然可以毫不费力地用自己不常用的手中,两根使用频率相对较低的手指,做一个不常做的动作。这就是人类大脑不可思议…

14-5 小语言模型SLM 百科全书

想象一下这样一个世界:智能助手不再驻留在云端,而是驻留在你的手机上,无缝理解你的需求并以闪电般的速度做出响应。这不是科幻小说;这是小型语言模型 (SLM) 的前景,这是一个快速发展的领域,有可能改变我们与…

台灯学生用哪个牌子最好?学生用台灯品牌排行榜分析

台灯学生用哪个牌子最好?护眼台灯在近年来成为家长和长时间使用电子设备人群关注的家电/学生产品。对于家中有孩子或经常面对电子屏幕的人士来说,很多人可能已经对这类产品有所了解并进行了购买。然而,部分家长对护眼台灯的认识还不够深入&am…

windows安装jdk21

下载 下载zip解压 设置环境变量 设置JAVA_HOME环境变量 Path环境变量添加如下值%HAVA_HOME%\bin 打开新的cmd,输入java --version查看效果

CentralCache中心缓存

目录 一.CentralCache基本结构 1.CentralCache任务 2.基本结构 二.函数调用层次结构/.h文件 三.Span和SpanList的封装 Span:大块内存跨度 PAGE_ID _pageId size_t _objSize _useCount SpanList:管理Span的双链表(桶锁) 四.获取大块内存GetOneSpan 五.FetchRangeObj输…

源代码防泄漏之反向沙箱方案的经验分享

反向沙箱(Reverse Sandbox)是一种安全技术,主要用于检测和分析恶意软件的行为。与传统沙箱不同,反向沙箱的重点在于模拟恶意软件的预期运行环境,以诱导恶意软件展示其真实行为。这种技术可以帮助安全专家更深入地理解恶…

四川蔚澜时代电子商务有限公司打造抖音电商服务新高地

在数字化浪潮汹涌澎湃的今天,电商行业以其独特的魅力和强大的市场潜力,成为了推动经济增长的新引擎。四川蔚澜时代电子商务有限公司,作为这个领域的佼佼者,正以其专业的服务、创新的理念和卓越的实力,引领抖音电商服务…