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

vue学习笔记7

打包发布 

目标:明确打包的作用

说明:vue脚手架只是开发过程中,协助开发的工具,当真正开发完了 => 脚手架不参与上线

打包的作用:

将多个文件压缩合并成一个文件,语法降级,less sass ts 语法解析

打包命令

打包后,可以生成,浏览器能够直接运行的网 => 就是需要上线的源码

命令:yarn build

结果:在项目的根目录会自动创建一个文件夹`dist`, dist中的文件就是打包后的文件,只需要放到服务器中即可。

配置:默认情况下,需要放到服务器根目录打开,如果希望双击运行,需要配置publicPath 配成相对路径

打包优化:路由懒加载

目标:配置路由懒加载,实现打包优化

说明:当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

步骤1: 异步组件改造

步骤2: 路由中应用

Vue3的优势

Vue2 选项式 API vs Vue3 组合式API

需求:点击按钮,让数字 +1

高级软件

setup选项的写法和执行时机

高级软件人才培训专家

<script setup> 语法糖

原始复杂写法

语法糖写法

reactive()

作用:接受对象类型数据的参数传入并返回一个响应式的对象

核心步骤

1. 从 vue 包中导入 reactive 函数

2. 在 <script setup> 中执行 reactive 函数并传入类型为对象的初始值,并使用变量接收返回值

ref()

作用:接收简单类型或者对象类型的数据传入并返回一个响应式的对象

核心步骤:

1. 从 vue 包中导入 ref 函数

2. 在 <script setup> 中执行 ref 函数并传入初始值,使用变量接收 ref 函数的返回值

computed计算属性函数

计算属性基本思想和Vue2的完全一致,组合式API下的计算属性只是修改了写法

核心步骤:1. 导入computed函数

2. 执行函数 在回调参数中return基于响应式数据做计算的值,用变量接收

watch函数

作用: 侦听一个或者多个数据的变化,数据变化时执行回调函数

俩个额外参数:1. immediate(立即执行) 2. deep(深度侦听)

基础使用 - 侦听单个数据

1. 导入watch函数

2. 执行watch函数传入要侦听的响应式数据(ref对象)和回调函数

immediate

说明:在侦听器创建时立即触发回调, 响应式数据变化之后继续执行回调

deep

默认机制:通过watch监听的ref对象默认是浅层侦听的,直接修改嵌套的对象属性不会触发回调执行,需要开启deep选项

Vue3的生命周期API (选项式 VS 组合式)

生命周期函数基本使用

1. 导入生命周期函数

2. 执行生命周期函数 传入回调

执行多次

生命周期函数是可以执行多次的,多次执行时传入的回调会在时机成熟时依次执行

组合式API下的父传子

基本思想

1. 父组件中给子组件绑定属性

2. 子组件内部通过props选项接收

defineProps 原理:就是编译阶段的一个标识,实际编译器解析时,遇到后会进行编译转换

defineExpose()

默认情况下在<script setup>语法糖下组件内部的属性和方法是不开放给父组件访问的,

可以通过defineExpose编译宏指定哪些属性和方法允许访问

 

Vue3.3新特性-defineOptions

在 Vue 3.3 中新引入了 defineOptions 宏。顾名思义,主要是用来定义 Options API 的选项。可以用

defineOptions 定义任意的选项, props, emits, expose, slots 除外(因为这些可以使用 defineXXX 来做到)

 

Vue3 中的 v-model 和 defineModel

Vue3中,自定义组件上使用v-model, 相当于传递一个modelValue属性,同时触发 update:modelValue 事件

我们需要先定义 props,再定义 emits 。其中有许多重复的代码。如果需要修改此值,还需要手动调用 emit 函数。

相关文章:

vue学习笔记7

打包发布 目标&#xff1a;明确打包的作用 说明&#xff1a;vue脚手架只是开发过程中&#xff0c;协助开发的工具&#xff0c;当真正开发完了 > 脚手架不参与上线 打包的作用&#xff1a; 将多个文件压缩合并成一个文件&#xff0c;语法降级&#xff0c;less sass ts 语法…...

Unity 增量打包AssetBundle

背景 打包太慢了&#xff0c;想要没改动的资源不重新打包浪费时间。 来源 官方文章&#xff1a;https://forum.unity.com/threads/about-incremental-build-and-asset-bundle-hashes.1436032/ 官网AB介绍&#xff1a;https://learn.unity.com/tutorial/assets-resources-and…...

嵌入式八股文面试题(二)C语言算法

相关概念请查看文章&#xff1a;C语言概念。 1. 如何实现一个简单的内存池&#xff1f; 简单实现&#xff1a; #include <stdio.h> #include <stdlib.h>//内存块 typedef struct MemoryBlock {void *data; // 内存块起始地址struct MemoryBlock *next; // 下一个内…...

尚硅谷爬虫note005

一、编解码 1.get请求的quote方法 将汉字转为Unicode字符 # _*_ coding : utf-8 _*_ # Time : 2025/2/12 16:33 # Author : 20250206-里奥 # File : demo19_get请求的quote方法 # Project : PythonProject10-14# 景甜page # https://www.baidu.com/s?ieutf-8&f8&rsv…...

xml 和json互转工具

工具1 有个问题会导致springboot返回捕获的异常编程xml格式 import com.fasterxml.jackson.databind.ObjectMapper; import com.fasterxml.jackson.dataformat.xml.XmlMapper; import org.json.JSONObject; import org.json.XML; import org.w3c.dom.Document;import javax.xm…...

ElementUI 抽屉组件高度封装

在前端开发中&#xff0c;ElementUI 的el-drawer组件虽实用&#xff0c;但为满足复杂业务需求&#xff0c;如统一样式、特定交互和灵活使用&#xff0c;常需二次封装。下面将带你实现一个高度封装的 ElementUI 抽屉组件。 创建基础封装组件 创建MyDrawer.vue&#xff0c;引入e…...

深入解析:如何在C#和C/C++之间安全高效地通过P/Invoke传递多维数组

在工业控制、机器人编程和物联网等领域&#xff0c;我们经常需要让C#这样的托管语言与C/C编写的底层库进行交互。在这个过程中&#xff0c;遇到需要传递多维数组的场景时&#xff0c;许多开发者会意外遭遇System.Runtime.InteropServices.MarshalDirectiveException异常。本文将…...

轻量级在线ETL数据集成工具架构设计与技术实现深度剖析

在当今数字化时代,企业面临着海量异构数据的整合挑战。ETL(Extract, Transform, Load)工具作为数据集成的核心,负责将分散在不同数据源中的数据进行抽取、转换和加载,以构建统一的数据视图。本文将深入剖析一款基于诺依框架开发的在线ETL数据集成工具,重点阐述其架构设计…...

二、k8s项目的生命周期

项目的生命周期 创建-----------》发布-----------》更新--------》回滚----------》删除 kubectl create deployment nginx1 --imagenginx:1.22 --replicas3 基于deployment控制器创建pod 控制器的名称是nginx1 pod使用的镜像:nginx:1.22 --replicas3 pod的数量有多少 3个…...

GPT 系列模型发展史:从 GPT 到 ChatGPT 的演进与技术细节

从 GPT 到 ChatGPT&#xff0c;OpenAI 用短短几年时间&#xff0c;彻底改变了自然语言处理&#xff08;NLP&#xff09;的格局。让我们一起回顾这段激动人心的技术演进史&#xff01;&#x1f680; &#x1f539; GPT&#xff08;2018&#xff09;&#xff1a; 划时代的起点&a…...

C#语言的云计算

C#语言在云计算中的应用 引言 随着信息技术的飞速发展&#xff0c;云计算已经成为了现代计算架构的重要组成部分。传统的本地计算方式逐渐被云计算所取代&#xff0c;使得企业与开发者能够更高效地处理数据、部署应用程序以及进行资源管理。在众多编程语言中&#xff0c;C#以…...

金仓数据库-KingbaseES-学习-01-单机部署(非图形化安装)

目录 一、环境信息 二、介绍 三、下载地址 四、安装步骤 1、配置内核参数 &#xff08;1&#xff09;文件系统相关 &#xff08;2&#xff09;共享内存与信号量&#xff08;IPC&#xff09; &#xff08;3&#xff09;网络与端口配置 &#xff08;4&#xff09;关键场…...

海外服务器都有什么作用?

海外服务器具体就是指部署在中国大陆以外地区的服务器&#xff0c;企业选择租用海外服务器能够显著提高不同国家和地区用户的访问速度&#xff0c;当网站的服务器部署在目标用户所在地附近时&#xff0c;数据信息所传输的距离就会缩短&#xff0c;大大降低了网络访问的延迟度&a…...

git bash在github的库中上传或更新本地文件

一、将本地文件上传到 GitHub 仓库 1. 创建 GitHub 仓库 如果你还没有在 GitHub 上创建仓库&#xff0c;首先需要创建一个新的仓库&#xff1a; 登录到 GitHub。点击右上角的 按钮&#xff0c;选择 New repository。给你的仓库起个名字&#xff0c;并选择 Public 或 Privat…...

vue2中 computed 计算属性

文章目录 vue2中 computed 计算属性1. 什么是计算属性&#xff1f;2. 基本用法1. 定义计算属性2. 计算属性的缓存特性 3. 计算属性的高级用法1. 计算属性的 Getter 和 Setter 方法2. 计算属性的依赖追踪 4. 计算属性与方法的区别5. 实际应用案例1. 格式化数据2. 计算总价3. 动态…...

自定义基座实时采集uniapp日志

自定义基座实时采集uniapp日志 打测试包给远端现场(测试/客户)实际测试时也能实时看到日志了&#xff0c;也有代码行数显示。 流程设计 #mermaid-svg-1I5W9r1DU4xUsaTF {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid…...

基于YALMIP和cplex工具箱的微电网最优调度算法matlab仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 4.1 系统建模 4.2 YALMIP工具箱 4.3 CPLEX工具箱 5.完整工程文件 1.课题概述 基于YALMIP和cplex工具箱的微电网最优调度算法matlab仿真。通过YALMIP和cplex这两个工具箱&#xff0c;完成微电网的最优调…...

Effective Objective-C 2.0 读书笔记——内存管理(上)

Effective Objective-C 2.0 读书笔记——内存管理&#xff08;上&#xff09; 文章目录 Effective Objective-C 2.0 读书笔记——内存管理&#xff08;上&#xff09;引用计数属性存取方法中的内存管理autorelease保留环 ARCARC必须遵循的方法命名原则ARC 的自动优化&#xff1…...

蓝桥杯-洛谷刷题-day5(C++)(为未完成)

1.P1328 [NOIP2014 提高组] 生活大爆炸版石头剪刀布 i.题目 ii.代码 #include <iostream> #include <string> using namespace std;int N, Na, Nb; //0-"剪刀", 1-"石头", 2-"布", 3-"蜥", 4-"斯"&#xff1…...

conda 修复 libstdc++.so.6: version `GLIBCXX_3.4.30‘ not found 简便方法

ImportError: /data/home/hum/anaconda3/envs/ipc/bin/../lib/libstdc.so.6: version GLIBCXX_3.4.30 not found (required by /home/hum/anaconda3/envs/ipc/lib/python3.11/site-packages/paddle/base/libpaddle.so) 1. 检查版本 strings /data/home/hum/anaconda3/envs/ipc/…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

Spring AI 入门:Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...