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' } });
相关推荐
前端小巷子4 分钟前
跨域问题解决方案:开发代理
前端·javascript·面试
前端_逍遥生4 分钟前
Chrome 插件开发到发布完整指南:从零开始打造 TTS 朗读助手
前端·chrome
JohnYan4 分钟前
Bun技术评估 - 07 S3
javascript·后端·bun
Mintopia5 分钟前
Three.js 材质与灯光:一场像素级的光影华尔兹
前端·javascript·three.js
天涯学馆6 分钟前
JavaScript 跨域、事件循环、性能优化面试题解析教程
前端·javascript·面试
掘金一周14 分钟前
别再用 100vh 了!移动端视口高度的终极解决方案| 掘金一周7.3
前端·后端
晴殇i16 分钟前
CSS 迎来重大升级:Chrome 137 支持 if () 条件函数,样式逻辑从此更灵活
前端·css·面试
源码站~18 分钟前
基于Flask+Vue的豆瓣音乐分析与推荐系统
vue.js·python·flask·毕业设计·毕设·校园·豆瓣音乐
咚咚咚ddd19 分钟前
cursor mcp实践:网站落地页性能检测报告(browser-tools)
前端
MiyueFE19 分钟前
让我害怕的 TypeScript 类型 — — 直到我学会了这 3 条规则
前端·typescript