Vue基本使用(一)
📑前言
本文主要是【Vue】——Vue基本使用的文章,如果有什么需要改进的地方还请大佬指出⛺️
🎬作者简介:大家好,我是听风与他🥇
☁️博客首页:CSDN主页听风与他
🌄每日一句:狠狠沉淀,顶峰相见
目录
- 📑前言
- 安装vue-router(路由配置)
- 安装element-ui包管理:
- 按需打包
- margin的用法
- 创建表单对象
- 安装图标库
- 安装axios
- 📑文章末尾
安装vue-router(路由配置)
npm vue-router
在router目录下的index.js下将router暴露出去
export default router
在main.js配置下挂载router
const app = createApp(App)
app.use(router)
app.mount('#app')
App.vue下要写下路由
<div>
<router-view></router-view>
</div>
main.js文件
安装element-ui包管理:
npm install element-plus --save
按需打包
npm install -D unplugin-vue-components unplugin-auto-import
按需引入到vite.config.js中
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})
margin的用法
-
margin后面四个参数按顺序包含margin-top,margin-right,margin-bottom,margin-left,它们是透明不可见的。
-
vue中script中的setup参数解释:setup是vue3新增加的组件,vue3采用组合式API,为了方便使用组合式API,我们需要一个入口,在vue3组件中,称为setup。
创建表单对象
注意引入reactive对象
import {reactive} from "vue";
const form = reactive({username:'',password:'',remember:false
})
表单的使用,插入图标
<el-form v-model="form"><el-form-item><el-input v-model="form.username" maxlength="10" type="text" placeholder="用户名/邮箱"><template #prefix><el-icon><el-icon><User /></el-icon></el-icon></template></el-input></el-form-item></el-form>
安装图标库
npm install @element-plus/icons-vue
安装axios
npm install axios
可以在package-lock里面查看axios是否安装好
📑文章末尾
相关文章:

Vue基本使用(一)
📑前言 本文主要是【Vue】——Vue基本使用的文章,如果有什么需要改进的地方还请大佬指出⛺️ 🎬作者简介:大家好,我是听风与他🥇 ☁️博客首页:CSDN主页听风与他 🌄每日一句&#x…...
Android:BackStackRecord
BackStackRecord:fragment回退栈,继承自FragmentTransaction,并且实现了OpGenerator接口,OpGenerator接口用来添加或弹出事务的,后面会提到。 从《Android:从源码看FragmentManager如何工作》文章知道,每次beginTransaction会创建一个BackStackRecord对象,改对象持有f…...

微信小程序 slider 翻转最大和最小值
微信小程序 slider 翻转最大和最小值 场景代码示例index.wxmlindex.jsutil.js 参考资料 场景 我想使用 slider 时最左边是 10 最右是 -10。 但是想当然的直接改成<slider min"10" max"-10" step"1" /> 并没用。 查了文档和社区也没有现成…...

APITable免费开源的多维表格与可视化数据库本地部署公网远程访问
APITable免费开源的多维表格与可视化数据库公网远程访问 文章目录 APITable免费开源的多维表格与可视化数据库公网远程访问前言1. 部署APITable2. cpolar的安装和注册3. 配置APITable公网访问地址4. 固定APITable公网地址 前言 vika维格表作为新一代数据生产力平台,…...

配电房综合监控系统
配电房综合监控系统是一种集成了实时监控、数据采集、远程控制等多功能的系统,用于对配电房进行全方位的监测和管理。 力安科技配电室综合监控系统依托电易云-智慧电力物联网,实现配电室环境监测、有害气体监测、安防监控、采暖通风、门禁、灯光、风机、…...
【JavaSE】集合(学习笔记)
一、数据结构 1、栈 压栈 / 弹栈栈顶元素、栈底元素先进后出 2、队列 入队列 / 出队列前端、后端先进先出 3、数组 查询效率高,增删效率低 4、链表 查询效率低(必须从头找),增删效率高 5、哈希表 比较方法哈希值equals结构:数组 链…...

Mybatis 的简单运用介绍
Mybatis 用于操作数据库 操作数据库肯定需要: 1.SQL语句 2.数据库对象和 java 对象的映射 接下来我们看看怎么使用 Mybatis 我们先搞一些数据库内容 然后将其这些内容和Java对象进行映射 再创建一个类实现 select * from 再写一个类证明上述代码是否可以实现 别忘了在appli…...
python的itertools库
itertools常用的方法如下: import itertools 1. 生成的列表累加,在生成新的列表x itertools.accumulate(range(10))print(list(x))结果:[0, 1, 3, 6, 10, 15, 21, 28, 36, 45] 2. 连接多个列表或者迭代器x itertools.chain(range(3), rang…...

STM32/GD32_分散加载
Q:如何将一个变量、某个源文件的函数在编译阶段就存储在用户指定的区域? KEIL环境:.map后缀文件、.sct后缀文件 IAR环境:.map后缀文件、.icf后缀文件 【map文件】 对固件里面的变量、函数、常量等元素的存储空间进行分配的说明…...
go clean
移除目标文件和缓存文件。 更多信息:https://golang.org/cmd/go/#hdr-Remove_object_files_and_cached_files. 只打印移除命令,而不会真正移除任何东西: go clean -n 删除编译缓存: go clean -cache 删除所有测试结果缓存&…...

BUUCTF [ACTF新生赛2020]swp 1
BUUCTF:https://buuoj.cn/challenges 题目描述: 得到的 flag 请包上 flag{} 提交。 密文: 下载附件,得到一个.tar文件。 解题思路: 1、使用WinRAR解压.tar文件,得到两个.zip文件。 解压wget.zip文件,得…...
【PTA题目】7-4 缩写期刊名 分数 10
7-4 缩写期刊名 分数 10 全屏浏览题目 切换布局 作者 黄龙军 单位 绍兴文理学院 科研工作者经常要向不同的期刊投稿。但不同期刊的参考文献的格式往往各不相同。有些期刊要求参考文献所发表的期刊名必须采用缩写形式,否则直接拒稿。现对于给定的期刊名ÿ…...

什么是 TLS/SSL 握手
TLS/SSL 握手是一个加密过程,每当客户端(如浏览器)与服务器建立连接时,都会在后台进行,此握手协议有助于客户端和服务器之间的安全连接,从而促进隐私、数据完整性和机密性。 TLS/SSL 握手何时发生 每当客…...

和鲸科技与国科环宇建立战略合作伙伴关系,以软硬件一体化解决方案促进科技创新
近日,在国科环宇土星云算力服务器产品发布会暨合作伙伴年度会上,和鲸科技与国科环宇正式完成战略伙伴签约仪式,宣布达成战略合作伙伴关系。未来,双方将深化合作,充分发挥在产品和市场方面的互补优势,为企事…...

[C++]六大默认成员函数详解
☃️个人主页:fighting小泽 🌸作者简介:目前正在学习C和Linux 🌼博客专栏:C入门 🏵️欢迎关注:评论👊🏻点赞👍🏻留言💪🏻 …...

组合(回溯算法)
77. 组合 - 力扣(LeetCode) 题目描述 给定两个整数 n 和 k,返回范围 [1, n] 中所有可能的 k 个数的组合。 你可以按 任何顺序 返回答案。 样例输入 示例 1: 输入:n 4, k 2 输出: [[2,4],[3,4],[2,3],…...

力扣:1419. 数青蛙
题目: 代码: class Solution { public:int minNumberOfFrogs(string croakOfFrogs){string s "croak";int ns.size();//首先创建一个哈希表来标明每个元素出现的次数!vector<int>hash(n); //不用真的创建一个hash表用一个数…...

java_springboot企业人事考勤请假管理信息系统rsglxx+jsp
(1)熟练掌握Java开发的原理和方法 (2)熟练学习掌握SSM框架 (3)熟悉软件开发的流程 (4)了解中内外互联网中所主流的技术 (5)深层次的了解计算机学科领域的知识…...

java项目之木里风景文化管理平台(ssm+vue)
项目简介 木里风景文化管理平台实现了以下功能: 前台功能:用户进入系统可以实现首页,旅游公告,景区,景区商品,景区美食,旅游交通工具,红黑榜,个人中心,后台…...

源码安装mysql
使用源码安装mysql,这里选择的版本是mysql5.7.35 ,系统是Centos7.6 官网下载地址:https://downloads.mysql.com/archives/community/ 下载源码压缩包 [rootlocalhost ~]# cd /opt[rootlocalhost opt]# wget https://downloads.mysql.com/archives/get/…...

CMake基础:构建流程详解
目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...
MVC 数据库
MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...
【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分
一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计,提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合:各模块职责清晰,便于独立开发…...

mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包
文章目录 现象:mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时,可能是因为以下几个原因:1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...
【Java学习笔记】BigInteger 和 BigDecimal 类
BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点:传参类型必须是类对象 一、BigInteger 1. 作用:适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...
Fabric V2.5 通用溯源系统——增加图片上传与下载功能
fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...
Linux离线(zip方式)安装docker
目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1:修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本:CentOS 7 64位 内核版本:3.10.0 相关命令: uname -rcat /etc/os-rele…...

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

vulnyx Blogger writeup
信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面,gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress,说明目标所使用的cms是wordpress,访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...
JS手写代码篇----使用Promise封装AJAX请求
15、使用Promise封装AJAX请求 promise就有reject和resolve了,就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...