❝

You have to believe in the path you’re on

Just keep moving forward

❞

preface

  • You are impulsive, adventurous, generous, and fearless. And once determined, until the Yellow River heart die, overcome all difficulties to achieve the goal
  • You are conservative and prefer stability to change. In character is slower heat, to work, life, the environment needs a longer adaptation period
  • You love new things and are smart, but you are often not very single-minded. The new and strange things in your head make people curious
  • You are full of love, and underneath your hard shell is a soft heart. You are loyal to your friends and family, and you stick to things to the end
  • You,…

You’re bound to carry a lot of labels, too

focus Fat curtilage Work overtime dog XXS .

If not, go digging together

1 Tag

The selector +

Class begins, the teacher calls the roll

  • Xiao Ming
  • to
  • Xiaoming’s on the left
  • to
  • The one on xiaoming’s right
  • to
  • In front of Xiao Ming
  • to
  • Behind Xiao Ming
  • to

Have no words to this kind of teacher.

If there is a dictionary nearby, the teacher will not do soSo, what should I do when I meet rare characters?

Cold bai

Like the teacher, front, back, left, right

Code snippet


.demo-block.demo-tag .el-tag+.el-tag {

    margin-left: 10px;

}

Copy the code

Skills parsing

❝

Label a, to label the 2345, to the very tired ah, cried so long label at the back of the label, to, to, to you see, it’s not solved it + : brothers selector, behind the ~ : brothers selector, those who have a big Bob selectors are coming behind, tattoo Benedict CSS selector of the portal

❞

Props check

  • drops
  • drops
  • Drops drops
  • pyrazole

Have you had new cards recently? Why does it sound different

Code snippet

disableTransitions: Boolean,

color: String,

effect: {

  type: String,

  default: 'light'.

  validator(val) {

    return ['dark'.'light'.'plain'].indexOf(val) ! = = 1;

  }

}

Copy the code

Skills parsing

❝

Special validator(val) {} Returns if there is a whiff of advanced smell ^^ validates the portal

❞

JSX event modifier

  • How would you like your hair cut today?
  • I’m not having a haircut today. I just came to the SPA

Code snippet

<el-tag 

  :class="class"

  :style="style"

  :@click="handleClick">

  <i

    v-if="closable"

    class="el-tag__close el-icon-close" 

    on-click={ this.handleClose }></i>

</el-tag>

Copy the code
methods: {

  handleClose(event) {

/ * *

* event flow

* Prevent bubbling

* /

    event.stopPropagation();

    this.$emit('close', event);

  },

  handleClick(event) {

    this.$emit('click', event);

  }

},

render(h) {

  const { type, tagSize, hit, effect } = this;

  const classes = [

    'el-tag'.

    type ? `el-tag--${type}` : ' '.

    tagSize ? `el-tag--${tagSize}` : ' '.

    effect ? `el-tag--${effect}` : ' '.

    hit && 'is-hit'

  ];

  const tagEl = (

    <span

      class={ classes }

      style={{ backgroundColor: this.color }}

      on-click={ this.handleClick }>

      { this.$slots.default }

      {

        this.closable && <i class="el-tag__close el-icon-close" on-click={ this.handleClose }></i>

      }

    </span>

  );



  return this.disableTransitions 

    ? tagEl 

    : <transition name="el-zoom-in-center">{ tagEl }</transition>;

  }

};

Copy the code

Skills parsing

❝

How do you make SAP? Vue: click.stop.enter=”hander” JSX: hander(event){… } prevent bubblings: event.stoppropagation () preventDefault event: event.preventdefault () press enter event.keycode! == 13 event & keystroke modifier portal

❞




“You gave me a gorgeous secret“ “Sleeping in beautiful dreams on a midsummer night“

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
  • Learn Vue tips with Element (15) — Switch
  • Learn Vue tips with Element (16) – Slider
  • Learn Vue tips with Element (17) — TimePicker
  • Learn Vue tips with Element (18) — DatePicker
  • Learn Vue tips from Element (20) — Upload
  • Learn Vue tips with Element (21) — Rate
  • Follow Element to learn Vue tips (23) – Transfer
  • Learn Vue tips with Element (24) — Form
  • Learn Vue tips with Element (25) — Table