vue脚手架图片懒加载模块和样式穿透

1.vue样式穿透

vue样式穿透：在样式隔离的前提下，在父组件中修改子组件样式

• 正常情况下，在样式隔离的前提下，父标签不能修改子组件样式。如果想修改子组件样式，使用样式穿透

1.1 样式穿透语法结构

语法结构：父组件中标签的选择器 >>> 子组件标签的选择器

    .home>>>h1 {
        text-decoration: underline;
    }

1.2 使用场景

样式穿透的使用场景：在使用组件库时，组件库中的样式都是预设好的，在父组件中有时无法直接修改组件库中的样式，此时就要使用样式穿透修改组件库样式

2.图片懒加载

2.1 安装图片懒加载模块

cnpm i vue-lazyload --save

2.2 在main.js入口文件中引入图片懒加载模块

	import VueLazyLoad from 'vue-lazyload'
	Vue.use(VueLazyLoad,{
  		loading: require("@/assets/holder.png")
	})

2.3组件中显示图片时，使用懒加载，将图片的 :src改为 v-lazy即可

	<img v-lazy="roomData.room_src" alt="">