接下里做打印功能
image.png
image.png
需求：打印的时候不要侧边栏
写个CSS，然后在引用里加媒体查询
image.png
image.png
打印里不想有“删除”和“添加”
css里把他们display:none掉
接下来做换肤功能
解决：直接切换对应的class名称（对应不同的CSS样式）就好
image.png
image.png
image.png
image.png
image.png
问题：这里有白边
image.png
让背景色覆盖整个body
接下来进行模块化改造
image.png
模块化和组件化的区别
组件化是一种特殊的模块化
如果把js、css、html弄到一起，就是组件化
editable-span.js就是组件
image.png
这里loginVisible是在外面的父级（index.html）里的变量，这里这个组件是需要通知父级的
如何通知？通过事件 emit /on
组件里data必须是函数
image.png
image.png
这里是错的
image.png
image.png
image.png
父级把参数shareLink传给子组件
image.png
这里传参不能有大小写，不然有问题（html规范里标签名，属性名不允许有这种）
image.png
父子间通信
image.png
在methods里需要加this，在html里不需要加this，vue是这样用的
image.png
image.png
面试题：子组件不能操作父组件的data，如果子组件一定要操作父组件的data，那么就通过emit让父组件自己去操作
image.png
需求：在没有登录的时候，点击分享应该提示需要先登录
image.png
整个过程
image.png
触发onClickSave
image.png
触发loginVisible为真
image.png
用户填写完信息就会点击登录，触发
image.png
然后触发app里的
image.png
image.png
id变了会触发watch
image.png
image.png
父子间通信
image.png
儿子控制孙子
如何让爷爷控制孙子呢？或孙子如何通知爷爷呢？
image.png
爷孙通信就是2个父子通信级联
如何解决呢？vuex就是来解决的
image.png
image.png
1是传到儿子组件resume.js里的参数
2是外面这个html对应的app.js里面的数据
让其他的resume、aside也组件化
