學習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>