1. Computing attributes

1. Why do you need to calculate attributes?

Computing logic for expressions can be complex, and placing too much logic in a template can overweight the template and make it difficult to maintain. Computing attributes can make the template simpler.

Contrast:

2. How to use computed attributes

Basic Grammar

•      computed: {
          reverseString: function(){
            return this.msg.split('').reverse().join('');
          }
        }
  //ReverseeString Custom Property Name

Be careful:

• The result must be returned with return
• The this keyword needs to be added to indicate the current msg application
• Calculated attributes are processed based on data in the data.
• Enter the name of the property defined in computed directly in the template, without the need to add () calls. (Example illustrated above)

3. Differences between computational attributes and methods

Conclusion:

• Computed computed properties are cached based on their responsive dependency (so-called dependency is based on the data in the data, changing the data and changing the results). When reverseString is called multiple times, it will return the first computed result directly as long as the value in the data does not change. The computed properties will not be recalculated until the value in the data changes.
• Advantages of calculating attributes: Performance can be saved if the data required for the operation or calculation is time consuming or computationally intensive and is called multiple times.
• methods There is no caching problem, and each request responds to the data.
• 

 

2. Monitor Watch (to monitor data and respond in time when data changes).

Although computational attributes are more appropriate in most cases, sometimes a custom listener is required, which is why Vue provides a more general way to respond to changes in data through the watch option.

1. Application Scenarios

Perform asynchronous (asynchronous is requesting and updating data without refreshing a Web page) or costly (expensive is generally time consuming or performance).

ps:The main difference from computed properties is asynchronous, expensive

2. Listener usage

• 
• Implement form validation with listeners
• 

3. vue animation

Vue provides many different ways to apply transition effects when inserting, updating, or removing DOM s. These include the following tools:

• Automatically apply class in CSS transitions and animations
• Can work with third-party CSS animation libraries such as Animate.css
• Direct manipulation of DOM using JavaScript in transition hook functions
• Can work with third-party JavaScript animation libraries such as Velocity.js

1,Transitional Class Name

There are six class switches in the in/out transition.

1. v-enter: Defines the start state of the transition. Valid before the element is inserted and removed at the next frame after the element is inserted.

2. v-enter-active: Defines the state at which the transition takes effect. Applies throughout the transition phase, valid before the element is inserted and removed after the transition/animation is complete. This class can be used to define the transition time, delay, and curve functions.

3. v-enter-to: Defines the end state of the transition. The next frame takes effect after the element is inserted (while v-enter is removed) and is removed after the transition/animation is complete.

4. v-leave: Defines the start state of the departure transition. It takes effect immediately when the departure transition is triggered and the next frame is removed.

5. v-leave-active: Defines the state at which the departure transition takes effect. Applied throughout the departure transition phase, takes effect immediately when the departure transition is triggered and is removed after the transition/animation is complete. This class can be used to define the departure transition time, delay, and curve functions.

6. v-leave-to: Defines the end state of an exit transition. The next frame takes effect after the exit transition is triggered (while v-leave is deleted) and is removed after the transition/animation is complete.

• Summary: Transition can be divided into two situations: 1, the state at the beginning and end of the animation 2, the intermediate state of the animation and the transition process

2. Modification of the v-prefix (if you use an unnamed <transition> for these class names that switch in transitions, v-is the default prefix for these class names. You can also define your own name by adding the name attribute to <transition>)

3. Use third-party CSS animation library

 

 

 

4. Use animation hook function (can be understood as animation life cycle function, in order)

 

Shopping cart ball hook function

 

5. v-for rendered list, using animation. (Can't use transition package, need transitionGroup package.)

    <style>
        li {
          border: 1px dashed #999;
          margin: 5px;
          line-height: 35px;
          padding-left: 5px;
          font-size: 12px;
          width: 70%;
        }
        li:hover {
          background-color: hotpink;
          transition: all 0.8s ease;
        }
        .v-enter,
        .v-leave-to {
          opacity: 0;
          transform: translateY(80px);
        }
        .v-enter-active,
        .v-leave-active {
          transition: all 0.6s ease;
        }
        /* The following.v-move and.v-leave-active work together to achieve the effect of following elements in the list, gradually floating up, just remember */
        .v-move {
          transition: all 0.6s ease;
        }
        .v-leave-active{
          position: absolute;
        }
      </style>
</head>
<body>
    <div id="app">
        <div>
          <label>
            Id:
            <input type="text" v-model="id">
          </label>
    
          <label>
            Name:
            <input type="text" v-model="name">
          </label>
    
          <input type="button" value="Add to" @click="add">
        </div>
    <transition-group appear>
        <!-- appear To have an animation effect that will fade in when the page is first loaded -->
        <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
          {{item.id}} --- {{item.name}}
        </li>
      </transition-group>
    <script>
        var vm = new Vue({
          el: '#app',
          data: {
            id: '',
            name: '',
            list: [
              { id: 1, name: 'Xiao Ming' },
              { id: 2, name: 'Floret' },
              { id: 3, name: 'petty thief' },
              { id: 4, name: 'Xiaowang' }
            ]
          },
          methods: {
            add() {
              this.list.push({ id: this.id, name: this.name })
              this.id = this.name = ''
            },
            del(i) {
              this.list.splice(i, 1)
            }
          }
        });
      </script>