一、父子组件之间对象传递

1、app.Vue中的v-header 中加入 v-bind:seller="seller"

template>
<div id="app">
<v-header v-bind:seller="seller"></v-header>
<div class="tab">
<div class="tab-item">

2、header.vue组件中加入代码,注意不能直接使用src="seller.avatar",如果使用链接应该可以。

<template>
<div class="header">
<div class="content-wrapper">
<div class="avatar">
<img width="64" height="64" :src="seller.avatar">
</div>
</div>
</div>
</template>

3、运行效果

二、图片文字保持在同一行

<style lang="stylus" rel="stylesheet/stylus">
.header
color: #fff
background: #000000
.content-wrapper
padding: 24px 12px 18px 24px
font-size 0px
.avatar
display: inline-block
.content
display: inline-block
font-size 16px
</style>

font-size 0px为了消除空白字符。font-size: 0;解决inline元素间的空白间隙

三、自动使用2X,3X图片

bg-image($url)
background-image: url($url + "@2x.png")
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
background-image: url($url + "@3x.png")
设备像素比DPR(devicePixelRatio)是默认缩放为100%的情况下,设备像素和CSS像素的比值
DPR = 设备像素 / CSS像素(某一方向上)
注意一点要把图片放到Header目录下

VUE2.0 饿了吗视频学习笔记(五):父子对象传递、显示图片的更多相关文章

  1. VUE2.0 饿了吗视频学习笔记(四):颜色、跳转、设置、vue-resource

    https://gitee.com/1981633/vue_study.git 源码下载地址,随笔记动态更新中 1.设置选中项颜色 <template> <div id=" ...

  2. VUE2.0 饿了吗视频学习笔记(七-终):compute,循环,flex,display:table

    一.star组件使用到了computed属性 computed相当于属性的一个实时计算,当对象的某个值改变的时候,会进行实时计算. computed: { starType() { return 's ...

  3. VUE2.0 饿了吗视频学习笔记(六):定位问题、文字显示、模糊背景图片、点击事件

    一.定位问题按照视频写代码时,发现元素“5个“”定位不对,如下图 正常位置为 还以为是哪里写错了,仔细研究了下,需要在父div上加relative. position:relative/absolut ...

  4. VUE2.0 饿了吗视频学习笔记(二):新版本添加路由和显示Header

    https://gitee.com/1981633/vue_study.git 源码下载地址,随笔记动态更新中 webpack.dev.conf.js中添加两段代码 'use strict' cons ...

  5. VUE2.0 饿了吗视频学习笔记(一):VUE示例data.json

    https://gitee.com/1981633/vue_study.git 源码下载地址,随笔记动态更新中有的同学找不到data.json,以下是data.json内容 { "selle ...

  6. VUE2.0 饿了吗视频学习笔记(三):VUE2.0取消了v-link

    https://gitee.com/1981633/vue_study.git 源码下载地址,随笔记动态更新中 写法如下 <div class="tab-item"> ...

  7. vue2.0 饿了么项目学习总结

    最近在GitHub上发现一个基于vue2.0的饿了么项目.本着互联网的分享精神,现在将我自己所理解的,所总结的经验分享给大家.本篇文字我将从学习的角度向大家分享. 在学习本项目之前我已经将vue2.0 ...

  8. AntDesign vue学习笔记(六)Table 显示图片

    AntDeign官网上没有table动态绑定显示图片的示例,baidu上搜索出来的大部分都是React语法,无法使用. 经过摸索,实现方法如下:以显示一个图片,一个按钮为例(picurl是返回的jso ...

  9. Asp.net core 2.0.1 Razor 的使用学习笔记(五)

    按说这里应该写关于Role角色类的笔记,但是我还没时间实验这块,所以等以后我搞定了再来分享.现在先写其他部分. Asp.net core 2.0.1 Razor 的使用学习笔记——建立模型 按照微软官 ...

随机推荐

  1. [转帖]ASP.NET Core Web服务器 Kestrel和Http.sys 特性详解

    ASP.NET Core Web服务器 Kestrel和Http.sys 特性详解 https://www.cnblogs.com/vipyoumay/p/7525478.html ASP.NET C ...

  2. mysql数据库优化大全

    转载:https://blog.csdn.net/weixin_38112233/article/details/79054661 数据库优化 sql语句优化 索引优化 加缓存 读写分离 分区 分布式 ...

  3. 无需破解:Windows Server 2008 R2 至少免费使用 900天

    无需破解:Windows Server 2008 R2 至少免费使用 900天 2009年10月30日 星期五 02:10 1.首先安装后,有一个180天的试用期. 2.在180天试用期即将结束时,使 ...

  4. 什么样的 GitHub 才适合放简历上?

    为什么 GitHub 可以加分? 很多招聘描述上面都会备注 GitHub 是加分项,那么为什么它是加分项呢? 停,如果看到这里你还不知道 GitHub 是什么,可以看一下 Phodal的手记:http ...

  5. Check failed: status == CUBLAS_STATUS_SUCCESS (11 vs. 0) CUBLAS_STATUS_MAPPING_ERROR

    I0930 21:23:15.115576 30918 solver.cpp:281] Learning Rate Policy: multistepF0930 21:23:17.263314 310 ...

  6. Uva10474-STL水题-白书

    白书的一道水题.话说好久没认真做难题了.今天出了排名,所有队伍里倒数第一啊! 代码没什么可说的了. #include <algorithm> #include <cstring> ...

  7. AOP 获取 RequestContextHolder

    转载: http://blog.csdn.net/lexang1/article/details/52619215 在使用spring时,经常需要在普通类中获取session,request等对像. ...

  8. day28 反射 属性操作 getattr hasattr setattr delattr

    反射 用字符串来对应其同名的属性或者方法,通过某种方法调用这个字符串来执行方法或者获取属性 网络编程的时候非常好用,是很重要的内容 先看个示例吧: class Teather: dic = { &qu ...

  9. 【BZOJ2001】[HNOI2010]城市建设(CDQ分治,线段树分治)

    [BZOJ2001][HNOI2010]城市建设(CDQ分治,线段树分治) 题面 BZOJ 洛谷 题解 好神仙啊这题.原来想做一直不会做(然而YCB神仙早就切了),今天来怒写一发. 很明显这个玩意换种 ...

  10. [hgoi#2019/3/3]赛后总结

    T1--最长公共前缀(lcp) 定义两个字符串S,T 的最长公共前缀lcp(S,T)为最长的字符串R,满足R 既是S 的前缀又是T 的前缀. 给定一个字符串S,下标从1 开始,每次询问给出四个正整数a ...