1. V-model form modifier

  • .lazyThe modifier
<input type="text" v-model.lazy="mytext" />
//js
data: {
  mytext: ""
}
Copy the code

The lazy modifier acts like lazy loading, limiting the V-Model’s diligent two-way data binding and real-time updates so that form elements can be updated the last time they lose focus, saving browser resources.

  • .numberThe modifier
<input type="text" v-model.number="mynumber" />
//js
data: {
  mytext: "".mynumber: 0,}Copy the code

The. Number modifier is used to monitor whether the variable element input is a number. If the variable element input is not a number, the real-time display function of the V-Model bidirectional binding will be lost.

  • .trimThe modifier
<input type="text" v-model.trim="myusername" />
//js
data: {
  mytext: "".mynumber: 0.myusername: ""
}
Copy the code

The. Trim modifier detects the presence of whitespace in the user-entered data pool of a form element and automatically removes whitespace if it does exist.

2. Vue’s asynchronous fetch

Because XMLHttpRequest is a poorly designed API, it is very confusing to configure and invoke, and the time-based asynchronous model is not friendly to write or compatible.

// Basic syntax
fetch("Url request address").then(res= >res.json).then(res= >{
  console.log(res);
})
Copy the code

Use the FETCH data request mode in VUE.

fetch("./hh.json").then(res= >{
    return res.json();
  }).then(res= >{
    console.log(res)
})
Copy the code

The above is the method of using the request data of fetch, similar to Promise and Axios, but there are differences between them. If you are interested, you can check the correlation and difference between them.

3, Vue’s asynchronous request weapon axios-get request

Axios, a promise-based wrapper around Ajax, is a solution to asynchronous requests. The front-end MVVM architecture was not very friendly to use with $Ajax, and native Ajax was very cumbersome to use, so axiOS was born and accepted by most people. Here’s a simple axios example to try.

//1. Prepare a local JSON file and write the JSON data. This step is to forge the request address.
{
  "status": 1111."data": {{1 / / data
    },
    {
      2 / / data
    },
    {
      3 / / data}}}//2. Js uses axios to make data requests. First introduce the axios library and then write the request code
axios.get("Json data request URL").then(res= >{
  console.log("Request successful, place of execution!");
  console.log(res.data);// Axios wraps the data attribute automatically, requiring res.data to fetch the data
}).catch(err= >{
  console.log("The place where requests fail!");
  console.log(err);
})
//3. You can assign the requested data to your own variable, which is then li in HTML
// Perform traversal to display the requested data content
let vm = new Vue({
  el: "#main".data: {
    datalist: []},methods: {
    handleoninfo(){
      // The request for axios data here is equivalent to defining an event when the button is clicked
      // A data request is triggered
      axios.get('URL requested address').then(res= >{
        // Here is the content of the successful callback function in then
        return res.data;
        //res is the data returned after a successful request, but AXIos stores the real data in JSON in
        // We need to get the data we want in json from res.data.
      }).catch(err= >{
        console.log(err);
        // The error message is stored in the err variable
        // Print it out for query}}}})//htnl
<input type="button" @click="handleoninfo()" />
<ul>
  <li v-for="item in datalist">{{item.info.name}} // Displays the value of the name attribute in the info variable in the requested data</li>
</ul>
Copy the code