当前位置: 首页 > news >正文

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等相关资源。多页面跳转,需要整页刷新资源。

相关文章:

vue---基本原理(二)

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

桂花网蓝牙网关X1000:引领物联网新时代的智能连接

在物联网技术飞速发展的今天,蓝牙网关作为连接蓝牙设备与互联网的关键设备,其性能与稳定性直接影响到物联网系统的整体运行效果。桂花网蓝牙网关X1000凭借其卓越的性能和广泛的应用场景,成为了物联网领域的佼佼者。 一、产品概述 桂花网蓝牙…...

JAVA案例模拟电影信息系统

一案例要求: 二具体代码(需要在同一个包下创建三个类) Ⅰ:实现类 package 重修;import java.util.Random; import java.util.Scanner;public class first {public static void main(String[] args) {javabean[]moviesnew javabean[4];movies[0] new ja…...

基于Hadoop平台的电信客服数据的处理与分析③项目开发:搭建基于Hadoop的全分布式集群---任务10:Hive安装部署

任务描述 任务内容为安装并配置在Hadoop集群中使用Hive。 任务指导 Hive是一个基于Hadoop的数据仓库框架,在实际使用时需要将元数据存储在数据库中 具体安装步骤如下: 1. 安装MySQL数据库(已安装) 2. 解压缩Hive的压缩包 3…...

第一百四十二节 Java数据类型教程 - Java字符数据类型

Java数据类型教程 - Java字符数据类型 Character类的一个对象包装一个char值。 字符类包含isLetter()和isDigit()方法来检查字符是否为字母和数字。 toUpperCase()和toLowerCase()方法将字符转换为大写和小写。 该类提供了一个构造函数和一个工厂valueOf()方法来从char创建对…...

AI 绘画的常用技巧和操作方法

随着人工智能技术的飞速发展,AI 绘画已经成为设计和艺术领域的一股新兴力量。无论是设计师、艺术家,还是普通的科技爱好者,都能通过 AI 绘画工具创造出令人惊叹的作品。 AI 绘画的基本原理 AI 绘画的核心在于机器学习算法。通过训练大量的图像…...

Kafka入门到精通(四)-SpringBoot+Kafka

一丶IDEA创建一个空项目 二丶添加相关依赖 <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springf…...

起飞,纯本地实时语音转文字!

简介 偶然在 github 上翻到了这个项目 https://github.com/k2-fsa/sherpa-ncnn 在没有互联网连接的情况下使用带有 ncnn 的下一代 Kaldi 进行实时语音识别。支持 iOS、Android、Raspberry Pi、VisionFive2、LicheePi4A等。 也就是说语音转文字可以不再借助网络服务的接口&am…...

SQL面试题练习 —— 找出所有连续未登录5天及以上的用户并提取出这些用户最近一次登录的日期

目录 1 题目2 建表语句3 题解 1 题目 找出所有连续未登录5天及以上的用户并提取出这些用户最近一次登录的日期 样例数据 ----------------------------------------------- | user_login.user_id | user_login.login_date | ---------------------------------------------…...

微深节能 煤码头自动化翻堆及取料集控系统 格雷母线

微深节能格雷母线高精度位移测量系统是一种先进的工业自动化位置检测解决方案&#xff0c;它被广泛应用于煤码头自动化翻堆及取料集控系统中&#xff0c;以实现对斗轮堆取料机等大型机械设备的精准定位和自动化控制。 系统原理简述&#xff1a; 格雷母线系统的工作原理基于电磁…...

CSS 背景添加白色小圆点样式

css也是开发过程中不可忽视的技巧 此专栏用来纪录不常见优化页面样式的css代码 效果图: 未添加之前: 代码: background: radial-gradient(circle at 1px 1px, #3d3c3c 2px, transparent 0);background-size: 20px 25px;...

【HTML入门】第一课 - 网页标签框架

这一节&#xff0c;我们说一下学习前端开发的话&#xff0c;最入门的也是非常重要的一门可成&#xff0c;也就是HTML。HTML标签&#xff0c;是网页的重要组成部分&#xff0c;可以说&#xff0c;你看到网页上的内容&#xff0c;都是基于HTML标签呈现出来的。 这一小节呢&#…...

【DevOps】Elasticsearch集群JVM参数调整及滚动重启指南

目录 概述 准备工作 滚动重启步骤 1. 禁用分片分配&#xff08;可选&#xff09; 2. 关闭索引写操作 3. 检查集群状态 4. 重启Master节点 5. 重启Data节点 6. 重新开启索引写操作 7. 启用分片分配&#xff08;如果之前禁用了&#xff09; 8. 监控集群状态 结论 概述…...

软设之多态

在面向对象的语言中&#xff0c;多态就是相同方法&#xff0c;不同的表现。 重写和重载时多态具体的表现形式。 重载&#xff0c;举个例子&#xff0c;有一个猫类&#xff0c;定义了一个叫的方法&#xff0c;正常叫的值是“喵喵”&#xff0c;愤怒时叫的值是“喵呜” 重写&a…...

SD NAND时序解析

一、SD NAND时序的重要性 在SD NAND的数据传输过程中&#xff0c;时序起着至关重要的作用。正确的时序确保了数据能够准确无误地在主机和SD NAND之间传输。 二、命令与读写时序 SD NAND的通信基于命令和数据传输&#xff0c;遵循以下时序规则&#xff1a; 命令与响应交互&…...

CSS-实例-div 水平居中 垂直靠上

1 需求 2 语法 3 示例 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>表格水平居中、垂直靠上示例…...

数据分析入门指南:从基础概念到实际应用(一)

随着数字化时代的来临&#xff0c;数据分析在企业的日常运营中扮演着越来越重要的角色。从感知型企业到数据应用系统的演进&#xff0c;数据驱动的业务、智能优化的业务以及数智化转型成为了企业追求的目标。在这一过程中&#xff0c;数据分析不仅是技术的运用&#xff0c;更是…...

ArcGIS Pro三维空间分析、专题制图、遥感制图全流程系统教学

ESRI宣布&#xff1a;ArcGIS 10.8.2 是 ArcMap 的当前版本&#xff0c;在 2026 年 3 月 1 日之前将继续受支持。我们没有计划在 2021/22 年随 ArcGIS 版本一起发布 ArcMap 10.9.x。这意味着 10.8.x 系列将是 ArcMap 的最终版本系列&#xff0c;并将在 2026 年 3 月 1 日之前受支…...

Redis 7.x 系列【17】四种持久化策略

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Redis 版本 7.2.5 源码地址&#xff1a;https://gitee.com/pearl-organization/study-redis-demo 文章目录 1. 概述2. 案例演示2.1 无持久化2.2 RDB2.3 AOF2.4 混合模式2.4.1 方式一&#xff1a;…...

开发经验:go切片的继承

package main import ( "errors" "fmt" ) // LimitedSlice 是一个封装了切片的结构体&#xff0c;用于限制切片的最大容量 type LimitedSlice struct { slice []int maxCap int } // NewLimitedSlice 创建一个新的LimitedSlice实例&#xff…...

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

Python爬虫实战:研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...

Mac软件卸载指南,简单易懂!

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

虚拟电厂发展三大趋势:市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

08. C#入门系列【类的基本概念】:开启编程世界的奇妙冒险

C#入门系列【类的基本概念】&#xff1a;开启编程世界的奇妙冒险 嘿&#xff0c;各位编程小白探险家&#xff01;欢迎来到 C# 的奇幻大陆&#xff01;今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类&#xff01;别害怕&#xff0c;跟着我&#xff0c;保准让你轻松搞…...

CRMEB 中 PHP 短信扩展开发:涵盖一号通、阿里云、腾讯云、创蓝

目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为&#xff1a;一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...