学习Vue的常见问题

末蓝、 2023-02-18 06:29 7阅读 0赞

### 目录 ###

*   *  一、消除router-link的下划线并设置路由高亮
     *  二、vue添加图片
     *  三、去掉ul li前的小圆点
     *  四、vue项目引入阿里图标
     *  五、css导航栏鼠标hover的时候就出现下拉菜单
     *  六、圆角与分割线样式
     *  七、vue组件引用另一个组件
     *  八、鼠标移过时放大效果
     *  九、a标签样式
     *  十、v-on ( : ) 绑定数据
     *  十一、解决input框中按enter键会刷新页面
     *  十二、背景半透明，子元素不透明
     *  十三、confirm与alert消息提示
     *  十四、vue加scoped后就无法修改组件的UI组件的样式
     *  十五、vue实现选中效果
     *  十六、css 之单行文本显示省略和多行文本省略
     *  十七、设置字体阴影
     *  十八、将鼠标的光标设置为手指
     *  十九、CSS控制图片和文字在同一行显示且对齐的3种方法
     *  二十、Vue移动端页面自适应解决方案
     *  21、base64转换为file文件类型
     *  22、vue集成 animate.css 动画
     *  23、网页插入网易云音乐播放器
     *  24、网站添加二次元动漫
     *  25、vue中使用\`v-bind="$attrs"和v-on="$listeners"\`进行多层组件监听
     *  26、Vue中input被赋值后，无法再修改编辑的问题解决
     *  27、mavon-editor图片上传
     *  28、Vue页面传值
     *   *  29、回车搜索

## 一、消除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添加图片][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打包部署会找不到该图片  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70]

## 三、去掉ul li前的小圆点 ##

[链接][Link 1]

## 四、vue项目引入阿里图标 ##

[链接][Link 2]

## 五、css导航栏鼠标hover的时候就出现下拉菜单 ##

[链接][Link 3]

## 六、圆角与分割线样式 ##

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

## 七、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标签样式 ##

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 1]

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

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

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

.demo{ 
    　background-color:rgba(255,255,255,0.5)
    }

## 十三、confirm与alert消息提示 ##

confirm: (带有取消)

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

![在这里插入图片描述][20200705112559509.png]  
alert:

alert("11")

![在这里插入图片描述][20200705112632498.png]

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

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

只需要在样式前面加上 `/deep/` 即可  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 2]  
参考：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-2allfirst\_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实现选中效果][vue 1]

## 十六、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;
        }

![在这里插入图片描述][2020072920275866.png]![在这里插入图片描述][20200729202840667.png]

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

cursor: pointer

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

在img标签加入：

style="vertical-align:middle"

如：

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

![在这里插入图片描述][20210112220839226.png]

参考：[https://www.cnblogs.com/jingwhale/p/4599327.html?utm\_source=tuicool][https_www.cnblogs.com_jingwhale_p_4599327.html_utm_source_tuicool]

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

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

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

## 21、base64转换为file文件类型 ##

[参考链接][Link 5]

## 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/][https_animate.style]

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 4]

## 24、网站添加二次元动漫 ##

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

参考：[https://zhaoolee.com/GBlog/2019/07/04/live2d/][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][https_www.cnblogs.com_jin-zhe_p_13099416.html]

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

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

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 5]

## 27、mavon-editor图片上传 ##

[https://www.yuque.com/xiangjiya/gvzh32/mz7l2m][https_www.yuque.com_xiangjiya_gvzh32_mz7l2m]

## 28、Vue页面传值 ##

router/index.js  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 6]  
页面中使用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 7]

### 29、回车搜索 ###

@keydown.enter.native="submitLogin"

[vue]: https://blog.csdn.net/z519671318/article/details/80015777?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522159227974219725222419331%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=159227974219725222419331&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_ctr_v3-1-80015777.ecpm_v1_rank_ctr_v3&utm_term=vue%E6%80%8E%E6%A0%B7%E6%B7%BB%E5%8A%A0%E5%9B%BE%E7%89%87
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200630130603313.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw,size_16,color_FFFFFF,t_70
[Link 1]: https://blog.csdn.net/YetnumSun/article/details/54890722?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522159231617019195239848935%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=159231617019195239848935&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_ctr_v3-1-54890722.ecpm_v1_rank_ctr_v3&utm_term=%E6%80%8E%E6%A0%B7%E5%8E%BB%E6%8E%89li%E4%B8%8A%E7%9A%84%E6%96%91%E7%82%B9
[Link 2]: https://blog.csdn.net/qq_37281252/article/details/79738506
[Link 3]: https://blog.csdn.net/papima/article/details/78218993?utm_source=blogxgwz3?ops_request_misc=&request_id=&biz_id=102&utm_term=%E6%80%8E%E6%A0%B7%E8%AE%BE%E7%BD%AE%E7%9B%91%E5%90%AC%E9%BC%A0%E6%A0%87%E5%87%BA%E7%8E%B0%E4%B8%8B%E6%8B%89&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-7-78218993
[Link 4]: https://blog.csdn.net/LucasLi2016/article/details/55095849?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522159239863919724839227250%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=159239863919724839227250&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_ctr_v3-7-55095849.ecpm_v1_rank_ctr_v3&utm_term=css%20%E5%88%86%E5%89%B2%E7%BA%BF
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200625220005785.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw,size_16,color_FFFFFF,t_70
[20200705112559509.png]: https://img-blog.csdnimg.cn/20200705112559509.png
[20200705112632498.png]: https://img-blog.csdnimg.cn/20200705112632498.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200725165930201.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw,size_16,color_FFFFFF,t_70
[vue 1]: https://blog.csdn.net/C1041067258/article/details/102507046?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522159591163519195188428144%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=159591163519195188428144&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v3~pc_rank_v3-8-102507046.pc_ecpm_v3_pc_rank_v3&utm_term=el-link%E9%80%89%E4%B8%AD%E6%A0%B7%E5%BC%8F&spm=1018.2118.3001.4187
[2020072920275866.png]: https://img-blog.csdnimg.cn/2020072920275866.png
[20200729202840667.png]: https://img-blog.csdnimg.cn/20200729202840667.png
[20210112220839226.png]: https://img-blog.csdnimg.cn/20210112220839226.png
[https_www.cnblogs.com_jingwhale_p_4599327.html_utm_source_tuicool]: https://www.cnblogs.com/jingwhale/p/4599327.html?utm_source=tuicool
[Vue]: https://blog.csdn.net/lgysjfs/article/details/79278253
[Link 5]: https://blog.csdn.net/weixin_43352901/article/details/109321525?utm_medium=distribute.pc_relevant.none-task-blog-OPENSEARCH-3.control&dist_request_id=a7452a6e-1f4c-4cba-9111-5aebcdc0e8a8&depth_1-utm_source=distribute.pc_relevant.none-task-blog-OPENSEARCH-3.control
[https_animate.style]: https://animate.style/
[https_music.163.com_playlist_id_5316433881]: https://music.163.com/#/playlist?id=5316433881
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210310232101658.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210310232150932.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw,size_16,color_FFFFFF,t_70
[https_zhaoolee.com_GBlog_2019_07_04_live2d]: https://zhaoolee.com/GBlog/2019/07/04/live2d/
[https_www.cnblogs.com_jin-zhe_p_13099416.html]: https://www.cnblogs.com/jin-zhe/p/13099416.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210323105512584.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw,size_16,color_FFFFFF,t_70
[https_www.yuque.com_xiangjiya_gvzh32_mz7l2m]: https://www.yuque.com/xiangjiya/gvzh32/mz7l2m
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20210701205940551.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20210701210047170.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw,size_16,color_FFFFFF,t_70