❝我想去见见你
但是，不知道你的位置
❞
前言
一个年轻人穷到没办法，只好沿街乞讨。
一天他叔叔过世，膝下无子，留下一笔遗产，指定要他来继承，他得知后激动不已。
旁边的乞丐问，老兄，你打算怎么处理这笔财产？
乞丐得意洋洋的说，当然是买个金碗啦，然后再去乞讨，让别人知道我是个体面的乞丐
如果，你有花不完的钱，你会怎么选择？
别急，慢慢想，可不止一种选择哦
想好了吗？Let's Go！
1 Checkbox
常用指令
服务员，拿份菜单
服务员，开瓶酒
服务员，上米饭
服务员，能插下电源吗？
代码片段
<input
v-if="trueLabel || falseLabel"
:name="name"
v-model="model"
<input
v-else
:name="name"
v-model="model">
技巧解析
❝你看，服务员会照着你说的去做，机器也会照着你的指令去执行
❞
:class,我想这个你一定见过，oo
没错，这就是一条指令，v-bind
v-model也是指令，还是有点甜的那种, 对, 就是语法糖, 你猜对了吗?
v-bind:value + @input, 双向绑定的语法糖
所以，形如v-xx,就是指令
v-if,如果满足条件就执行，v-else, 如果不满足就执行 v-drag,满足就拖拽；v-loading,满足就显示loading效果
还可以有好多好多，只要你下命令，程序就会按照剧本执行
自定义指令 传送门
类型检测
- 滴
- 滴，学生卡
- 滴，工作卡
- 滴，老年卡
想过没,为什么可以检测出你是老年卡？
代码片段
isChecked() {
if ({}.toString.call(this.model) === '[object Boolean]') {
...
}
...
},
技巧解析
❝万物皆对象
既然如此，总会分门别类，例如六大门派，五岳剑派，36洞，72岛
所以，每类对象都有其特定的字符串名称，以表示其类型
typeof, 检测值类型或引用类型
instanceof, 检测实例属于哪种引用类型
{}.toString.call即Object.prototype.toString.call,获取对象的字符串名称，即类型{}.toString.call(null) // "[object Null]" {}.toString.call(undefined; // "[object Undefined]" {}.toString.call('abc') // "[object String]" {}.toString.call(123) // "[object Number]" {}.toString.call(true) // "[object Boolean]" {}.toString.call(fn) // "[object Function]" {}.toString.call([1,2,3]) // "[object Array]" {}.toString.call(date) // "[object Date]"是不是很棒！
❞
生命周期
「12点了，开抢啦！开抢啦！」
A: 你点进去没？
B: 进去了，我排在20号，你呢？
A: 我前面还有30个
B: 哎呀，临时有事，咋办？
客服: 您好，别急先生，我这边帮您往后排，等其他人结束了再联系您
A: 总算到我了，什么情况，余额不足？？
客服: 不好意思，女士，只能等下次活动了，祝愿您下次够买到心仪的物品
代码片段
this.$nextTick(() => {
...
})
技巧解析
❝每一次活动，包含排队和临时有事
❞
同样，每一轮tick，包含同步和异步
余额不足，等待第二次活动
同样，主线程结束后，执行任务队列
周而复始，直至队列清空
created，数据改变 set
mounted，数据更新 Watcher + Promise.then
nextTick，DOM改变，setTimeout
接着，可以获取DOM，并执行操作
「记住」余额不足，可是要等下一次哦 Vue.nextTick 的原理和用途 传送门
短路运算
- 如果我当初没有逃课
- 如果我当初牵了你的手
- 如果我当初辞职创业
- 如果我们拿下了那笔订单
- 如果...
可惜的是,人生没有如果！
「所以，且行且珍惜」
代码片段
created() {
this.checked && this.addToStore()
}
created() {
if (this.checked) {
this.addToStore()
}
}
技巧解析
❝也许脑子进水了，就不会想如果了
❞短路运算，你学会了吗？
「不管你在世界的哪个地方」
「我一定会，再次去见你的」
❝我是一只七秒记忆的鱼
带你来一场奇妙的旅行
❞
