学习Vue的常见问题

x-dragon8899

已于 2022-01-20 17:47:42 修改

阅读量2.8k

点赞数 2

分类专栏：前端-vue 文章标签： vue

于 2020-06-16 11:53:46 首次发布

本文链接：https://blog.csdn.net/m0_45234510/article/details/106784409

版权

前端-vue 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

一、消除router-link的下划线并设置路由高亮

要消除下划线，增加一下样式代码即可：

* {
  text-decoration: none;
}
.router-link-active {
  text-decoration: none;
}

路由高亮

.router-link-active {
    color: rgb(98, 50, 246);
    font-size: 20px;
    font-style: italic; 
}

二、vue添加图片

vue添加图片

方法一：

//首先给图片地址绑定变量 并设置图片的大小
<template>
    <img :src="imgUrl" width="50px" height="50px">
</template>

//将imgUrl放在数据里
data(){
    return {
          imgUrl:require("../assets/test.png")
      }
    }

//在main.js中导入
import './image/logo.png'

方法二：

// 1、将图片放到data中
  data() {
            return {
                 background: {
                 backgroundImage: "url(" + require("@/image/bg_two.jpg") + ")",
                 backgroundRepeat : 'no-repeat'
                },
            }
        },

// 2、div中使用
 <div id="background" :style ="background"></div>
 
// 3、调整样式
<style scoped>
#background{
    width: 100%;
    height: 100%;
    z-index: -1;
    background-size: cover; /* 使图片平铺满整个浏览器（从宽和高的最大需求方面来满足，会使某些部分无法显示在区域中） */
	position: absolute; /* 不可缺少 */
}
</style>

方法三（背景图片）：

<template>
   <div id="background">  </div>
</template>

<style scoped>
#background{
	  color: #2c3e50;
	  width: 100%;
	  height: 100%;
	  z-index: -2;
	  background-size: cover; /* 使图片平铺满整个浏览器（从宽和高的最大需求方面来满足，会使某些部分无法显示在区域中） */
	  position: absolute; /* 不可缺少 */
	  background-image: url("./image/keyboard.jpg");
}
</style>

注意：方法三需要更改build下的utils.js，在如下图增加 publicPath:'../../' ，否则，vue打包部署会找不到该图片
在这里插入图片描述

六、圆角与分割线样式

圆角：border-radius: 25px;
分割线：.hr2{ height:3px; border:none; border-top:3px double #848686;}
其他分割线样式

七、vue组件引用另一个组件

<template>  
    <div>  
        <Search></Search>
    </div>  
</template>  
  
//注意引入时的位置
<script>  
    import Search from '@/components/common/Search'
    export default {   
        components: {Search},
        data() {
           return {              
           }
        },
    }  
</script>

八、鼠标移过时放大效果

<div id="text">
	<img src="xxx.png" />
</div>

<style type="text/css">
	#text{
		width: 300px;
		height: 300px;
		border: #000 solid 1px;
		margin: 50px auto;
		overflow: hidden;
	}
	#text img{
		cursor: pointer;
		transition: all 0.6s; 
	}
	#text img:hover{
		transform: scale(1.2);
	}
</style>

九、a标签样式

<style scoped> 

a:link { text-decoration: none;color: blue} /* 指正常的未被访问过的链接  */
a:active { text-decoration: blink}  /* 指正在点的链接  */
a:hover { text-decoration: none; color: rgb(0, 174, 255)}  /* 指鼠标在链接上；  */
a:visited { text-decoration: none; color: green}  /* 指已经访问过的链接  */

</style>

其中：
text-decoration是文字修饰效果的意思；
none参数表示超链接文字不显示下划线；
underline参数表示超链接的文字有下划线

十、v-on ( : ) 绑定数据

在这里插入图片描述

十一、解决input框中按enter键会刷新页面

一个表单下，如果只有一个文本框时，按下回车将会触发表单的提交事件，
既然是只有一个文本框才会出问题，那么可以加一个隐藏的文本框，如下：

<input type="text" style="display:none" />

十二、背景半透明，子元素不透明

.demo{
　background-color:rgba(255,255,255,0.5)<!--最后一个参数设置透明度，前面三个是RGB颜色值-->
}

十三、confirm与alert消息提示

confirm: (带有取消)

if(confirm("确定要修改 “"+ wname+"” 吗？")){
    this.$router.push("/home")
}

在这里插入图片描述
alert:

alert("11")

在这里插入图片描述

十四、vue加scoped后就无法修改组件的UI组件的样式

使用深度选择器，将scoped样式中的选择器“深入”，即影响子组件

只需要在样式前面加上 /deep/ 即可
在这里插入图片描述
参考：https://blog.csdn.net/mossbaoo/article/details/89519726?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522159566534919725222433888%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=159566534919725222433888&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allfirst_rank_ecpm_v3~pc_rank_v3-2-89519726.pc_ecpm_v3_pc_rank_v3&utm_term=vant%E4%B8%BA%E4%BB%80%E4%B9%88%E6%94%B9%E4%BA%86%E7%BB%84%E4%BB%B6%E7%9A%84%E6%A0%B7%E5%BC%8F%E4%B8%8D%E7%94%9F%E6%95%88&spm=1018.2118.3001.4187

十五、vue实现选中效果

vue实现选中效果

十六、css 之单行文本显示省略和多行文本省略

单行文本显示省略号…

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <style type="text/css">
        /* 一般要指定宽度，然后给如下四个属性。 */
        span{
            width:200px;
            display:block;
            overflow:hidden;
            white-space:nowrap;
            text-overflow:ellipsis;
        }
    </style>
</head>
<body>
    <span>我是单行文字省略我是单行文字省略</span>
</body>
</html>

多行文本显示省略号…

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <style type="text/css">
        /* 一般要指定宽度，然后给如下四个属性。 */
        p {
            width: 200px;
            overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>
    <p>我是多行文字省略我是多行文字省略我是多行文字省略行文字省略行文字省略行文字省略</p>
</body>
</html>

十七、设置字体阴影

div{
    text-shadow:5px 2px 6px #000;
    }

在这里插入图片描述

十八、将鼠标的光标设置为手指

cursor: pointer

十九、CSS控制图片和文字在同一行显示且对齐的3种方法

在img标签加入：

style="vertical-align:middle"

如：

 <img src="aaa.jpg" style="vertical-align:middle"><span>xdragon</span>

在这里插入图片描述

参考：https://www.cnblogs.com/jingwhale/p/4599327.html?utm_source=tuicool

二十、Vue移动端页面自适应解决方案

该方案使用相当简单，把下面这段已压缩过的原生JS）放到 HTML 的 head 标签中即可（注:不要手动设置viewport，该方案自动帮你设置）

<script>!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.flex=function(normal,e,t){var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=normal?1:1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=normal?"50px": a/2*s*n+"px"},e.exports=t["default"]}]);  flex(false,100, 1);</script>

注意：此方案也是默认 1rem = 100px
参考：Vue移动端页面自适应解决方案

21、base64转换为file文件类型

function base64toFile(dataurl, filename = "file") {
  let arr = dataurl.split(",");
  let mime = arr[0].match(/:(.*?);/)[1];
  let suffix = mime.split("/")[1];
  let bstr = atob(arr[1]);
  let n = bstr.length;
  let u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], `${filename}.${suffix}`, {
    type: mime
  });
}

参考链接

22、vue集成 animate.css 动画

1、npm 安装 animate.css

npm install animate.css --save

2、在main.js中引入

import animated from 'animate.css' // npm install animate.css --save安装，再引入
Vue.use(animated)

3、使用

class="animate__animated animate__bounce"

更多样式：https://animate.style/

23、网页插入网易云音乐播放器

在网易云网页版找到歌单
https://music.163.com/#/playlist?id=5316433881

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=110 
src="//music.163.com/outchain/player?type=0&id=5316433881&auto=1&height=90"></iframe>

在这里插入图片描述

24、网站添加二次元动漫

只需在网页中引入这三行代码即可

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"/>
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>

参考：https://zhaoolee.com/GBlog/2019/07/04/live2d/

25、vue中使用`v-bind="$attrs"和v-on="$listeners"`进行多层组件监听

https://www.cnblogs.com/jin-zhe/p/13099416.html

26、Vue中input被赋值后，无法再修改编辑的问题解决

根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新

使用Vue的全局API: $set()赋值：

_this.$set(_this.editForm, 'first_picture', resp.obj.firstPicture)

在这里插入图片描述

27、mavon-editor图片上传

https://www.yuque.com/xiangjiya/gvzh32/mz7l2m

28、Vue页面传值

router/index.js
在这里插入图片描述
页面中使用

29、回车搜索

@keydown.enter.native="submitLogin"

30、解决vue输入框输入值时，页面数据也跟着改变的问题

JSON.parse(JSON.stringify(row))

在这里插入图片描述

31、vue日期选择器

    <el-date-picker
        v-model="event_edit.happenTime"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="datetime"
        placeholder="选择发生时间">
    </el-date-picker>

x-dragon8899

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
学习Vue的常见问题

一、消除router-link的下划线要消除下划线，增加一下样式代码即可：* { text-decoration: none;}.router-link-active { text-decoration: none;}
复制链接

扫一扫