vue3基础学习

news2024/11/19 10:17:22

##以前怎么玩的?

###MVC

Model:Bean

View:视图

Controller

##vue的ref reactive

ref:必须是简单类型

reactive:必须不能是简单类型

###创建一个Vue项目

npm init vue@latest

###生命周期

###setup相关

####Vue2的一些写法 -- options API

####Vue3的写法 组合式API

Vue3.2以后,退出语法糖

###响应式基础 -- 6个API

####reactive和ref

reactive比较大的限制:

--仅对对象类型有效(obj,arr,map,set)

####computed

computed注意事项:

1.计算函数不应该有副作用;

2.避免直接修改计算属性值

####readonly

####watch和watchEffect

#####watchEffect

1.第一次渲染的时候立即执行

2.接收一个回调函数作为参数,并且该回调函数内,如果有响应式变量,也会立即执行;

3.返回一个新的函数,我们可以当组件卸载时,停止监听;

4.回调方法内,有一个用于清除副作用的函数.

#####watch

watch功能和之前vue2watch功能一样.

 ###指令

####v-text

#####v-html

相当于react -- setDangerousInnerHtml

####v-show和v-if

####v-for 

####v-on @

####v-bind   :

#vue adv 

##windicss

windicss是一个原子化的css 

###配置

1.安装

yarn add windicss vite-plugin-windicss

2. 配置

在vite的项目下

3.css引入

4.添加配置文件

 

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

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

相关文章

Python —— Mock接口测试

前言 今天跟小伙伴们一起来学习一下如何编写Python脚本进行mock测试。 什么是mock? 测试桩,模拟被测对象的返回,用于测试 通常意义的mock指的就是mock server, 模拟服务端返回的接口数据,用于前端开发,第三方接口联调 为什么…

数据结构与算法-哈夫曼树与图

🌞 “永远积极向上,永远豪情满怀,永远热泪盈眶!” 哈夫曼树与图 🎈1.哈夫曼树🔭1.1树与二叉树的转换🔭1.2森林与二叉树的转换🔭1.3哈夫曼树🔎1.3.1哈夫曼树的概念&#x…

大数据HCIE成神之路之数学(2)——线性代数

线性代数 1.1 线性代数内容介绍1.1.1 线性代数介绍1.1.2 代码实现介绍 1.2 线性代数实现1.2.1 reshape运算1.2.2 转置实现1.2.3 矩阵乘法实现1.2.4 矩阵对应运算1.2.5 逆矩阵实现1.2.6 特征值与特征向量1.2.7 求行列式1.2.8 奇异值分解实现1.2.9 线性方程组求解 1.1 线性代数内…

基于STM32单片机数字电压表自动切换量程及源程序

一、系统方案 1、本设计采用这STM32单片机作为主控器。 2、液晶1602显示。 3、内部ADC采集电压0-12V,自动切换档位。 二、硬件设计 原理图如下: 三、单片机软件设计 1、首先是系统初始化 u8 i; u16 a,b,c,d; u16 adcx; float adc; unsigned char datas…

AIGC实战 - 使用变分自编码器生成面部图像

AIGC实战 - 使用变分自编码器生成面部图像 0. 前言1. 数据集分析2. 训练变分自编码器2.1 变分自编码器架构2.2 变分自编码器分析 3. 生成新的面部图像4. 潜空间算术5. 人脸变换小结系列链接 0. 前言 在自编码器和变分自编码器上,我们都仅使用具有两个维度的潜空间。…

Alien Skin Exposure2024免费版图片颜色滤镜插件

Alien Skin Exposure一款非常专业的图片后期处理软件,内含500多种照片滤镜。是一款图片后期处理功能非常强大的软件。这款软件可以对图片的后期效果做很好的处理。 打开Alien Skin Exposure软件,会显示下面这个界面,如图1. ExposureX8win-安…

爱奇艺大数据离在线混部

混部作为一种提高资源利用率、降低成本的的方案,被业界普遍认可。爱奇艺在云原生化与降本增效的过程中,成功将大数据离线计算、音视频内容处理等工作负载与在线业务进行了混部,并且取得了阶段性收益。本文重点以大数据为例,介绍从…

图解API设计风格,看一眼就忘不了了!

点击下方“JavaEdge”,选择“设为星标” 第一时间关注技术干货! 免责声明~ 任何文章不要过度深思! 万事万物都经不起审视,因为世上没有同样的成长环境,也没有同样的认知水平,更「没有适用于所有人的解决方案…

反弹Shell

概述 反弹shell(reverse shell)就是控制端监听在某TCP/UDP端口,被控端发起请求到该端口,并将其命令行的输入输出转到控制端。reverse shell与telnet,ssh等标准shell对应,本质上是网络概念的客户端与服务端…

原型网络Prototypical Network的python代码逐行解释,新手小白也可学会!!-----系列7(承接系列6)

文章目录 前言一、原始代码---保存原型点,加载原型点二、代码逐行解释 前言 此部分为原型网络的两个函数,分别为保存原型点函数和加载原型点函数,与之前的系列相承接。 一、原始代码—保存原型点,加载原型点 def save_center(self,path):datas []for …

C/C++ 获取主机网卡MAC地址

MAC地址(Media Access Control address),又称为物理地址或硬件地址,是网络适配器(网卡)在制造时被分配的全球唯一的48位地址。这个地址是数据链路层(OSI模型的第二层)的一部分&#…

端口号大揭秘:网络世界的“门牌号”有多牛?

大家好,今天我们来聊一聊网络中的端口号。如果你以为端口号只是冷冰冰的数字,那你就大错特错了。端口号,这些看似枯燥的数字背后,隐藏着一个个生动的故事。 目录 大家好,今天我们来聊一聊网络中的端口号。如果你以为端…

odoo17前端js框架的演化

odoo17发布了,从界面上看,变化还是很明显的,比16更漂亮了,本来以为源码不会发生太大的变化,结果仔细一瞧,变化也不小。 1、打包好的文件数量和大小发生了变化 打包好的文件从两个变成了一个,在…

适用于全部安卓手机的 5 大免费 Android 数据恢复

您是否面临这样一种情况,即在Android设备上丢失了一些重要文件,但不知道应该选择哪种Android数据恢复来取回它们? 如果您以前从未备份过Android数据,则很难解决问题。 本文将介绍排名前5位的免费Android数据恢复软件。 您可以获…

同花顺,通达信,东方财富股票竞价,早盘板块、概念、题材竞价数据接口

早盘板块、概念、题材竞价数据接口 量化接口地址:https://stockapi.com.cn 通过分析每天早盘的板块竞价,从而判断出今日主力资金的看好方向 地址: https://stockapi.com.cn/v1/base/bkjjzq?tradeDate2023-11-08再结合个股竞价数据筛选出自…

科大讯飞会议笔记本、GoodNotes、E人E本 功能及体验对比

科大讯飞会议笔记本、GoodNotes、E人E本功能及体验对比 【旧文档,怕失传】 通过对科大讯飞会议笔记本、基于iPad的GoodNotes以及E人E本的各项功能指标进行了实际对比,得出了以下结果: 在实际体验中,科大讯飞笔记本在录音方面表…

知道数字孪生发展的四个阶段,你就能明白数字孪生的真正价值了

数字孪生的发展经历了四个阶段。以下是每个阶段的详细描述: 1、数字孪生萌芽期:这个阶段以模型仿真驱动为特征。20世纪80年代以来,CAD、CAE、CAM等计算机建模、模拟仿真技术开始迅猛发展,并在制造业领域广泛应用。该阶段主要通过…

JSP基本表单和Request对象使用例子

表单的jsp&#xff1b; <%page contentType"text/html;charsetgbk" pageEncoding"UTF-8"%> <!DOCTYPE html> <html><head><meta http-equiv"Content-Type" content"text/html; charsetUTF-8"><titl…

2023全球边缘计算大会深圳站-核心PPT资料下载

一、峰会简介 边缘计算&#xff0c;是指在靠近物或数据源头的一侧&#xff0c;采用网络、计算、存储、应用核心能力为一体的开放平台&#xff0c;就近提供最近端服务。其应用程序在边缘侧发起&#xff0c;产生更快的网络服务响应&#xff0c;满足行业在实时业务、应用智能、安…

excel中设置图表图例的位置

例如&#xff0c;在excel中已经做好了一个折线图&#xff1a; 可以看到&#xff0c;默认图例是在图表的右侧&#xff0c;减小了图的横向展示区域。我们可以把图例放到图的上边、或者下边。 双击图表&#xff1a; 鼠标放在图例上方&#xff0c;出现了浮动文字“图例”&#…