❝

I’ve always wanted to prove it

Genius can be surpassed by effort

❞

preface

  • I’d like a latte
  • Is this what you want?
  • Uh, this medium
  • Excuse me, Sir. This is a large and this is a medium
  • Aren’t these big, medium and small cups? I’ll have this medium
  • I’m sorry, Sir. That’s a large. This is a medium… Medium grande grande grande
  • I don’t care what you call it, I’ll take the medium out of these three, okay
  • Excuse me, Sir. This is a large. This is a medium

So, the question is, what is it?


Grab your cup, make sure you don’t spill it. Let’s go!

1 Radio

Events to modify

What happens if you throw a stone into water? What about the stones going down? There will be bubbles coming out of the water well, the event is similar, capture and bubble

Code snippet

<label

.

  @keydown.space.stop.prevent="..."

>

.

</label>

Copy the code

Skills parsing

❝

Prevent — prevent bubbles, no bubbles on the water stop — prevent default events, no ripples on the water space — Press the space bar to trigger, only if you are still in the middle of the lake

❞

Two-way binding

  • Shall we have a fight?
  • Not good!
  • It’s okay to fake a fight
  • You promise you won’t get mad
  • I’m sure
  • What are you doing sitting there? Go cook!
  • Whoa, whoa, whoa, you’re yelling at me. You’re yelling at me
  • No, that…
  • I’m not listening. I’m not listening
  • You’re the one who said fake it
  • I don’t care. I don’t care
  • Let’s go out to dinner
  • Woo woo woo…
  • Can I buy you a bottle of perfume?
  • That’s what you said, but don’t go back on it. I’m cooking “Why do I always get hurt!“

Code snippet

.

<input

.

  :value="label"

  type="radio"

  v-model="model"

.

>

.



<template>

  <el-radio v-model="radio" label="1"</el-radio>

  <el-radio v-model="radio" label="2"</el-radio>

</template>

<script>

  export default {

    data () {

      return {

        radio: '1'

      };

    }

  }

</script>

Copy the code

Skills parsing

❝

Why are you allowed to act in pettish and not allow me to lose my temper

Yes, we can, because we work both ways

Play the womanAssign, radio, you are now ‘1’

Out of temperClick, poke you, you’re now a ‘2’ and remember, it works better in both directions

❞

Mixins hybrid

  • Yue, can you add a wechat
  • Yue, scan the qr code
  • Yue, add a wechat
  • Yue, o…
  • Yue, o… .
  • Are you tired of it? I sent group space qr codeFinally added to the beauty wechat

Code snippet

export default {

.

  mixins: [Emitter]

.

}



// emitter.js

export default {

  methods: {

    dispatch(componentName, eventName, params) {

.

    },

    broadcast(componentName, eventName, params) {

.

    }

  }

};

Copy the code

Skills parsing

❝

It’s annoying because people come in every time so let’s just store it somewhere and get it if you need to since you’re all going to be using dispatches and broadcast, I’m just going to store it and put it in emitters. Js, and if you need to, bring it in and mix it in with Emitter

❞

Dependency injection

  • Hey, pass this note to her
  • Pass this on to her, the brother in the back
  • Give this to her. The brother gave it to her
  • Here you go. He gave it to you

Code snippet

export default {

  name: 'ElForm'.

  componentName: 'ElForm'.

  provide() {

    return {

      elForm: this

    };

  }

.

}

Copy the code
export default {

.

  name: 'ElRadio'.

  inject: {

    elForm: {

      default: ' '

    },



    elFormItem: {

      default: ' '

    }

  }

.

}

Copy the code

Skills parsing

❝

Sweet is sweet, but it’s troublesome, isn’t it

Here, brother, I got you something nice

What?

Wechat, next time you just pass the note to her

provide: I put theelFormTo you for a long time

injectB: I got it. How can there be a surpriseSurprise not surprise, meaning not surprise, O(∩_∩)O

❞

❝

A new communication method review component communication properties Event: props-emit: $Parents -$Children Thief Box: V-bind -$attrs Note Girl: provide-inject

❞

Props type

  • drops
  • Drop, student card
  • Drop, work card
  • Drop, senior citizen card
  • Why don’t you pay by credit card?
  • I have this
  • Oh, my God, it’s a knight card

Code snippet

export default {

  props: {

    value: {},

    label: {},

    disabled: Boolean,

    name: String,

    border: Boolean,

    size: String

  }

}

Copy the code

Skills parsing

❝

Remember?

Each props can have its own unique type

Name: String

Size: [String, Number], String or Number

Value: {}, all-purpose

Is not very ye!!

❞

“Take a break. I’ll be right back“ “The wind is blowing. I have to try to survive“

Learn Vue tips with Element (9) – Radio(下)

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