vue基础操作(vue基础)

想到多少写多少把,其他的想起来了在写。也写了一些css的

input框的双向数据绑定

html

     <input value="123456" type="text" v-model="account" @input="accou" class="bottom-line bottom" placeholder="请输入账号">

js

const account = ref('')
function accou(event) {account.value = event.target.value;console.log(account.value, '账号');
}

input点击出现框

禁用输入框(input)点击时出现边框效果

input:focus {outline: none;
}

input在上面写搜索图表

图标左边

<template><input class="search-input" placeholder="Search...">
</template><style>
.search-input {background-image: url('/path/to/search-icon.svg'); /* 指向你的搜索图标 */background-position: right 10px center; /* 调整图标位置 */background-size: 20px; /* 调整图标大小 */background-repeat: no-repeat;padding-right: 35px; /* 确保文本不会覆盖图标 */
}
</style>

图标右边

vue移动端页面双击放大问题

将meta代码

<meta name="viewport" content="width=device-width,initial-scale=1.0">

修改成为

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

vue双边距问题

 <style>*{margin: 0;padding: 0;box-sizing: border-box;}</style>

css渐变(拓展)

线性渐变(Linear Gradient)

线性渐变是一种在一条直线上从一个颜色过渡到另一个颜色的渐变效果。

/* 从上到下的垂直渐变 */
.gradient {background: linear-gradient(to bottom, #ffcccc, #ff6666);
}/* 从左上到右下的对角线渐变 */
.gradient {background: linear-gradient(to bottom right, #ffcccc, #ff6666);
}
径向渐变(Radial Gradient)

径向渐变是一种从一个中心点向周围辐射渐变的效果。

/* 从中心向外的径向渐变 */
.gradient {background: radial-gradient(circle, #ffcccc, #ff6666);
}/* 从左上角向右下角的径向渐变 */
.gradient {background: radial-gradient(ellipse at top left, #ffcccc, #ff6666);
}

使用本地存储为什么会变成object呢?

在Vue 3中,当你使用localStorage.setItem('authToken', res)时,如果res是一个JavaScript对象,它会被转换成字符串并存储在localStorage中。但是,如果res本身就是一个对象,那么它会被转换成字符串并存储,这可能会导致存储的是[object Object],而不是预期的对象内容。

localStorage.setItem('authToken', JSON.stringify(res));

const authToken = JSON.parse(localStorage.getItem('authToken'));

vue3页面跳转

命令

npm install vue-router@4

yarn add vue-router@4

<script setup>
import { useRouter } from 'vue-router';const router = useRouter();const navigateToHome = () => {router.push('/home'); // 使用 router.push 方法跳转到首页
};
</script><template><button @click="navigateToHome">Go to Home</button>
</template>

console.log(route.path); // 打印当前路由的路径

// 动态路由参数
router.push({ name: 'user', params: { userId: '123' } });// 查询参数
router.push({ path: 'register', query: { plan: 'private' } });

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

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

相关文章

golang学习1,dea的golang-1.22.0

参考&#xff1a;使用IDEA配置GO的开发环境备忘录-CSDN博客 1.下载All releases - The Go Programming Language (google.cn) 2.直接next 3.window环境变量配置 4.idea的go插件安装 5.新建go项目找不到jdk解决 https://blog.csdn.net/ouyang111222/article/details/1361657…

c++高精度

高精度是什么 计算数据过大超过long long的数据范围时&#xff0c;需要引进高精度算法。将数一位一位的存在数组中输出。 高精度加法 #include<iostream> #include<cstring> using namespace std;int main() {char a1[10000], b1[10000];//字符存储数字int a[10…

React Native调用摄像头画面及拍照和保存图片到相册全流程

今天主要做了一个demo,功能很简单,就是调用手机摄像头画面,并且可以通过按钮控制拍照以及将图片保存到手机相册的功能,接下来我将从创建项目开始一步一步完成这个demo,各位只需要复制粘贴即可 创建React Native项目 npx react-native init yx_rnDemo --version 0.70.6 // 这里…

虚拟列表【vue】等高虚拟列表/非等高虚拟列表

文章目录 1、等高虚拟列表2、非等高虚拟列表 1、等高虚拟列表 参考文章1 参考文章2 <!-- eslint-disable vue/multi-word-component-names --> <template><divclass"waterfall-wrapper"ref"waterfallWrapperRef"scroll"handleScro…

280.【华为OD机试真题】高效货运(贪心算法—JavaPythonC++JS实现)

🚀点击这里可直接跳转到本专栏,可查阅顶置最新的华为OD机试宝典~ 本专栏所有题目均包含优质解题思路,高质量解题代码(Java&Python&C++&JS分别实现),详细代码讲解,助你深入学习,深度掌握! 文章目录 一. 题目-高效货运二.解题思路三.题解代码Python题解代码…

服务器相关概念1

客户端 网络节点中负责消耗资源的电脑 服务器 负责对外提供网络资源的电脑 服务器和普通电脑区别 服务器有web服务器软件&#xff0c;IIS&#xff0c;Apache&#xff0c;phpstudy IP地址 每台计算机唯一地址&#xff1b; 格式&#xff08;a.b.c.d&#xff09;点分时进制&…

unordered_map和map的区别

unordered_map 和 map 都是 C STL 中的关联数组容器&#xff0c;用于存储键值对&#xff08;key-value pairs&#xff09;。其中&#xff0c;键是唯一的&#xff0c;而值则可以重复。 它们的主要区别在于实现方式不同。map 实现了红黑树&#xff0c;因此可以自动按照键值排序&…

数据湖delta lake

Table of Content1. 课程2. 前置技能3. 一、数据湖概念[了解] 3.1. 1.1 企业的数据困扰 3.1.1. 困扰一&#xff1a;互联网的兴起和数据孤岛3.1.2. 困扰二&#xff1a;非结构化数据3.1.3. 困扰三&#xff1a;保留原始数据3.1.4. 补充&#xff1a;什么是结构化&#xff1f; 3.1.4…

09 Redis之分布式系统(数据分区算法 + 系统搭建与集群操作)

6 分布式系统 Redis 分布式系统&#xff0c;官方称为 Redis Cluster&#xff0c;Redis 集群&#xff0c;其是 Redis 3.0 开始推出的分布式解决方案。其可以很好地解决不同 Redis 节点存放不同数据&#xff0c;并将用户请求方便地路由到不同 Redis 的问题。 什么是分布式系统?…

音乐格式转换软件有哪些?5款必备神器

音乐格式转换软件有哪些&#xff1f;音乐&#xff0c;作为人类情感的载体&#xff0c;伴随着我们生活的每一个角落。在享受音乐的同时&#xff0c;我们有时也面临着音乐格式不兼容的问题。不用担心&#xff0c;今天我将为大家揭秘五款音乐格式转换软件&#xff0c;让你的音乐之…

华为配置Mesh普通业务示例

配置Mesh普通业务示例 组网图形 图1 配置Mesh组网示意图 业务需求组网需求数据规划配置思路配置注意事项操作步骤配置文件 业务需求 在企业内部各区域通过建立Mesh无线回传链路&#xff0c;实现无线覆盖区域拓展&#xff0c;降低有线部署成本。 组网需求 AC组网方式&#xff1a…

sqllabs的order by注入

当我们在打开sqli-labs的46关发现其实是个表格&#xff0c;当测试sort等于123时&#xff0c;会根据列数的不同来进行排序 我们需要利用这个点来判断是否存在注入漏洞&#xff0c;通过加入asc 和desc判断页面有注入点 1、基于使用if语句盲注 如果我们配合if函数&#xff0c;表达…

面试经典150题——存在重复元素 II

​"The harder you work for something, the greater youll feel when you achieve it." - Unknown 1. 题目描述 2. 题目分析与解析 2.1 思路一——暴力求解 该思路很简单&#xff0c;就是暴力的查找每一个元素&#xff0c;查看是否满足题目要求&#xff0c;满足就…

76. 最小覆盖子串(滑动窗口)

用i和j表示滑动窗口的左边界和右边界&#xff0c;思路如下&#xff1a; j右移&#xff0c;直到i-j内包含住了t的所有元素i右移&#xff0c;去除掉左边多余元素保留最小长度&#xff0c;同时i右移&#xff0c;此时确定i-j的子串一定不能完全覆盖t&#xff0c;于是重复1&#xf…

Darkhole 2

kali:192.168.223.128 靶机:192.168.223.152 主机发现 nmap -sP 192.168.223.0/24 端口扫描 nmap -sV -p- -A 192.168.223.152 开启了22 80 端口 web 进入登录界面发现没有注册按钮了 扫一下目录 gobuster dir -u http://192.168.223.152 -x html,txt,php,bak,zip,git --wor…

单片机精进之路-5矩阵键盘扫描

如下图&#xff0c;先在p3口输出0xfe&#xff0c;再读取p3口的电平&#xff0c;如果没有按键按下&#xff0c;temp & 0xf0还是0xf0&#xff0c;如果又第一个键按下&#xff0c;temp & 0xf0还是0xee&#xff0c;其他按键由此类推可得。 //4*4键盘检测程序,按下键后相应…

Linux的文件操作,重拳出击( ̄︶ ̄)

Linux的文件操作 学习Linux的文件操作&#xff0c;一般需要知道一个文件如果你想要操作他&#xff0c;必须知道你对这个文件有什么操作的权限或者修改你自己对文件操作的权限。必须要知道文件有三种权限 r&#xff1a;可读 w&#xff1a;可写 x&#xff1a;可执行 在打开Linux…

✅鉴权—cookie、session、token、jwt、单点登录

基于 HTTP 的前端鉴权背景cookie 为什么是最方便的存储方案&#xff0c;有哪些操作 cookie 的方式session 方案是如何实现的&#xff0c;存在哪些问题token 是如何实现的&#xff0c;如何进行编码和防篡改&#xff1f;jwt 是做什么的&#xff1f;refresh token 的实现和意义ses…

Java面试题基础(一)

Java 面试题基础&#xff08;一&#xff09; 前言1、面向对象的特征有哪些方面&#xff1f;2、访问修饰符的作用范围&#xff1f;3、Java有哪些数据类型&#xff1f;4、float f 3.4; 是否正确&#xff1f;5、short s1 1; s1 s1 1;对吗? short s1 1; s1 1; 对吗&#xff…

《C++面向对象程序设计》✍学习笔记

C的学习重点 C 这块&#xff0c;重点需要学习的就是一些关键字、面向对象以及 STL 容器的知识&#xff0c;特别是 STL&#xff0c;还得研究下他们的一些源码&#xff0c;下面是一些比较重要的知识&#xff1a; 指针与引用的区别&#xff0c;C 与 C 的区别&#xff0c;struct 与…