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