vue项目遇到的琐碎知识点

1：methods方法中this指的就是vue对象。要使用data中的数据可直接this.XX

2:v-for循环动态给img标签绑定src属性通过v-bind，比如

<img v-bind:alt="item.title" v-bind:src="getImages(item.images.large)" class="pic">

<template>
<div>
	<div v-for="item in objects" class="box">
		<el-row>
		  <el-col :span="18">
		  	<div class="boxCon">
		  		<div class="title">{{item.title}}</div>
		  		<div class="text">
		  			<span class="pubtime"><span class="pubYear">上映年份：</span>{{item.year}}</span>
		  			<span class="reply" @click="lookDetail(item.images.large,item.title,item.casts[0].avatars.small)"><span class="pubYear">评论：</span>{{item.collect_count}}</span>
		  			<p class="introContain">
		  				<span v-for="list in item.genres" class="intro">{{list}}</span>
		  			</p>
		  		</div>
		  	</div>
		  </el-col>
		  <el-col :span="6">
		  	<div class="grid-content bg-purple-light">
		  		<img v-bind:alt="item.title" v-bind:src="getImages(item.images.large)" class="pic">
		  	</div>
		  </el-col>
		</el-row>
	</div>
</div>
	
</template>
<script>
export default {
  data(){
  	return{
  		objects:[]
  	}
  },
  methods:{
  	lookDetail(e,t,p){//路由跳转怎么传参的实例
  		 var target=event.target;//获取当前元素
	    var dataid=e;//(pl.id的值);//获取所传参数值
	    var titleNew=t;
	    var pic=p;
	  this.$router.push({ path: 'detail',query:{id:dataid,title:titleNew,pic:p} })  
  	},
  	 XXXFn (){
	    this.$http.get('/api/movie/top250',{
	    	 params: {
		      start:0,
		      count:250
		    }
	    })
	      .then((_data)=>{
	      	console.log(_data.data.subjects);
	         this.objects=_data.data.subjects;
	      });
	 },
	  getImages( _url ){
      if( _url !== undefined ){
        let _u = _url.substring( 7 );
        return 'https://images.weserv.nl/?url=' + _u;
      }
    }
  },
  mounted:function(){
  	this.XXXFn()
  }
}

3：通过路由this.$router.push()方法跳转的时候的传参写法如下

this.$router.push({ path: 'detail',query:{id:dataid,title:titleNew,pic:p} })  

第一个参数是你想跳转的路径，第二个参数是你想要传过去的参数，以键值对的方式传过去。

那跳转的页面该如何接收前一个路由传过来的参数呢，接收方式如下

 let routerParams = this.$route.query.id//this.$route.query.XX是接受参数的方式

注意，在路由跳转的时候如果不设置参数scrollBehavior，那你跳转到新的页面则不会从顶部开始显示，就像下拉了滚动条一样。具体可参考以下

https://router.vuejs.org/zh-cn/advanced/scroll-behavior.html

4：点击事件怎么获得当前点击元素

看下面这个方法

<div class="box" @click="a($event)"><button>点击我获取元素</button></div>

methods:{
  	a(event){
  		 var target=event.target;//获取当前元素
  		 var currtarget=event.currentTarget;//获得你绑定当前事件的元素
  		 console.log(target);
  		 console.log(currtarget)
  	}
  }

看结果截图

我们获取到了当前元素获取相关属性值啥的不是so easy么。。

以上就是第一次做vue项目遇到的琐碎知识点，跟大家分享。