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

web学习笔记(五十九)

目录

1.style样式

1.1作用域 scoped

1.2 less和 sass

1.3  less和 sass两者的区别

2.  计算属性computed

3. 响应式基础reactive()

4.  什么是MVVM?


1.style样式

1.1作用域 scoped

scoped表示样式作用域,把内部的样式仅限于当前组件模板生效,其他的vue文件不生效,如果不加这个关键字默认是全局生效的。

 <style  scoped>
.redu {position: absolute;top: -1vh;right: 0px;
}
.div3{width: 100%;position: absolute;top:3vh;left: 0px;
}
</style>

1.2 less和 sass

这两个都是css的辅助工具,使用这个辅助工具在style标签内部用嵌套的方式来编写样式。通过选择器的嵌套来表示标签之间的层级关系。在使用这个两个工具时都需要在终端使用npm i来下载对应的文件,需要注意的是:sass在下载时用的是npm i sass命令,但在style标签内部进行引用时使用的是 lang="scss",而less则是统一的。

<template><div class="less"><p @click="setCount">count: {{ count }}</p><p @click="changeArr">{{ arr }}</p><p @click="changeLives">{{ lives }}</p><div><a href="#">百度一下</a></div><main><div>123</div></main></div>
</template>
<style lang="scss" scoped>
$fontsize: 26px;
.less {width: 100vw;height: 100px;background-color: red;div {//.less div{}  表示.less后代的所以div的样式background-color: yellow;}> div {background-color: aqua;> a {//.less >div>afont-size: $fontsize;}}p {font-size: $fontsize;}
}
</style>

1.3  less和 sass两者的区别

  1. sass的功能比less强大,更像是一个独立的编程语言,我们之前学过的前端框架Bootstrap 4 就是基于 Sass 开发的。
  2. Less是基于JavaScript,是在客户端进行处理的;Sass是基于Ruby,是在服务器端进行处理的。
  3. 在定义变量时Less和Sass中的唯一区别就是Less用@,Sass用$。

2.  计算属性computed

计算属性特点:

  •   需要根据某一个或多个响应式数据的变化,计算得出一个新的结果(可以是样式对象,也可以是一个值),供组件模板使用;
  •   计算属性必须返回一个结果;
  • 计算属性会自动监测到函数内部响应式数据的变化,根据新的响应数据,重新计算结果。
  •  computed内部如果存在多个响应式数据,任何一个发生变化,计算属性仍然会重新计算。
    <template><div><button @click="isshow = true">显示</button><div :class="{ test: true, active: isshow }" :style="newStyle">测试div</div><div @click="isshow = false" v-show="isshow" class="fixed"></div></div></template><style lang="less" scoped>.active {font-size: 30px;color: blue !important;}.test {width: 100vw;height: 200px;background-color: red;color: yellow;}.fixed {position: fixed;width: 100vw;height: 100vh;background-color: rgba(100, 100, 190, 0.5);left: 0;top: 0;}</style><script>import { ref, computed } from "vue";export default {setup() {const isshow = ref(false);const newStyle = computed(() => {if (isshow.value) {return {fontSize: "40px",color: "blue",textAlgin: "center"};} else {return {fontSize: "16px",color: "yellow",textAlgin: "left"};}});return {isshow,newStyle};}};</script>

3. 响应式基础reactive()

reactive:组合式API,只能声明引用类型数据。数组和对象,不太适用于请求,请求推荐使用ref,通过修改ref.value来修改内部的值。

Proxy 代理对象类型,通过它实现深度响应式

<script setup>
import { ref, reactive } from "vue";
import http from "@/utlis/http";
const count = ref(0);
const setCount = () => {count.value++;
};
// reactive:组合式API,只能声明引用类型数据。数组和对象,不太适用于请求,请求推荐使用ref,通过修改ref.value来修改内部的值。
const arr = reactive([1, 2, 3, 4, [100, 200]]); //元素增删改都具备响应式。
console.log(arr); //Proxy 代理对象类型,通过它实现深度响应式// const arr = reactive([1, 2, 3, 4, [100, 200]]);
const changeArr = () => {arr[0] = 100;// arr.push(100);arr[4][1] = 300;
};
// let lives = reactive([]);
let lives = reactive({list:[]});
const changeLives = () => {lives.list[0].roomName = "测试";
};
const {data: { list }
} = await http("/hgapi/live/cate/newRecList?offset=0&cate2=wzry&limit=5");
// console.log(list);
lives.list = list;
console.log(lives); //此时lives是普通数组,不是Proxy
</script>

4.  什么是MVVM?

MVVM是model-view-viewModel的简写, 它是一种开发模式, 它实现了视图和数据逻辑之间的分离,  model模型指的是后端传递的数据, view视图指的是所看到的页面, viewModel是连接视图view和模型model的桥梁, 从而实现模型model到视图view的转化 和 视图view到模型model的转化, 也就是我们所说的双向数据绑定, 使用MVVM模式实现的前端框架有 vue 和 react。

 

相关文章:

web学习笔记(五十九)

目录 1.style样式 1.1作用域 scoped 1.2 less和 sass 1.3 less和 sass两者的区别 2. 计算属性computed 3. 响应式基础reactive() 4. 什么是MVVM? 1.style样式 1.1作用域 scoped scoped表示样式作用域&#xff0c;把内部的样式仅限于当前组件模板生效&#xff0c;其…...

UE5 UE4 快速定位节点位置

在材质面板中&#xff0c;找到之前写的一个节点&#xff0c;想要修改&#xff0c;但是当时写的比较多&#xff0c;想要快速定位到节点位置. 在面板下方的 Find Results面板中&#xff0c;输入所需节点&#xff0c;找结果后双击&#xff0c;就定位到该节点处。 同理&#xff0c;…...

go routing 之 gorilla/mux

1. 背景 继续学习 go 2. 关于 routing 的学习 上一篇 go 用的库是&#xff1a;net/http &#xff0c;这次我们使用官方的库 github.com/gorilla/mux 来实现 routing。 3. demo示例 package mainimport ("fmt""net/http""github.com/gorilla/mux&…...

新火种AI|警钟长鸣!教唆自杀,威胁人类,破坏生态,AI的“反攻”值得深思...

作者&#xff1a;小岩 编辑&#xff1a;彩云 在昨天的文章中&#xff0c;我们提到了谷歌的AI Overview竟然教唆情绪低迷的网友“从金门大桥跳下去”。很多人觉得&#xff0c;这只是AI 模型的一次错误判断&#xff0c;不会有人真的会因此而照做。但现实就是比小说电影中的桥段…...

AAA实验配置

一、实验目的 掌握AAA本地认证的配置方法 掌握AAA本地授权的配置方法 掌握AAA维护的方法 1.搭建实验拓扑图 2.完成基础配置&#xff1a; 3.使用ping命令测试两台设备的连通性&#xff1a; 二、配置AAA 1.打开R1&#xff1a;配置AAA方案 这两个方框内的可以改名&#xff0c…...

Maven高级详解

文章目录 一、分模块开发与设计分模块开发的意义模块拆分原则 分模块开发(模块拆分)创建Maven模块书写模块代码通过maven指令安装模块到本地仓库(install指令) 二、依赖管理依赖传递可选依赖排除依赖可选依赖和排除依赖的区别 三、聚合与继承聚合工程聚合工程开发创建Maven模块…...

C++的算法:模拟算法

模拟算法是一种基于事物运动变化过程的模型,通过计算机程序来模拟实际系统行为或过程的方法。在C++中,模拟算法常用于解决复杂系统或过程的建模与仿真问题。本文将介绍模拟算法的实现思路及实际应用,并通过具体的实例来展示如何在C++中实现模拟算法。 一、模拟算法的实现思…...

Spring boot集成easy excel

Spring boot集成easy excel 一 查看官网 easyexcel官方网站地址为easyexcel官网&#xff0c;官网的信息比较齐全&#xff0c;可以查看官网使用easyexcel的功能。 二 引入依赖 使用easyexcel&#xff0c;首先要引入easyexcel的maven依赖&#xff0c;具体的版本根据你的需求去…...

【开发 | 环境配置】解决 VSCode 编写 eBPF 程序找不到头文件

问题描述&#xff1a; 在使用 vscode 编写 eBPF 程序时&#xff0c;如果不做一些头文件定位的操作&#xff0c;默认情况下头文件总是带有“红色下划线”&#xff0c;并且大部分的变量不会有提示与补全。 在编写代码文件较小时&#xff08;或者功能需求小时&#xff09;并不会…...

View->Bitmap缩放到自定义ViewGroup的任意区域

Bitmap缩放和平移 加载一张Bitmap可能为宽高相同的正方形&#xff0c;也可能为宽高不同的矩形缩放方向可以为中心缩放&#xff0c;左上角缩放&#xff0c;右上角缩放&#xff0c;左下角缩放&#xff0c;右下角缩放Bitmap中心缩放&#xff0c;包含了缩放和平移两个操作&#xf…...

十种常用数据分析方法

描述性统计分析&#xff08;Descriptive Statistics&#xff09; 使用场景&#xff1a;用来总结数据的基本特征&#xff0c;如平均值、中位数、标准差等。 优势&#xff1a;简单易懂&#xff0c;快速总结数据。 劣势&#xff1a;无法深入挖掘数据的潜在关系。 模拟数据及示例…...

拉格朗日插值及牛顿差商方法的实现(Matlab)

一、问题描述 拉格朗日插值及牛顿差商方法的实现。 二、实验目的 掌握拉格朗日插值和牛顿差商方法的原理&#xff0c;能够编写代码实现两种方法&#xff1b;能够分析多项式插值中的误差。 三、实验内容及要求 利用拉格朗日插值及牛顿差商方法估计1980 年的人口&#xff0c;并…...

【InternLM实战营第二期笔记】02:大模型全链路开源体系与趣味demo

文章目录 00 环境设置01 部署一个 chat 小模型作业一 02 Lagent 运行 InternLM2-chat-7B运行一个工具调用解方程 03 浦语灵笔2进阶作业 第二节课程视频与文档&#xff1a; https://www.bilibili.com/video/BV1AH4y1H78d/ https://github.com/InternLM/Tutorial/blob/camp2/hell…...

Postgresql源码(134)优化器针对volatile函数的排序优化分析

相关 《Postgresql源码&#xff08;133&#xff09;优化器动态规划生成连接路径的实例分析》 上一篇对路径的生成进行了分析&#xff0c;通过make_one_rel最终拿到了一个带着路径的RelOptInfo。本篇针对带volatile函数的排序场景继续分析subquery_planner的后续流程。 subquer…...

DES加密算法笔记

【DES加密算法&#xff5c;密码学&#xff5c;信息安全】https://www.bilibili.com/video/BV1KQ4y127AT?vd_source7ad69e0c2be65c96d9584e19b0202113 根据此视频学习 DES是对称密码中的分组加密算法 (分组加密对应流加密算法) 流加密算法就是一个字节一个字节加密 分组加…...

C语⾔:内存函数

1. memcpy使⽤和模拟实现&#xff08;对内存块的复制&#xff0c;不在乎类型&#xff09; void * memcpy ( void * destination, const void * source, size_t num ); • 函数memcpy从source的位置开始向后复制num个字节的数据到destination指向的内存位置。 • 这个函数在遇…...

SqliSniper:针对HTTP Header的基于时间SQL盲注模糊测试工具

关于SqliSniper SqliSniper是一款基于Python开发的强大工具&#xff0c;该工具旨在检测HTTP请求Header中潜在的基于时间的SQL盲注问题。 该工具支持通过多线程形式快速扫描和识别目标应用程序中的潜在漏洞&#xff0c;可以大幅增强安全评估过程&#xff0c;同时确保了速度和效…...

3W 1.5KVDC 隔离 宽范围输入,双隔离双输出 DC/DC 电源模块——TPD-3W系列

TPD-3W系列产品是专门针对线路板上分布式电源系统中需要产生一组与输入电源隔离的双隔离双电源的应用场合而设计。该产品适用于&#xff1a;1&#xff09;输入电源的电压变化范围≤2&#xff1a;1 &#xff1b;2&#xff09;输入输出之间要求隔离≤1500VDC&#xff1b;3&#x…...

[java基础揉碎]文件IO流

目录 文件 什么是文件 文件流​编辑 常用的文件操作 创建文件方式一 创建文件方式二 创建文件方式三 tip:为什么new file 了还有执行createNewFile?new File的时候其实是在内存中创建了文件对象, 还没有在磁盘中, 当执行createNewFile的时候才是往磁盘中写入​编辑 …...

[面经] 西山居非正式面试(C++)

前言 这次面试是我第一次面试&#xff0c;而且我也并没有做好准备&#xff0c;应该说几乎就是临场发挥&#xff0c;面试的时间与我推测的相差太大&#xff0c;几乎就是做完简历的下一天就马上去面试了&#xff0c;有不少地方自己没能很好的答出&#xff0c;故做此记录。 关于…...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...

Spring是如何解决Bean的循环依赖:三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中,Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌,形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路,例如: 双向依赖:Bean A 依赖 Bean B,同时 Bean B 也依赖 Bean A(A↔B)。链条循环: Bean A → Bean…...

深度学习水论文:mamba+图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...