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

uni-app学习笔记(二)--vue页面代码的构成和新建页面

news 来源：原创 2025/7/28 3:46:06

vue页面的构成

一.template

模板区，主要放html布局，注意，如果是开发uni-app，模板区不要放div,h1等标签了，用了在小程序和app端起不到作用。具体应该使用哪些组件，可在uni-app官网上查看：组件-->内置组件组件使用的入门教程 | uni-app官网

来看下template区域的代码，最外层的template是必不可少的

<template><view class="content"><image class="logo" src="/static/logo.png"></image><view class="text-area"><text class="title">{{title}}</text></view><view>aaa</view><view>bbb</view><view>ccc</view></view>
</template>

二.script 是逻辑部分

要实现的功能，主要在这部分进行控制。基于vue3

<script setup></script>

三.css样式

用于控制页面元素的样式，一般位于最下面

<style lang="scss">.layout {border: 5px solid red;.box1{border:2px solid blue;}.box2{border:1px solid green;}}
</style>

新建页面

如果勾选创建同名目录，那么会创建一个跟页面名同名的目录，同时要勾选在pages.json中注册以便能路由跳转找到相应的页面。勾选以后HBuilder X会自动在pages.json添加对应的路由

"pages": [ //pages数组中第一项表示应用启动页{"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app"}},{"path" : "pages/demo1/demo1","style" : {"navigationBarTitleText" : "demo"}},{"path" : "pages/demo2/demo2","style" : {"navigationBarTitleText" : "demo"}}

然后使用浏览器访问http://localhost:5173/#/pages/demo1/demo1 即可访问新页面了

如果没有出现，可尝试把HBuilder X内置浏览器关闭后刷新，或把HBuilder X关闭后重新运行。

uni-app学习笔记(二)--vue页面代码的构成和新建页面

vue页面的构成一.template 模板区，主要放html布局，注意，如果是开发uni-app，模板区不要放div,h1等标签了，用了在小程序和app端起不到作用。具体应该使用哪些组件，可在uni-app官网上查看：组件-…...

编程日记 2025/7/28 3:46:06

机器语言程序、汇编语言程序、硬件描述语言程序、编译程序、解释程序和链接程序

程序类型定义与核心特征处理对象 / 输入输出结果所属领域典型例子 / 作用机器语言程序由二进制指令（0/1 序列）构成，可被 CPU 直接执行，与硬件架构强绑定。无（直接执行）无（直接运行）低…...

编程日记 2025/7/26 18:08:25

智能语音助手的未来：从交互到融合

摘要随着人工智能技术的不断进步，智能语音助手已经成为我们生活中不可或缺的一部分。从简单的语音指令到复杂的多模态交互，语音助手正在经历一场深刻的变革。本文将探讨智能语音助手的发展历程、当前的技术瓶颈以及未来的发展方向，特别是其在…...

编程日记 2025/7/27 1:29:18

Redis从基础到高阶应用：核心命令解析与延迟队列、事务消息实战设计

Redis基础知识 #切换数据库 bd:0>select 2 "OK" bd:2>dbsize "0" #清空数据库 bd:0>flushdb "OK" #设置值 bd:0>set name "lyt" "OK" #查看所有key bd:0>keys *1) "name" #获取key bd:0>get …...

编程日记 2025/7/24 1:05:31

操作系统原理实验报告

操作系统原理课程的实验报告汇总实验三：线程的创建与撤销实验环境：计算机一台，内装有VC、office等软件实验日期：2024.4.11 实验要求： 1.理解：Windows系统调用的基本概念，进程与线程的基…...

编程日记 2025/7/24 12:07:27

Python爬虫实战：研究nodejs aes加密

1. 引言 1.1 研究背景与意义在当今数字化时代，Web 数据的价值日益凸显。通过爬虫技术获取公开数据并进行分析，能够为企业决策、学术研究等提供有力支持。然而，为了保护数据安全和隐私，许多网站采用了加密技术对数据进行保护，其中 AES 加密是一种常见且安全的加密算法。…...

编程日记 2025/7/27 13:33:24

线程的一些事（2）

在java中，线程的终止，是一种“软性”操作，必须要对应的线程配合，才能把终止落实下去然而，系统原生的api其实还提供了，强制终止线程的操作，无论线程执行到哪，都能强行把这个线程干掉…...

编程日记 2025/7/24 4:29:23

基于 PostgreSQL 的 ABP vNext + ShardingCore 分库分表实战

🚀 基于 PostgreSQL 的 ABP vNext ShardingCore 分库分表实战 📑 目录 🚀 基于 PostgreSQL 的 ABP vNext ShardingCore 分库分表实战✨ 背景介绍🧱 技术选型🛠️ 环境准备✅ Docker Compose（多库 & 读…...

编程日记 2025/7/25 1:08:03

御网杯2025 Web，Msic，密码 WP

Web YWB_Web_xff 审计代码，发现需要$cip2.2.2.1 使用burpsuite抓包，添加X-Forwarded-For:2.2.2.1 然后得到flag YWB_Web_未授权访问更加题目描述知道需要admin登录，但是现在是guest。使用burpsuite抓包发现cookie里面存在user&#xff…...

编程日记 2025/7/22 17:14:10

tensorflow 1.x

简介 TensorFlow：2015年谷歌，支持python、C，底层是C，主要用python。支持CNN、RNN等算法，分CPU TensorFlow/GPU TensorFlow。 TensorBoard：训练中的可视化。快捷键：shiftenter执行命令,Tab键进…...

编程日记 2025/7/27 6:29:05

[ERTS2012] 航天器星载软件形式化模型驱动研发 —— 对 Scade 语言本身的影响

在《从ERTS学习SCADE发展》中提到，在 ERTS 会议中，Scade团队会在该会议中介绍与Scade相关的工作。在 ERTS 2012 中，Scade 团队介绍了使用Scade作为主要工具，应用在航天器星载软件开发中的相关话题。原材料可参考《Formal Model D…...

编程日记 2025/7/23 8:40:23

Spring Boot 集成 Flink CDC 实现 MySQL 到 Kafka 实时同步

Spring Boot 集成 Flink CDC 实现 MySQL 到 Kafka 实时同步 📌 项目背景在大数据实时处理场景中，数据库变更数据的捕获与传输是关键环节。Flink CDC 提供了从 MySQL 等数据库中实时捕获数据变更的能力，并通过 Apache Flink 引擎实现流式处理。本项目使用 Spring Boot …...

编程日记 2025/7/21 5:59:21

软件体系结构（Software Architecture）

文章目录 1. 分层架构（Layered Architecture）核心逻辑代码示例（伪代码）典型场景优缺点 2. 客户端-服务器（Client-Server）核心逻辑典型交互流程应用场景代码示例（RESTful API）优缺点 …...

编程日记 2025/7/24 21:33:15

RS485和RS232 通信配置

RS232 目前硬件上支持RS232的有以下板卡： LubanCat-5IO底板（含有RS232x2） 7.1. 引脚定义具体的引脚定义可以参考背面的丝印 LubanCat-5IO底板引脚定义图 7.2. 跳帽配置 LubanCat-5IO底板鲁班买5IO底板上的RS485和RS232是共用同一组…...

编程日记 2025/7/23 23:45:18

【高数上册笔记篇02】：数列与函数极限

【参考资料】同济大学《高等数学》教材樊顺厚老师B站《高等数学精讲》系列课程 （注：本笔记为个人数学复习资料，旨在通过系统化整理替代厚重教材，便于随时查阅与巩固知识要点） 仅用于个人数学复习，因为课…...

编程日记 2025/7/24 15:05:29

【网络安全】——大端序（Big-Endian）和小端序（Little-Endian）

字节序（Endianness）是计算机系统中多字节数据（如整数、浮点数）在内存中存储或传输时，字节排列顺序的规则。它分为两种类型：大端序（Big-Endian）和小端序&#xf…...

编程日记 2025/7/21 10:39:41

机器学习极简入门：从基础概念到行业应用

有监督学习（supervised learning） 让模型学习的数据包含正确答案（标签）的方法，最终模型可以对无标签的数据进行正确处理和预测，可以分为分类与回归两大类分类问题主要是为了“尽可能分开整个数据而画线”…...

编程日记 2025/7/22 22:30:22

MIT XV6 - 1.5 Lab: Xv6 and Unix utilities - xargs

接上文 MIT XV6 - 1.4 Lab: Xv6 and Unix utilities - find xargs 继续实验，实验介绍和要求如下 (原文链接译文链接) : Write a simple version of the UNIX xargs program for xv6: its arguments describe a command to run, it reads lines from the standard …...

编程日记 2025/7/22 19:36:19

Springboot整合Swagger3

Springboot整合Swagger3、常用注解解释、访问Swagger地址出现404、403、拒绝访问等问题_swagger3注解-CSDN博客...

编程日记 2025/7/24 6:50:28

经典音乐播放器——完美歌词 Poweramp Music Player 3 build

—————【下载地址】——————— 【本章单下载】：https://drive.uc.cn/s/d6c480bc47604 【百款黑科技】：https://ucnygalh6wle.feishu.cn/wiki/HPQywvPc7iLZu1k0ODFcWMt2n0d?fromfrom_copylink —————【下载地址】——————— 本…...

编程日记 2025/7/25 5:19:36

锚定基础与拥抱融合：C 语言在编程教育与技术社区的破圈之路

引言在 Python 占据 TIOBE 指数榜首的 2025 年，C 语言以 23.4% 的稳定份额（2025 年 5 月数据）持续稳居前三，这一现象在编程教育领域尤为显著：全球 92% 的计算机科学本科课程仍将 C 语言作为必修基础课，而…...

编程日记 2025/7/28 1:05:10

深度学习入门：从神经网络基础到前向传播全面解析

深度学习入门：从神经网络基础到前向传播全面解析 🔥 重磅干货！本文是《深度学习基础与核心技术详解》专栏的开篇之作，将系统性地带你走进深度学习的世界！建议收藏+关注，错过可能要找很久哦~ 目录深度学习概述神经网络基础 2.1 生物神经元与人工神经元2.2 感知机模型2.…...

编程日记 2025/7/26 21:55:38

Lambda表达式能用在哪些场景？

Lambda表达式是Java 8引入的一种强大特性，它允许以简洁的方式表示匿名函数（即没有名字的函数）。Lambda表达式可以用于许多场景，尤其是在与函数式接口、Stream API、并发编程等结合时，能够显著简化代码并提高开发效率。…...

编程日记 2025/7/28 1:14:42

英语听力口语词汇--2.宣传类

1.approach uk /əˈprəʊtʃ/ n.（思考问题的）方式，方法，态度 2.foreign uk /ˈfɒr.ən/ adj.外国的 3.alliance uk /əˈlaɪ.əns/ n.结盟国家（或团体）,同盟国家（或团体）&...

编程日记 2025/7/4 19:20:37

『测试』测试基础

文章目录 1. 调试与测试的区别2. 开发过程中的需求3. 开发模型3.1 软件的生命周期3.2 瀑布模型3.2.1 瀑布模型的特点/缺点 3.3 螺旋模型3.3.1 螺旋模型的特点/缺点 3.4 增量模型与迭代模型3.5 敏捷模型3.5.1 Scrum模型3.5.2 敏捷模型中的测试 4 测试模型4.1 V模型4.2 W模型(双V…...

编程日记 2025/7/28 1:05:07

Pandas 时间处理利器：to_datetime() 与 Timestamp() 深度解析

Pandas 时间处理利器：to_datetime() 与 Timestamp() 深度解析在数据分析和处理中，时间序列数据扮演着至关重要的角色。Pandas 库凭借其强大的时间序列处理能力，成为 Python 数据分析领域的佼佼者。其中，to_datetime() 函数和 Ti…...

编程日记 2025/7/23 17:10:47

支持向量机的回归用法详解

支持向量机的回归用法详解在机器学习的广阔领域中，支持向量机（SVM）是一种极具影响力的算法，它不仅在分类任务上表现出色，在回归任务中同样有着独特的应用价值。本文将深入探讨 SVM 的回归用法，包括其基本…...

编程日记 2025/7/23 16:46:18

计算机基础

今天不和大家分享算法了，最近为什么一直分享算法题，一个是因为最近很忙加上状态不太在线，第二个是因为我报了ICPC的比赛，也就是大学生程序设计大赛，所以平时刷算法比较多一些，虽然说结果上也没有很多的收获…...

编程日记 2025/7/27 19:49:41

用C语言实现的——一个支持完整增删查改功能的二叉排序树BST管理系统，通过控制台实现用户与数据结构的交互操作。

一、知识回顾二叉排序树（Binary Search Tree，BST），又称二叉查找树或二叉搜索树，是一种特殊的二叉树数据结构。基本性质： ①有序性对于树中的每个节点，其左子树中所有节点的值都小于该节点的…...

编程日记 2025/7/24 23:07:35

uniapp-商城-53-后台商家信息（更新修改和深浅copy）

1、概述文章主要讨论了在数据库管理中如何处理用户上传和修改商家信息的问题，特别是通过深浅拷贝技术来确保数据更新的准确性和安全性。首先，解释了深拷贝和浅拷贝的区别：浅拷贝使得两个变量共享相同的内存地址，而深拷贝则创建新…...

编程日记 2025/7/26 13:49:25

vue数据可视化开发echarts等组件、插件的使用及建议-浅看一下就行

在 Vue 项目中使用 ECharts 进行数据可视化开发时，可以结合 Vue 的响应式特性和 ECharts 的强大功能，实现动态、交互式的图表展示。一、ECharts 基础使用 1. 安装 ECharts npm install echarts2. 在 Vue 组件中使用 ECharts <template><div…...

编程日记 2025/7/23 4:49:04

百度AI战略解析：文心一言与自动驾驶的双轮驱动

百度AI战略解析：文心一言与自动驾驶的双轮驱动系统化学习人工智能网站（收藏）：https://www.captainbed.cn/flu 文章目录百度AI战略解析：文心一言与自动驾驶的双轮驱动摘要引言一、技术架构：大模型与自动…...

编程日记 2025/7/27 22:32:46

MCP Streamable HTTP 传输层的深度解析及实战分析

一、Streamable HTTP 传输层设计革新 1. 核心设计思想协议融合：将 HTTP/1.1、HTTP/2 与 SSE 协议特性深度整合动态协商：通过 HTTP Header 实现传输协议动态协商（X-MCP-Transport）流式优先：默认启用流式传输，支持半双工通信背压控制：基于 HTTP/2 流级流量控制实现智能速…...

编程日记 2025/7/25 14:29:39

六大设计模式--OCP（开闭原则）：构建可扩展软件的基石

写在前面：一个真实的项目悲剧某电商平台促销功能每次迭代都需要修改核心订单类，导致： ✅ 双十一活动修改导致支付功能崩溃 ✅ 新人优惠引发会员系统连环故障 ✅ 每次发布需全量回归测试根本原因：系统架构违反开闭原则一、开闭…...

编程日记 2025/7/23 12:42:11

ActiveMQ 生产环境问题排查与调优指南（一）

一、引言在当今复杂的分布式系统架构中，消息中间件扮演着至关重要的角色，而 ActiveMQ 作为一款广泛使用的开源消息中间件，凭借其丰富的特性、良好的稳定性和易用性，在众多企业的生产环境中占据了一席之地。它基于 JMS&#xff08…...

编程日记 2025/7/27 4:17:33

深入理解 JavaScript 中的 FileReader API：从理论到实践

文章目录深入理解 JavaScript 中的 FileReader API：从理论到实践前言什么是 FileReader？核心特性 FileReader 的常用方法事件监听实际案例案例 1：读取文本文件内容案例 2：图片预览（Data URL）案例 3&#x…...

编程日记 2025/7/22 20:40:44

Google LLM prompt engineering(谷歌提示词工程指南)

文章目录基本概念AI输出配置：调整AI的回答方式输出长度温度（Temperature）Top-K和Top-P 提示技术：让AI更好地理解你零样本提示（Zero-shot）少样本提示（Few-shot）系统提示（…...

编程日记 2025/7/24 12:41:08

前端npm包发布流程：从准备到上线的完整指南

无论是使用第三方库还是创建和分享自己的工具，npm都为我们提供了一个强大而便捷的平台，然而很多开发者在将自己的代码发布到npm上时往往面临各种困惑和挑战，本篇文章将从准备工作到发布上线，探讨如何让npm包更易发布及避免常见的坑…...

编程日记 2025/7/28 1:08:18

【MySQL】表空间结构 - 从何为表空间到段页详解

📢博客主页：https://blog.csdn.net/2301_779549673 📢博客仓库：https://gitee.com/JohnKingW/linux_test/tree/master/lesson 📢欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正！ &…...

编程日记 2025/7/27 19:43:14

OB Cloud 云数据库V4.3：SQL +AI全新体验

OB Cloud 云数据库V4.3：SQL AI全新体验简介 OB Cloud云数据库全新升级至V4.3版本，为用户带来了SQLAI的最新技术体验，强化数据库的传统功能，深度融合了人工智能技术，引入先进的向量检索功能和优化的SQL引擎&#xff0c…...

编程日记 2025/7/28 3:37:26

【Linux系统】第四节—详解yum+vim

hello 我是云边有个稻草人 Linux—本节课所属专栏—欢迎订阅—持续更新中~ 目录画板—本节课知识点详解一、软件包管理器 1.1 什么是软件包 1.2 Linux软件⽣态 1.3 yum具体操作【查看软件包】【安装软件】【卸载软件】【注意事项】 1.4 安装源二、vim 2.1 …...

编程日记 2025/7/27 4:47:02

Git的核心作用详解

一、版本控制与历史追溯 Git作为分布式版本控制系统，其核心作用是记录代码的每一次修改，形成完整的历史记录。通过快照机制，Git会保存每次提交时所有文件的完整状态（而非仅记录差异），确保开发者可以随时回…...

编程日记 2025/7/27 16:40:52

Three.js + React 实战系列 - 职业经历区实现解析 Experience 组件✨（互动动作 + 3D 角色 + 点击切换动画）

对个人主页设计和实现感兴趣的朋友可以订阅我的专栏哦！！谢谢大家！！！ 在这篇博客中，我们将分析一个极其有趣和互动性的组件 - Experience.jsx，该组件用于在主页中呈现个人的工作经历。这个组件…...

编程日记 2025/7/24 17:29:51

3D虚拟工厂vue3+three.js

1、在线体验 3D虚拟工厂在线体验 2、功能介绍 1. 全屏显示功能2. 镜头重置功能3. 企业概况信息模块4. 标签隐藏/显示功能5. 模型自动旋转功能6. 办公楼分层分解展示7. 白天/夜晚切换8. 场景资源预加载功能9. 晴天/雨天/雾天10. 无人机视角模式11. 行人漫游视角模式12. 键盘…...

编程日记 2025/7/24 11:57:05

[Java实战]Spring Boot 解决跨域问题（十四）

[Java实战]Spring Boot 解决跨域问题（十四） 一、CORS 问题背景什么是跨域问题？ 当浏览器通过 JavaScript 发起跨域请求（不同协议、域名、端口）时，会触发同源策略限制，导致请求被拦截。示例场…...

编程日记 2025/7/24 18:38:39

嵌入式硬件篇---CAN

文章目录前言1. CAN协议基础1.1 物理层特性差分信号线终端电阻通信速率总线拓扑 1.2 帧类型1.3 数据帧格式 2. STM32F103RCT6的CAN硬件配置2.1 硬件连接2.2 CubeMX配置启用CAN1模式波特率引脚分配过滤器配置（可选） 3. HAL库代码实现3.1 CAN初始化3.2 发…...

编程日记 2025/7/24 22:53:16

（2025）图文解锁RAG从原理到代码实操，代码保证可运行

什么是RAG RAG(检索增强生成)是一种将语言模型与可搜索知识库结合的方法，主要包含以下关键步骤： 数据预处理加载：从不同格式(PDF、Markdown等)中提取文本分块：将长文本分割成短序列(通常100-500个标记)，作为检索单元…...

编程日记 2025/7/27 7:29:10

TWAS、GWAS、FUSION

全基因组关联研究（GWAS，Genome-Wide Association Study）是一种统计学方法，用于在全基因组水平上识别与特定性状或疾病相关的遗传变异。虽然GWAS可以识别与性状相关的遗传信号，但它并不直接揭示这些遗传变异如何影响生物…...

编程日记 2025/7/27 4:30:18

大模型微调终极方案：LoRA、QLoRA原理详解与LLaMA-Factory、Xtuner实战对比

文章目录一、微调概述1.1 微调步骤1.2 微调场景二、微调方法2.1 三种方法2.2 方法对比2.3 关键结论三、微调技术3.1 微调依据3.2 LoRA3.2.1 原理3.2.2 示例 3.3 QLoRA3.4 适用场景四、微调框架4.1 LLaMA-Factory4.2 Xtuner4.3 对比一、微调概述微调（Fine-tun…...

编程日记 2025/7/27 1:20:27

FHE 之面向小白的引导（Bootstrapping）

1. 引言 FHE初学者和工程师常会讨论的一个问题是； “什么是引导（bootstrapping）？” 从理论角度看，这个问题的答案很简单： 引导就是套用 Gentry 提出的思想——在加密状态下同态地执行解密操作&#xff…...

编程日记 2025/7/26 12:26:33

一.template

二.script 是逻辑部分

三.css样式

新建页面

相关文章：