❝

Stay Hungry · Stay Foolish

❞

preface

Are you serious, my friend? You have to teach me such a simple component??

Yes, I am very serious, come, show you a piece of my serious son, hee hee hee


Life is only three meals a day. Make it three meals a day. What’s left

Are you ready? I’ll take you on your first trip!

Hold on, hold on, take off!

1 Row

Component interface

What? You’ve never heard of component interfaces!What can I say about you?

In fact, I’ve never heard of it either. I should have by now!

You know the API interface, you know the input parameter, you know the output parameter

So, here’s the thing. Clack, clack, clack

What about you? Take notes “Component interface“ attribute methods The event

Code snippet

props: {

  tag: {

    type: String,

    default: 'div'

  },

  gutter: Number,

  type: String,

  justify: {

    type: String,

    default: 'start'

  },

  align: {

    type: String,

    default: 'top'

  }

}

Copy the code

Skills parsing

❝

Do you see anything? Gutter I’ll just accept a number, a sample, a string that works fine. Type I’ll just accept a string. Flash your card. Align my default is top, my lonely who understand

❞

Custom attributes

What, you’ve never used it?

Between you and me, NEITHER have ITake this wave and show it off in front of the girls

Dorremi send Sorahido, let’s move…

Code snippet

componentName: 'ElRow'.

gutter() {

.

  while (parent && parent.$options.componentName ! = ='ElRow')

.

}

Copy the code

Skills parsing

❝

ComponentName: I couldn’t adapt to the world, so I created my own world

Now, kid, get up. It’s you. I put up with you for a long time

“If you want to be found out, you have to be different!“

❞

Margin negative

What? Margin can also be negative

So, if you gain weight you can lose it back

Code snippet

style() {

  const ret = {};



  if (this.gutter) {

    ret.marginLeft = `-${this.gutter / 2}px`;

    ret.marginRight = ret.marginLeft;

  }



  return ret;

}

Copy the code

Skills parsing

❝

The name age work
Small lovely 18 Eat more lovely
200 200 200

What? 200 pounds, ha, ha, ha

200 is just the width of the box, so the total width is 200 times 3 is 600

If I had 20 intervals, I’d get 200 times 3 plus 20 times 2, which is 640

However, the left margin of the box box is 10, so (200 + 20) * 3 = 660

I gained 20 pounds of fat for no reason, it’s terrible!!

Let’s set the margin of the outer wrap to -10, take a breath and shrink it by 20 kg

So 200 plus 20 times 3 minus 10 times 2 is 640

It’s perfect

❞

Render function

This, the feeling is quite profound, a face meng force appearance??Big guy don’t worry, and listen to small white I slowly road

Code snippet

render(h) {

  return h(this.tag, {

    class: [

      'el-row'.

this.justify ! = ='start' ? `is-justify-${this.justify}` : ' '.

this.align ! = ='top' ? `is-align-${this.align}` : ' '.

      { 'el-row--flex': this.type === 'flex' }

].

    style: this.style

  }, this.$slots.default);

}

Copy the code

Skills parsing

❝

Oh, it’s HTML unpacking

  • tag: div

  • {class: ‘el-row’}

  • So, what is this.$slot.default? No rush, no rush. We have a long trip

❞

“How tired! How tired! Let me take a break“


“How tired! How tired! You’re making me lazy“

2 Col

Component communication

Hello? Are you in?

In the

Hello? Are you still there?

In the

Hello? Are you in?

In the

Hello? Will you always be there?

I’ll always be there

Is there enough dog food left in this wave?

You come back, I don’t tell your father, beat you to death!!

Code snippet

gutter() {

  let parent = this.$parent;

}

Copy the code

Skills parsing

❝

This.$children this: Dad, let our grandson have a try. So, don’t just want to take from the father, but spoil the children also should let the children do some contribution, their own dedication to support the parents

Father chain. Did you get it?

❞

The class traverse

Here, bring this over

Yeah, bring this in, too

B: well… And this

B: well… Well, bring it all in

Your younger sisterCan’t you just say it in one go? I’ll just go through it in one go

Code snippet

['span'.'offset'.'pull'.'push'].forEach(prop => {

  if (this[prop] || this[prop] === 0) {

    classList.push(

prop ! = ='span'

        ? `el-col-${prop}-${this[prop]}`

        : `el-col-${this[prop]}`

    );

  }

});

Copy the code

Skills parsing

❝

It’s simple. There is no

I’m afraid to insult you by saying more!

❞

Object traversal

How’s your date?

I’m in a good relationship. I’m not. Cows are good, cats are good, dogs are good, everybody is good

Code snippet

Object.keys(props).forEach(prop => {

  classList.push(

prop ! = ='span'

      ? `el-col-${size}-${prop}-${props[prop]}`

      : `el-col-${size}-${props[prop]}`

  );

})

Copy the code

Skills parsing

❝

Objects, but also through, cheating and playing with women’s feelings of men!

Traditional traversal for(let key in props)

Fancy traversal Object.keys(props).forEach()

Send you flowers

❞

“Still playing puss. Aren’t you tired?“


“No, I’m going to bed“

❝

I’m a fish with seven seconds of memory

I want to take you on a wonderful journey

❞

Refer to the link

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