Front-end Learning--Vue.js Day3

1. Brand List - Get List from Database

When sending Ajax (get, post, jsonp) requests, it is best to execute the sending function in create before mounting it (at the earliest, only create, then get data and methods)

2. Brand List - Complete Additional Functions


3. Brand List - Complete Delete Function

4. Brand List - Root Domain Name of Global Configuration Data Interface

5. Brand List - Global Configuration of emulate JSON Options

6. Animation - Using Transition Class Name to Realize Animation
7. Animation-custom "v-" prefix: animation between different groups

<template>
  <div>
    <!--animation-Using Transition Class Name to Realize Animation-Using Transition Class Name to Realize Animation-->
    <!--Requirement: Click the button to let h3 Display, click the button again, let's h3 hide-->
    <button @click="flag = !flag">click</button>
    <br>
    <!--1. Use transition Elements, wrap up elements that need animation control
    transition The element is bue Officially provided
    -->
    <transition>
      <h3 v-if="flag">This is one h3</h3>
    </transition>
    <hr>
    <button @click="flag2 = !flag2">click</button>
    <transition name="my">
      <h6 v-if="flag2">This is one h6</h6>
    </transition>
  </div>
</template>

<script>
  export default {
    name: 'day_three',
    data(){
      return{
        flag:false,
        flag2:false
      }
    },
    methods:{

    }
  }
</script>

<style scoped>
  /*2. Customize two sets of styles to control elements within translation to animate
  */
  /*v-enter [This is a point of time] before entering, the starting state of the element, which has not yet begun to enter.*/
  /*v--leave-to [This is a point of time] is the termination state of the element leaving after leaving, when the element animation has ended.*/
  .v-enter, .v-leave-to{
    opacity: 0;
    transform: translateX(180px);
  }

  /*.v-enter-active(The time period of the entrance animation,.V-leave-active (the time period of the exit animation)*/
  .v-enter-active, .v-leave-active{
    transition:all 0.4s ease;
  }
  
  .my-enter, .my-leave-to{
    opacity: 0;
    transform: translateY(180px);
  }
  .my-enter-active, .my-leave-active{
    transition:all 0.4s ease;
  }
</style>

8. Animation - using third-party animate.css class library to achieve animation

9. Introduction of Half-field Animation by Animation-hook Function
Hook function: animation life cycle function

10. Animation-hook Function to Realize Half-field Animation

<template>
  <!--Implementation of Half-field Animation with Hook Function-->
  <div>
    <button @click="flag = !flag">Add to cart</button>
    <transition
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:after-enter="afterEnter"
    >
      <div class="ball" v-show="flag"></div>
    </transition>
  </div>

</template>
<script>

  export default {
    data(){
      return {
        flag:false
      }
    },
    methods:{
      //Note: The first parameter of the animation hook function: el, which represents the DOM element to execute the animation, is a native JS DOM object.
      //As you can see, the native JS DOM object is obtained through document.getElementById('').
      beforeEnter(el){
      //  At this point, the animation hasn't started yet. You can set the initial style of the element to start the animation here.
      //  Set the starting position of the ball before it starts animation
        el.style.transform = "translate(0, 0)"
      },
      enter(el, done){
        //This sentence has no practical effect, but it can not achieve animation effect without writing (no transition)
        //Force animation refresh through el.offsetWidth
        el.offsetWidth
      //  Here you can set the end state of the animation with the ball.
      //  translate(x, y)
        el.style.transform = "translate(150px, 450px)"
        el.style.transition = 'all 1s ease'

        //Done = afterEnter function, that is, done is a reference to afterEnter
        //When transitioning with JavaScript only, done must be used for callbacks in enter and leave.
        // Otherwise, they will be invoked synchronously and the transition will be completed immediately.
        done()
      },
      afterEnter(el){
         this.flag = false
      }
    }
  }
</script>

<style>
  .ball{
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: red;
  }
</style>

11. Using transition-group element to realize list animation
12. Realize the animation effect of list deletion and deletion

<template>
  <div>

    <div>
      <label>
        ID:
        <input type="text" v-model="id">
      </label>
      <label>
        Name:
        <input type="text" v-model="name">
      </label>

      <button @click="add">click</button>

    </div>

    <ul>
      <!--When implementing list transitions, pass if transition elements are needed v-for Cyclic rendering
      //Instead of using transition packages, use transition group - >.
      <transition-group>
        <!--If you want to v-for The animation of the elements created by the loop must be set for each element:key attribute-->
        <li v-for="item in list" :key="item.id" @click="del(i)">
          {{item.id}} --- {{item.name}}
        </li>
      </transition-group>

    </ul>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        id:'',
        name:'',
        list:[
          {id: 1, name: 'eunuch who conspired with Li Si to influence the succession to the First Emperor'},
          {id: 2, name: 'execrated Song capitulationist'},
          {id: 3, name: 'Yan Song'},
          {id: 4, name: 'Wei Zhongxian'}
        ]
      }
    },
    methods:{
      add(){
        this.list.push({id:this.id, name:this.name})
        this.id = this.name =  ''
      },
      del(i){
        this.list.splice(i, 1)
      }
    }
  }

</script>
<style>
  li{
    border: 1px dashed #999;
    margin: 5px;
    line-height: 35px;
    padding-left: 5px;
    font-size: 12px;
    text-align: left;
  }

  .v-enter, .v-enter-to{
    opacity: 0;
    transform: translateY(80px);
  }

  .v-enter-active, .v-leave-active{
    transition: all 0.6s ease;
  }
  li:hover{
    background-color: pink;
    transition: all 0.6s ease;
    width: 100%;
  }

  /*Fixed Writing (usually written as. v-move and. v-leave-active)
  Implementing List Departure Effect*/
  .v-move{
    transition: all 0.6s ease;
  }
  .v-leave-active{
    position: absolute;
  }
</style>

13. The role of appear and tag attributes in transition-group

14. Components:
(1) What are components?
(2) The difference between componentization and modularization:

(3) The way to create components:
Method 1: Vue.component (global component) and Vue.extend.
Defining components: Vue.extend returns a component object
The data option is a special case, and it needs to be noted - in Vue.extend(), it must be a function

perhaps

Use Components: Note that when component names are declared, hump names can be used, and "- lowercase" is used instead of capitalization.

Method 2: Vue.component (global component) and {} (object)

Note:

Method 3:
Define components

Using components:

(4) Use components to define private components
Define html content

Define components in id = vm2

Use components (local components here)

(5) data in a component: data at this point cannot be an object but is defined as a function

(6) Why the data of a component must be a function


The advantage is that:
Each instance component creates a count variable with no association between each instance

(7) Component switching - using v-if and v-else in combination with flag for switching
Disadvantage: flag has only true and false results, so it can only switch between two components

<template>
  <div>
    <a href="" @click.prevent="flag = true">Sign in</a>
    <a href="" @click.prevent="flag = false">register</a>

    <login v-if="flag"></login>
    <register v-else="flag"></register>
  </div>
</template>

<script>
  import Vue from 'vue'
  export default {
    name: 'case8',
    data(){
      return{
        flag:true
      }
    }
  }

  Vue.component('login',{
    template:'<h3>This is login.</h3>'
  })
  Vue.component('register',{
    template:'<h3>This is registration.</h3>'
  })

</script>

<style scoped>

</style>

(8) Component switching - component switching using component elements provided by Vue

<template>
  <div>
    <a href="" @click.prevent="comName = 'login'">Sign in</a>
    <a href="" @click.prevent="comName = 'register'">register</a>
    <component :is="comName"></component>
  </div>
</template>

<script>
  import Vue from 'vue'
  export default {
    data(){
      return{
        comName:'login'
      }
    }

  }
  Vue.component('login',{
    template: '<h3>This is login.</h3>'
  })
  Vue.component('register', {
    template: '<h3>This is registration.</h3>'
  })
</script>

(9) Component switching - Application switching animation and mode mode

<template>
  <div>
    <a href="" @click.prevent="comName = 'login'">Sign in</a>
    <a href="" @click.prevent="comName = 'register'">register</a>
    <transition mode="out-in">
      <component :is="comName"></component>
    </transition>

  </div>
</template>

<script>
  import Vue from 'vue'
  export default {
    data(){
      return{
        comName:'login'
      }
    }

  }
  Vue.component('login',{
    template: '<h3>This is login.</h3>'
  })
  Vue.component('register', {
    template: '<h3>This is registration.</h3>'
  })
</script>

<style>
  .v-enter,
  .v-leave-to{
    opacity: 0;
    transform: translateX(150px);
  }

  .v-enter-active,
  .v-leave-active{
    transition: all 0.5s ease;
  }
</style>

Tags: Vue Database JSON Javascript

Posted on Tue, 27 Aug 2019 19:50:24 -0700 by Quadodo