脚本宝典收集整理的这篇文章主要介绍了实习项目开发总结,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
import Vue from 'vue'
export default new Vue();
//创建eventBus中转站
import EVENTBUS from '@/eventBus'
//在需要用到的组件中导入eventbus
updateList(){
EVENTBUS.$emit('updateList', 1)
}
//注册事件,并传递参数
activeGetSpliter() {
EVENTBUS.$on('activeGetSpliter', reg => {
this.isLoading = true;
this.isActive = false;
this.getSpliter(reg);
});
},
//监听事件,处理参数
其实如果使用了VUE,个人认为不与DOM打交道是最好的:)
@click='changeSpliter(spliterIndex, $event)'
//在函数中传递一个叫$event的参数
var spliterDOM = $event.target.parentNode.previousElementSibling.childNodes[0];
//如此便可以获取DOM
console.log($event.target)
//可以如此来观察所选取的是何元素
从后端得到的json里有一backUp数组,数组由数个对象组成,每个对象里包含一个字符串类型的spliter_id,和一个brand_arr的数组。brand_arr数组中有数个对象,每个对象包brand_id和一些其他的brand基本信息。现在要将数个spliter_id展示,且在其下方展示其包含的brand_id。
<div>
<div
v-for='(spliter, spliterIndex) in backUp'
:key='spliterIndex'
><!--单个spliter-->
{{ spliter.spliter_id}}
</div>
<div
v-for='(brand, brandIndex) in spliter.brand_arr'
:key='brandIndex'
><!--单个brand-->
{{ brand.brand_id }}
</div>
</div>
注意两个v-for中的参数使用。使用合适的参数可以很快捷的完成循环嵌套,来展示包含多个层级关系的数据
在config/index.js中写入以下内容
moudle.exports = {
dev: {
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/GetSpliterAndBrandBySite': {
target: 'https://wpc-product.earth.xpas.xxx.com',
changeOrigin: true,
secure: false,
pathRewrite: {
'^/GetSpliterAndBrandBySite': '/GetSpliterAndBrandBySite'
}
},
},
}
}
接下来,如果想使用GetSpliterAndBrandBySite这个api,只需在请求中写入
var url = '/GetSpliterAndBrandBySite';
就行了。
以上是脚本宝典为你收集整理的实习项目开发总结全部内容,希望文章能够帮你解决实习项目开发总结所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。