❝有的鱼是永远都关不住的
因为他们属于天空
❞
前言
你跟同龄人的差距有多大？
如果，你低着头，一脸不屑的表情，说明你该放轻松了，过度的消耗会让你轻飘飘
如果，你抬起头，一脸羡慕的表情，说明你该去锻炼了，过度的躺尸会让你爬不起来
你打算何去何从呢？
躺着不动，还是站起来，这是个问题
不过呢?没有什么事是游戏解决不了的
如果有，那就再玩一次，^_^
准备好了吗？游戏开始！
1 Switch
伪元素
我见过伪钞
我听过伪娘
看过打假赛
喝过假农药
你现在告诉我，元素居然也有假的！
我到底该相信什么呢？？？
代码片段
<span
class="el-switch__core"
ref="core"
:style="{ 'width': coreWidth + 'px' }">
</span>
技巧解析
❝一个元素可以做出两个元素的效果！
❞
环形需要一个DOM元素
小圆圈也需要一个DOM元素
现在只有一个span，怎么办？
捏造一个呗，span::after
既然有after，肯定有before吧
真棒！小花花送给你
伪类与伪元素 传送门
$refs
龙生龙，凤生凤，老鼠的儿子会打洞
一胎生十子，十子十各样
如果家里只有一个小孩，叫儿子还可以马上回应
如果家里有十个小孩呢？总不能喊，阿大，阿二，阿三...吧
所以，名字还是很重要
万一哪天出名了，不就成了时代的标签
代码片段
<input
class="el-switch__input"
type="checkbox"
@change="handleChange"
ref="input"
...
>
mounted() {
...
this.$refs.input.checked = this.checked;
}
技巧解析
❝Tom，哦不，应该叫你input
❞
你还在用getElementById吗？
下次试试$refs
有想到什么吗？
没错，与$children很像
一个有名字，一个只有编号！
一种新的组件通信，你get到了吗？
vue中的ref和$refs 传送门
❝组件通信总结
❞
属性事件：props-emit
爷爷孙子：$parents-$children
小偷箱子：v-bind-$attrs
纸条妹子：provide-inject
消嘤神器：dispatch-broadcast
十兄弟：$refs
「假如我们相遇」
「肯定一眼就能认出彼此」
