1, Virtual DOM: The labels written in the template in the vue file are all templates, which must be processed into virtual DOM objects by vue before they can be rendered and displayed on the real DOM page

2, diff algorithm: used to compare the new virtual DOM with the old virtual dom

1. Root element change → delete and rebuild DOM tree
2. Root element unchanged, attribute changed → DOM reuse, update attribute
3. The root element does not change, the child element does not change, and the element content changes:
① No key in place update
② The key value is updated locally for the index
③ With key - the value is ID. the value of key can only be unique and non repetitive, string or numeric value

3, Dynamic class: use v-bind to set dynamic values for the tag class

Syntax: class = "{class name: Boolean}"
Summary: save the class name in vue variable and assign it to tag

<template>
  <div>
    <!-- grammar:
      :class="{Class name: Boolean value}"
      Usage scenario: vue Variable controls whether the tag should have a class name
     -->
    <p :class="{red_str: bool}">dynamic class</p>
  </div>
</template>

<script>   //Write the right and wrong of bool in the script tag
export default {
  data(){
    return {
      bool: true
    }
  }
}
</script>

<style scoped>  //Write style in style label
  .red_str{
    color: red;
  }
</style>

4, Dynamic style: dynamically set the value of style for the label

Syntax: style="{css attribute: value}"

<template>
  <div>
    <!-- dynamic style grammar
      :style="{css Attribute name: value}"
     -->
    <p :style="{backgroundColor: colorStr}">dynamic style</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      colorStr: 'red'
    }
  }
}
</script>
<style>
</style>

5, vue filter: format conversion. The filter is a function. The incoming value returns the processed value

Single filter syntax:
①Vue.filter("filter name", (operation corresponding to value) = > {return "return processed value"}) / / global registration
② Filters: {filter name: (value | filter) = > {return "return processed value"} / / local filters can only be used in the current vue file
Global registration is best in main JS, a registration is used everywhere
Multiple filter syntax:
① Filter parameters: vue variable | filter (argument)
② Multiple filters: vue variable | filter 1 | filter 2
The filter is just a simple name, and the method needs to be defined by itself

<template>
  <div>
    <p>{{ msg }}</p>  // Original appearance:

    <p>{{ msg | reverse('Argument') }}</p>  // ① Use flip filter to write msg value in return ② global filter
    <p :title="msg | toUp | Second filter ">Long mouse pause</p>  
    
  </div>
</template>

<script>
export default {
  data(){
    return {
      msg: 'Hello, Vue'
    }
  },
  // Method 2: local filter can only be used in the current vue file
  //  Syntax:  
     filters: {
       Filter name (val) {
         return Processed value
       }
     }
  */
  filters: {
    toUp (val) {  // toUp is the name of the filter
      return val.toUpperCase()  //Returns the processed value
    }
  }
}
</script>
<style>
</style>

6, Calculated attribute: the result calculated by one data depending on other data

1. Syntax:

computed: {
    "Calculated attribute name" () {
        return "value"
    }
}

2. The calculation attribute is also a vue data variable, so do not duplicate the name in data. The usage is the same as that in data
3. Advantages of computing attributes:
① With cache
② After the function corresponding to the calculated attribute is executed, the return value will be cached
③ The dependency remains unchanged, and multiple calls are taken from the cache
④ When the dependency value changes, the function will "automatically" re execute and cache the new value
4. Complete writing method (used when assigning values to calculated attribute variables):

computed: {
    "Attribute name": {
        set(value){  //set accepts the assigned value
        },
        get() {
            return "value"  //get to return the specific value of the calculation property
        }
    }

}

7, Listener watch: listens for changes in the value of the data/computed attribute

// Basic listening
watch: {
    "The name of the property being listened on" (newVal, oldVal){  // (current latest value, previous value)      
    }
}

//Deep listening and immediate execution
watch: {
    "Property name to listen on": {
        immediate: true, // Listen now (the web page opens and the handler executes once)
        deep: true, // Deep listening (the value of the layer inside the object changes)
        handler (newVal, oldVal) {
        }
    }
}