filter

  Used in interpolation expressions and v-bind attribute binding instructions.

<p>{{ msg | msgFormate }}</p>

<p :id="msg | msgFormate"></p>

‘|’   -- Pipe character, used to split characters and filters

1. Filters must be declared before use.
2. The filter declared in the vue object is private because other vue objects cannot be accessed. If you want to use it, you must declare it as a common filter.

  Vue.filter('name of method ', (MSG) = > {})

·The first parameter is the function name, and the second parameter is the filter function

     3. The filter in the vue object must be written in the filter attribute of vue. It is essentially a function and must have a return value.

    4. Multiple filters can exist at the same time, and the returned results will be passed to the next one.

    5. If the filter needs to pass parameters, the parameters received by the formal parameters start from the second, because the first position is fixed to the string in front of the pipe character.

Listener

The function is to listen for data changes and facilitate the operation of data changes.

1. To use a listener, you must add a listening function or listening object under the watch node in the vue object instance.

 <div id="app">
    <input v-model:model="msg">
  </div>
  
  <script src="./lib/vue-2.6.12.js"></script>
  <script>

    const vm = new Vue({
      el: "#app",
      data: {
          msg: "wdf12121aaa"
      },
      filters: {
       
      },
      watch: {
        /* Listener function */
        // msg(newVal, oldVal) {
        //   console.log(newVal + ": " + oldVal)
        // }
        /* Listener object */
        msg: {
          handler(newVal, oldVal) {
            console.log(newVal + ": " + oldVal)
          }
        }
      }
    })
   
  </script>

2.

Method format listener

Disadvantages: it cannot be executed automatically when you first enter the page; If you listen to an object, the property value of the object changes and cannot be listened to.

Benefits: simplicity.

Object format listener

Benefits: you can use immediate to automatically trigger once when entering the page; You can use deep to listen for changes in object properties.

  <div id="app">
    <input v-model:value="data.username">
  </div>
  
  <script src="./lib/vue-2.6.12.js"></script>
  <script>

    const vm = new Vue({
      el: "#app",
      data: {
          data: {
            username: "1"
          }
      },
      filters: {
       
      },
      watch: {
        /* Listener function */
        // msg(newVal, oldVal) {
        //   console.log(newVal + ": " + oldVal)
        // }
        /* Properties in listener object */
        // "data.username"(newVal, oldVal) {
        //   console.log(newVal + ": " + oldVal)
        // }
        /* Listening object, which can be triggered if the property value changes */
        // data: {
        //   handler(newVal, oldVal) {
        //     console.log(newVal + ": " + oldVal)
        //   },
        //   //Execute now
        //   // immediate:true,
        //   //Whether to listen for property value changes
        //   deep:true
        // }
        }
    })
   
  </script>

  Note: v-bind is followed by a js expression

Calculation properties  

  Is the attribute value obtained through a series of calculations. The function is to improve code reusability. The calculated attribute must be placed under the calculated node. It is defined as a method and used as a common attribute.

 

<div id="app">
      r:<input type="text" v-model:value="r">
      g:<input type="text" v-model:value="g">
      b:<input type="text" v-model:value="b">
      <div :style="{backgroundColor: rgb}"></div>
      <p>{{rgb}}</p>
  </div>
  
  <script src="./lib/vue-2.6.12.js"></script>
  <script>

    const vm = new Vue({
      el: "#app",
      data: {
          r: 0,
          g: 0,
          b: 0
      },
      filters: {
       
      },
      watch: {

      },
      computed: {
        rgb() {
          return `rgb(${this.r}, ${this.g}, ${this.b})`
        }
      }
    })
   
  </script>

axios

  Is a library focused on requesting network data

 

  <script src="./lib/axios.js"></script>
  <script>
      /* GET request */
      /* The returned res is a Promise object. We need then parsing to get the objects inside */
      const res = axios({
        method: "GET",
        url: 'http://www.liulongbin.top:3006/api/getbooks',
        params: {

        }
      })
      /* data The data in is not the real data returned by the interface. It is wrapped in a shell. Currently, there are six returned data
      *  config: {}  
      *  data: {} data The data inside is the real data we need to get
      *  headers: {}
      *  request: {}
      *  status
      *  statusText
      */
      res.then((data)=>{
        console.log(data)
      })


      /* POST request */
      const result = axios({
        method: "POST",
        url: 'http://www.liulongbin.top:3006/api/post',
        data: {
          name: 'zs',
          age: 20
        }
      })
      result.then((data)=>{
        console.log(data)
      })
  </script>

We can get an axios object by booting the axios library. The data obtained directly using axios is a promise data. If we want to get real data, then parsing is very troublesome. At this time, we can use await and async.

  <button id="post">click me!</button>

  <script src="./lib/axios.js"></script>
  <script>
      document.querySelector("#post").addEventListener("click", async ()=> {
        const res = await axios({
          methods: "POST",
          url: "",
          data: {
            
          }
        })
      })
  </script>

You can also use axios.get and axios.post to request data directly. Note that the second parameter of post does not need to add the data attribute value.

 

 document.querySelector("#post").addEventListener("click", async ()=> {
        axios.get('url',{
          param:{}}
        )

        axios.post('url', {
          
        })
      })

Another point is that it is very troublesome for us to obtain internal data through data.data.data. Therefore, we can directly obtain the data we want through structural analysis.

 

 document.querySelector("#post").addEventListener("click", async ()=> {
        // data is renamed res
        const { data: res } = await axios({
          method: 'POST', 
          url: 'http://www.liulongbin.top:3006/api/post',
          data: {
            name: 'zs',
            age: 20
          }
        })
        console.log(res)
      })