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.mzph.cn/pingmian/40541.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用Python制作动态钟表:实时显示时间的动画

文章目录 引言准备工作前置条件 代码实现与解析导入必要的库初始化Pygame绘制钟表函数主循环 完整代码 引言 动态钟表是一种直观且实用的UI元素,能够实时显示当前时间。在这篇博客中,我们将使用Python创建一个动态钟表,通过利用Pygame库来实…

React、JSX简介、渲染列表、基础和复杂的条件渲染

目录 一、简介 1、搭建环境 2、回到项目(VScode) 3、项目核心渲染路径 4、网站资料(启动项目的方法) 二、JSX 三、实现渲染列表 四、实现条件渲染 五、实现复杂条件渲染 一、简介 1、搭建环境 npx creat-react-app reac…

YUV 颜色编码详解

YUV 简介 YUV是被欧洲电视系统所采用的一种颜色编码方法(属于PAL),是PAL和SECAM模拟彩色电视制式采用的颜色空间。在现代彩色电视系统中,通常采用三管彩色摄影机或彩色CCD摄影机进行取像,然后把取得的彩色图像信号经分…

CC6利用链分析

CC1的两条利用链,在JDK 8u71之后已修复,不可利用。 学一下不受版本限制的CC6利用链 分析版本 Commons Collections 3.2.1 JDK 8u65 环境配置参考JAVA安全初探(三):CC1链全分析 分析过程 我的Github主页Java反序列化学习同步更新,有简单…

java.lang.IllegalArgumentException: pointerIndex out of range

问题分析 这是ViewPager自身对于多点触控处理的bug,该bug可以追溯到Android4.4。该问题会导致应用崩溃。根本原因在于没有调用 super.onInterceptTouchEvent(); 造成 mActivePointerIdactivePointerIndex的值不能正确获取。导致父类 onTouchEvent取值错误&#xff…

【WEB前端】---HTML---结构---笔记

目录 1.标签---单标签和双标签 1.1单标签 1.2双标签 2.基本结构标签 2.1HTML标签 2.2文档头部标签 2.3文档标题标签 2.4文档的主题标签 3.常用的标题标签 (n∈[1,6]) 4.段落标签 5.换行标签 6.文本格式化标签 6.1粗体 6.2倾斜 6.3删除线 6.4下划线 7.div和spa…

服务器工具集合推荐

推荐一个朋友开源的服务器运维整合工具,目前的功能包括: ddns,rdp、ssh终端、ftp、http代理,支持在线文件编辑,文件管理,docker,进程,系统监控、wol唤醒,电脑远程开机,点对点&#…

[Qt] Qt for android, gradle-8.3-bin.zip (No such file or directory)

前言: android 工程需要 gradle 作为打包工具,Qt for android 如果想要打包 apk 同样需要使用 gradle,但是 包括 Android studio 在内的诸多 Android IDE 工具都没有自带的 gradle 工具,可能是因为 gradle 的版本迭代较快&#x…

深度分析和对比本地大语言模型Ollama和LocalAI

前言 在充满活力的人工智能(AI)世界中,开源工具已成为开发人员和组织利用LLM(大型语言模型)力量的重要资源。这些工具通过提供对高级LLM模型的访问权限,使各种用户能够构建创新和前沿的解决方案。在众多可…

AI工具大盘点!打工人必备的几款效率神器!

前言 在这个AI技术大放异彩的时代,找到合适的工具,可以让我们的工作效率翻倍。作为一名AI工具测评博主,我今天要向大家推荐几款我亲自体验并认为非常实用的AI工具。它们不仅能够提升你的工作效率,还能让你在职场上更加得心应手。…

为本地化准备营销材料的几个步骤

为本地化准备营销材料涉及几个关键步骤,以确保内容在文化上合适、语言上准确,并与目标受众相关。以下是五个基本步骤: 进行市场调查 了解目标市场至关重要。进行深入研究,以收集有关目标地区受众的文化细微差别、消费者行为、地…

Python异步IO之协程

参考自仓库https://github.com/SparksFly8/Learning_Python/tree/master/coroutine 协程(coroutine)在多任务协作中体现的效率又极为的突出。Python中执行多任务还可以通过多进程或一个进程中的多线程来执行,但两者之中均存在一些缺点&#…

【机器学习】机器学习与图像识别的融合应用与性能优化新探索

文章目录 引言第一章:机器学习在图像识别中的应用1.1 数据预处理1.1.1 数据清洗1.1.2 数据归一化1.1.3 数据增强 1.2 模型选择1.2.1 卷积神经网络1.2.2 迁移学习1.2.3 混合模型 1.3 模型训练1.3.1 梯度下降1.3.2 随机梯度下降1.3.3 Adam优化器 1.4 模型评估与性能优…

【软件测试】Python自动化测试框架:unittest测试用例编写及执行

🍅 视频学习:文末有免费的配套视频可观看 🍅 点击文末小卡片,免费获取软件测试全套资料,资料在手,涨薪更快 本文将介绍 unittest 自动化测试用例编写及执行的相关内容,包括测试用例编写、测试用…

Element中的表格组件Table和分页组件Pagination

简述:在 Element UI 中,Table组件是一个功能强大的数据展示工具,用于呈现结构化的数据列表。它提供了丰富的特性,使得数据展示不仅美观而且高效。而Pagination组件是一个用于实现数据分页显示的强大工具。它允许用户在大量数据中导…

科普文:linux服务器性能调优之内核参数

https://zhouxx.blog.csdn.net/article/details/140168148 在写上面这篇“科普文:Linux服务器性能调优概叙”文章时,由于篇幅原因,将部分内核参数独立出来。 内核参数文件位置:/etc/sysctrl.conf 内核修改和生效命令:s…

【项目日记(四)】搜索引擎-Web模块

❣博主主页: 33的博客❣ ▶️文章专栏分类:项目日记◀️ 🚚我的代码仓库: 33的代码仓库🚚 🫵🫵🫵关注我带你了解更多项目内容 目录 1.前言2.前端模块2.1页面设计2.2后端交互 3.部署到云服务器4.总结 1.前言 在前面的文…

【Symfony异步任务处理】掌握队列系统的高效之道

标题:【Symfony异步任务处理】掌握队列系统的高效之道 在现代Web应用开发中,处理耗时的任务(如发送邮件、处理文件上传等)时,队列系统是一种非常有效的方式。Symfony作为一个功能丰富的PHP框架,提供了强大…

c语言--字符串处理之分割strtok

strtok() char *strtok(char s[], const char *delim); 参数: s[]是原字符串,delim为分隔符 返回:字符串拆分后的首地址 第一次拆分,参1 传待拆分的原串。 第1 次拆分时,参1传 NULL. strtok案例解析: #i…

什么是浪涌电压_浪涌电压的种类及保护器件的选型

一、浪涌电压的定义 浪涌电压,也称为浪涌电流,是指电路在遭雷击或在接通、断开电感负载或大型负载时产生的瞬时过电压或过电流。这种瞬变干扰通常发生在极短的时间内,如几百万分之一秒,但峰值电压可能极高,可能达到数…