Vue常用问题总结-1

图片引入方式

对象图片

第一种方式：

<div :style="`background-image:url('${BANNER')`"></div>

import {BANNER} from '@/const/imgUrl'
export default {
data() {
    return {BANNER｝
}

第二种方式：

background-image: url('~assets/loading.gif');

路由

两种路由方式的带参区别

this.$router.push({path: BaiDu,query: {fromPage:'banner'}})//跳转到相关页面后的链接样式http://172.16.153.670:3000/baidu?fromPage=bannerfromPage
 this.$router.push({name: 'baidu', params: {fromPage: 'banner'}})//跳转到相关页面后的链接样式http://172.16.153.670:3000/baidu

返回

this.$router.go(-1)
this.$router.back()

替换路由

this.$router.replace(路径)

vue this.$router.go(-1); 或者 this.$router.back() 返回时怎么带参数

获取路由参数值

this.$route.query.id

获取路由值

如http://172.16.153.230:3000/showyu-mobile/#/baidu

this.$route.name//baidu

弹性盒子模型常用样式

#main {
    width: 200px;
    height: 200px;
    border: 1px solid #c3c3c3;
    display: flex;
    flex-flow: wrap;
}

#main div {
    width: 100px;
}

<div id="main">
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
  <div style="background-color:pink;">D</div>
  <div style="background-color:lightgrey;">E</div>
  <div style="background-color:lightgreen;">F</div>
</div>

flex-direction:column属性

<div id="main">
	<div style="background-color:coral;">A</div>
	<div style="background-color:lightblue;">B</div>
	<div style="background-color:khaki;">C</div>
	<div style="background-color:pink;">D</div>
	<div style="background-color:lightgrey;">E</div>
	<div style="background-color:lightgreen;">F</div>
</div>

#main {
    display: flex;
    flex-direction:column;
}
  
#main div {
	width: 40px;
	height: 40px;
}

flex-direction:row;

解决safari布局抖动

-webkit-overflow-scrolling: touch;

CSS3实现三角形(三角形)

<div id="d1"></div>

#d1{
	width:0; 
	height:0;
	border-width:50px;
	border-style:solid;
	border-top-left-radius: 15px;
	opacity: 0.569;
	border-color:red transparent transparent red;
    position:relative;
}
#d1::after{
	content:'';
	position:absolute;
	top:98px;
	left:8px;
	opacity:0.5;
	width: 0;
    height: 0;
    border-bottom: 10px solid red;
    border-left: 10px solid transparent;
}
#d1::before{
	content:'';
	position:absolute;
	top:8px;
	left:93px;
	opacity:0.5;
	width: 0;
    height: 0;
    border-bottom: 15px solid red;
    border-left: 15px solid transparent;
}