学习Vue的常见问题

一、消除router-link的下划线

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

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

二、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>

三、去掉ul li前的小圆点

四、vue项目引入阿里图标

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

六、圆角与分割线样式

圆角：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>