前端学习笔记-8.15学习饿了么的seller收藏,商家信息

seller.vue组件的剩余部分。
商家信息和收藏功能。

商家信息:
dome
前端学习笔记-8.15学习饿了么的seller收藏,商家信息_第1张图片
css:info-item的class里加入border-1px,下边线就一样了
前端学习笔记-8.15学习饿了么的seller收藏,商家信息_第2张图片
收藏功能:
1.收藏对应两种样式,用active的css显示
收藏未收藏用favoriteText显示
前端学习笔记-8.15学习饿了么的seller收藏,商家信息_第3张图片
css
前端学习笔记-8.15学习饿了么的seller收藏,商家信息_第4张图片
先给data写个默认值
data() {
return {
favorite: false
}
},
favoriteText可以用computed(计算属行)来观测,favoriteText文案依赖favorite变量的,用计算属性来观测
前端学习笔记-8.15学习饿了么的seller收藏,商家信息_第5张图片
2.我们来给favorite加个点击事件,@click=“toggleFavorite”
在methods中定义toggleFavorite
因为是在better-scroll中,我们要判断,
前端学习笔记-8.15学习饿了么的seller收藏,商家信息_第6张图片
3.but刷新以后又初始了,存到本地,下边完成
每个商家都有个id,我们回到app.vue中,一开始seller是有个id的,id是从url参数里边拿的,
我们需要写一个立即执行的函数:urlParse()
通过一个方法拿到queryParam,拿到queryParam以后,再去拿他的id
前端学习笔记-8.15学习饿了么的seller收藏,商家信息_第7张图片
4.定义方法util.js,实现从url中拿到id
多个的话:
192.168.43.143:8080/?id=12345&a=b#|/ratings,
用window.location.search拿到字符串,"?id=12345&a=b"解析一下即可
期望的输出:@return Object {id:12345,a:b}
前端学习笔记-8.15学习饿了么的seller收藏,商家信息_第8张图片
在APP.vue中引入
改下接口
前端学习笔记-8.15学习饿了么的seller收藏,商家信息_第9张图片
assign({},this.seller,res.data)
返回三个参数,第一个是最终返回的数据用空的{},第二个key,第三个value
用assign方法,可以为obj添加属性,为id赋值否则会被丢弃。

相当于用extend方法扩展了seller,把结果赋值给object,返回给this.seller
相当于在id的基础上,给seller添加其他的属性,这样就不会直接把id干掉,给对象添加属性的方法
5.定义saveToLocal函数,引入。和urlParse()一样,新建js文件,这里叫store.js
前端学习笔记-8.15学习饿了么的seller收藏,商家信息_第10张图片
在这里插入图片描述
6.返回seller.vue。
前端学习笔记-8.15学习饿了么的seller收藏,商家信息_第11张图片

你可能感兴趣的:(学习笔记)