This is the 15th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

This tutorial is the introduction tutorial, if there is an error, please point out the front end.

1. What is Element

Element, a Vue 2.0-based desktop component library for developers, designers, and product managers, encapsulates many common components. The official website is element.eleme.cn/#/zh-CN/com… Here is a brief introduction to Element.

When you visit the official website, you find countless pages have been encapsulated, and the style is diverse, generally can meet most of the business needs, if you are business development, directly copy and paste, and then in the copy of the code on the supplementary field also fill in the business can be.

1. Installation and introduction

If you want to use Element, you need to download and install the element-UI library, or an exception will be thrown.

npm i element-ui -S
npm install babel-plugin-component -D
Copy the code

Next, change the.babelrc file to:

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node", [
        "component",
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-chalk"
        }
      ]]
    }
  }
}
Copy the code

2. Use

Next, if you only want to introduce some components, such as Button and Select, you need to prove that you want to use the imported components by writing the following in main.js:

// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' Import {Button, Select, Option} from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(Button) Vue.use(Select) Vue.use(Option) Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })Copy the code

Then copy the code directly and add the corresponding fields to the business.

<template> <el-option v-model="value" filterable placeholder=" selectable "> <el-option v-for="item in options" :key="item.value"  :label="item.label" :value="item.value"> </el-option> </el-select> </template> <script> export default { name: 'HelloWorld2', data() {return {options: [{value: 'option 1', label:' golden cake '}, {value: 'option 2', label:' double milk '}, {value: 'option 3, label:' oyster omelet '}, {value: 'option 4, the label: "dragon beard noodles"}, {value:' option 5, label: 'Peking duck'}], value: "'}}} < / script >Copy the code

With Element, we don’t have to write our own pages, which is a lot less work and a good way to do it. The button is only used as a demonstration, other components please test yourself.

2. The animation

Vue provides a variety of different ways to apply transition effects when inserting, updating, or removing the DOM, and animations are created during the process. Animation use includes the following tools:

  • Automatically apply classes in CSS transitions and animations
  • You can use third-party CSS animation libraries such as Animate. CSS
  • Use JavaScript to manipulate the DOM directly in the transition hook function
  • You can use third-party JavaScript animation libraries such as Velocity.js

Let’s do a simple example of animation

1. Hide the display

Click once to hide the font, click again to show the font, and the code is attached below.

app.vue <template> <div id="app"> <anim/> </div> </template> <script> import anim from './components/anim.vue' export default { name: 'App', components:{ anim }, data () { return { } }, methods: { clickButton(event){ if(this.stutas ==HelloWorld){ this.stutas = HelloWorld2 }else{ this.stutas = HelloWorld } } }, } </script> <style> </style> Anim.vue <template> <div id="demo"> <button v-on:click="show = ! show"> Toggle </button> <! <transition name="demo"> <p v-if="show">hello</p> </transition> </div> </template> <script> export default {  name: 'anim', data () { return { show: true } }, methods: { clickButton(){ } } } </script> <style> .demo-enter-active, .demo-leave-active { transition: opacity 5s; }.demo-enter,.demo-leave-to /*.fade-leave-active below version 2.1.8 */ {opacity: 0; } </style>Copy the code

2. Mobile

Click the font once to move right, click the font again to move left. The code is attached below.

<template> <div id="demo"> <button v-on:click="show = ! show"> Toggle </button> <! -- <transition name="demo"> <p class =" myDemo" v-if="show"> Hello </p> </transition> </div> </template> <script>  export default { name: 'anim', data () { return { show: true } }, methods: { clickButton(){ } } } </script> <style> .demo-enter-active, .demo-leave-active { transition: all .5s ease; }.demo-enter,.demo-leave-to /*.fade-leave-active below version 2.1.8 */ {transform: translateX(100px); }.demo-enter-to,.demo-leave /*.fade-leave-active below version 2.1.8 */ {transform: translateX(0px); } .myDemo{ position:absolute; left:50px } </style>Copy the code

In the enter/leave transition, there are six class switches.

  • v-enter: Defines the beginning of a transition. It takes effect before the element is inserted and is removed in the next frame after the element is inserted.
  • v-enter-active: Defines the status when the transition takes effect. Applied throughout the transition phase, before the element is inserted, and removed after the transition/animation is complete. This class can be used to define the process time, delay, and curve functions for entering the transition.
  • v-enter-to:Version 2.1.8 or laterDefines the end state of entering a transition. The next frame takes effect after the element is inserted (at the same timev-enterRemoved) after the transition/animation is complete.
  • v-leave: Defines the start state of the exit transition. It takes effect as soon as the exit transition is triggered, and the next frame is removed.
  • v-leave-active: Defines the status when leaving the transition in effect. Applied throughout the exit transition phase, effective as soon as the exit transition is triggered and removed after the transition/animation is complete. This class can be used to define the process time, delay and curve functions for leaving the transition.
  • v-leave-to:Version 2.1.8 or laterDefines the end state of the exit transition. The next frame takes effect after the exit transition is triggered (at the same timev-leaveRemoved) after the transition/animation is complete.

3. Use third-party libraries

The recommended third party library here is Animate. Home page: daneden. Making. IO/animate. CSS… . Animate. CSS is a ready-to-use cross-browser animation library that can be used for your Web projects. Great for emphasis, home pages, sliders, and attention-leading prompts. The following section briefly describes the basic use of animate. CSS.

1. Index. HTML import component

In the same channel, components need to be introduced to use.

<! DOCTYPE HTML > < HTML > <head> <meta charset=" utF-8 "> <meta name=" content="width=device-width,initial-scale=1.0"> < link href = "https://cdn.jsdelivr.net/npm/[email protected]" rel = "stylesheet" type = "text/CSS" > < title > project < / title > </head> <body> <div id="app"></div> <! -- built files will be auto injected --> </body> </html>Copy the code

2. Introduce the div

Then get the official website document style, directly used.

<template> <div id="example-3"> <button @click="show = ! show"> Toggle render </button> <transition name="custom-classes-transition" enter-active-class="animated zoomOutRight" leave-active-class="animated fadeInDownBig" > <p v-if="show">hello</p> </transition> </div> </template> <script> export default { name: 'anim', data () { return { show: true } }, methods: { } } </script> <style> </style>Copy the code

You can also refer to the animate. Style /#documentat…