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项目遇到的琐碎知识点,跟大家分享。