❝

Some fish aren’t meant to be caged

Because they belong in the sky

❞

preface

How far are you from your peers? If you keep your head down with a disdainful look on your face, it’s time for you to relax. If you keep your head up with an envious look on your face, it’s time for you to exercise. Lying dead too much will make you unable to get up. Lying still or standing up, that’s a question but what? There is nothing the game can’t solve if there is, then play again, ^_^

Are you ready? Game on!

1 Switch

Pseudo elements

I’ve seen counterfeit bills

I’ve heard of fake girls

I’ve seen fake matches

I drank fake pesticides

Now you’re telling me there are fake elements!

What am I supposed to believe??

Code snippet

<span 

  class="el-switch__core" 

  ref="core" 

  :style="{ 'width': coreWidth + 'px' }">

</span>

Copy the code

Skills parsing

❝

One element can make two!

A circle requires a DOM element

Small circles also need a DOM element

Now there’s only one span, what do we do?

Make one up

If there is after, there must be before

That’s great! Little flower for you

Pseudo class and pseudo element portals

❞

$refs

Dragon born dragon, chicken born chicken, mouse’s sons can make hole. One born ten, ten kinds of children

If you have only one child, ask your son to respond immediately

What if there are ten children in the house? Can’t yell, big, two, three… !

So, names are still important

If one day famous, not become the label of The Times

Code snippet

<input

  class="el-switch__input"

  type="checkbox"

  @change="handleChange"

  ref="input"

.

>

Copy the code
 mounted() {

.

  this.$refs.input.checked = this.checked;

}

Copy the code

Skills parsing

❝

Tom, no, I should call you input are you still using getElementById? What do you think of next time you try $refs? Yes, much like $children one with a name and one with a number! A new component communication, have you got it? Ref and $refs portals in VUE

❞

❝

Component communication Summup properties Event: props-emit Grandchild: $Parents -$Children Thief Box: V-bind -$attrs Note Girl: provide- Inject Detox: dispatch-broadcast Ten brothers: $refs

❞

“If we should meet“ “I bet you recognize each other right away“

Refer to the link

  • The element’s official website
  • Element repository
  • Vue website
  • ES6 Tutorial

Review past

  • Follow Element to learn Vue tips (1) – Layout
  • Learn Vue tips with Element (2) — Container
  • Learn Vue tips with Element (7) – Button
  • Learn Vue tips with Element (8) — Link
  • Learn Vue tips with Element (9) — Radio
  • Learn Vue tips with Element (10) — Checkbox
  • Learn Vue tips with Element (11) — Input
  • Learn Vue tips with Element (12) — InputNumber
  • Learn Vue tips with Element (13) — Select
  • Learn Vue tips with Element (14) — Cascader