A brief introduction to Vue filters, lifecycle functions and vue-resource

A brief introduction to Vue filters, lifecycle functions and vue-resource

1. Filter

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="vue.js"></script>
</head>
<body>
 <div id="app">
   //Replace the abc in the content of msg with 'Hello 123', and finally add '========'
  <p>{{ msg | msgFormat('Hello', '123') | test }}</p>
 </div>

 <script>
  // Define a Vue global filter named msgFormat
  Vue.filter('msgFormat', function (msg, arg, arg2) {
   // string replace method, the first parameter, in addition to writing a string, can also define a regular return msg.replace(/abc/g, arg + arg2)
  })

  Vue.filter('test', function (msg) {
   return msg + '========'
  })


  // Create a Vue instance and get the ViewModel
  var vm = new Vue({
   el: '#app',
   data: {
    msg: 'abc,abcdefg,hahaha'
   },
   methods: {}
  });
 </script>
</body>
</html>

2. Vue's life cycle function

1. What is the life cycle

From the creation, operation, to the destruction of a Vue instance, there are always various events, which are collectively called the life cycle.

2. Main life cycle function classification

1. Life cycle functions during creation:
beforeCreate: The instance has just been created in memory. At this time, the data and methods attributes have not yet been initialized.
created: The instance has been created in memory. The data and methods have been created. The template has not yet been compiled.
beforeMount: The template has been compiled but has not yet been mounted on the page
Mounted: At this point, the compiled template has been mounted to the container specified by the page for display

2. Life cycle functions during operation:
beforeUpdate: This function is executed before the state is updated. At this time, the state value in data is the latest, but the data displayed on the interface is still old because the DOM node has not yet been re-rendered.
updated: This function is called after the instance is updated. At this time, the status value in the data and the data displayed on the interface have been updated, and the interface has been re-rendered!

3. Life cycle functions during destruction:
beforeDestroy: called before the instance is destroyed. At this step, the instance is still fully usable.
destroyed: called after the Vue instance is destroyed. After the call, everything pointed to by the Vue instance will be unbound, all event listeners will be removed, and all child instances will be destroyed.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="vue.js"></script>
</head>
<body>
<div id="app">
  <input type="button" value="Modify msg" @click="msg='No'">
  <h3 id="h3">{{ msg }}</h3>
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      msg: 'ok'
    },
    methods: {
      show() {
        console.log('show method executed')
      }
    },
    beforeCreate() {
      alert('beforeCreate1')
    //this.show()
    // Note: When the beforeCreate lifecycle function is executed, the data in data and methods have not been initialized yet},
     created() { // This is the second life cycle function encountered alert('created2')
    // this.show()
    // In create, data and methods have been initialized!
    // If you want to call the methods in methods, or operate the data in data, at first, you can only operate in create},
   beforeMount() { // This is the third lifecycle function encountered, indicating that the template has been edited in memory, but the template has not yet been rendered to the page alert('beforeMount3')
    // When beforeMount is executed, the elements in the page have not been actually replaced, just some template strings written before},
   mounted() { // This is the fourth lifecycle function encountered, indicating that the template in memory has been actually mounted to the page, and the user can already see the rendered page alert('mounted4')
    // Note: mounted is the last lifecycle function during instance creation. When mounted is executed, it means that the instance has been completely created. At this time, if there is no other operation, this instance will lie quietly in our memory, motionless},

   // Next are two running events beforeUpdate() { // At this time, it means that our interface has not been updated [Has the data been updated? The data has definitely been updated.

    alert('beforeUpdate modification')

    // Conclusion: When executing beforeUpdate, the data displayed in the page is still old. At this time, the data is the latest, and the page has not yet been synchronized with the latest data},
   updated() {
    console.log('The content of the element on the interface:' + document.getElementById('h3').innerText)
    console.log('The msg data in data is:' + this.msg)
    // When the updated event is executed, the page and data are synchronized and are all up to date}
  })
</script>
</body>
</html>

3. vue-resource

GitHub address: https://github.com/pagekit/vue-resource

1. The request API of vue-resource is designed in the REST style. It provides 7 request APIs

  • get(url, [data], [options]); ****
  • head(url,[data],[options]);
  • post(url, [data], [options]); ****
  • put(url, [data], [options]);
  • patch(url, [data], [options]);
  • delete(url, [data], [options]);
  • jsonp(url, [data], [options]); ****

2. Parameter introduction

All accept three parameters:
url (string), request address. Can be overridden by the url property in the options object.

data (optional, string or object), the data to be sent, which can be overridden by the data attribute in the options object.

options object

Parameter Type Description

url string The requested URL
method string HTTP method of the request, for example: 'GET', 'POST' or other HTTP methods body Object, FormData string request body
params Object Request URL parameter object, get
headers Object request header Third-party request data requires timeout number Request timeout in milliseconds (0 means no timeout)
before function(request) The processing function before the request is sent, similar to jQuery's beforeSend function progress function(event) ProgressEvent callback processing function credentials boolean Indicates whether credentials are required for cross-domain requests emulateHTTP boolean Send PUT, PATCH, DELETE requests as HTTP POST and set the request header's X-HTTP-Method-Override
emulateJSON boolean Send the request body as application/x-www-form-urlencoded content type

3. Examples

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-resource"></script>

</head>
<body>
<div id="app">
  <input type="button" value="get request" @click="getInfo">
  <input type="button" value="post request" @click="postInfo">
  <input type="button" value="jsonp request" @click="jsonpInfo">
 </div>

 <script>
  // Create a Vue instance and get the ViewModel
  var vm = new Vue({
   el: '#app',
   data: {},
   methods: {
    getInfo() { // Initiate a get request // After initiating a get request, use .then to set the successful callback function this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) {
      // Get the successful data returned by the server through result.body // console.log(result.body)
     })
    },
    postInfo() { // Initiate a post request application/x-wwww-form-urlencoded
     // Manually initiated Post request, by default there is no form format, so some servers cannot handle it // Through the third parameter of the post method, { emulateJSON: true } sets the submitted content type to the normal form data format this.$http.post('http://vue.studyit.io/api/post', {}, { emulateJSON: true }).then(result => {
      console.log(result.body)
     })
    },
    jsonpInfo() { // Initiate JSONP request this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {
      console.log(result.body)
     })
    }
   }
  });
 </script>
</body>
</html>

The above is a brief introduction to Vue filters, lifecycle functions and vue-resource. For more information about Vue filters, lifecycle functions and vue-resource, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:
  • Detailed explanation and classic interview questions of Vue life cycle and hook functions
  • Introduction to Vue life cycle and detailed explanation of hook functions
  • Simple example of Vue life cycle and hook function
  • In-depth understanding of Vue parent-child component life cycle execution order and hook functions
  • Detailed explanation of Vue life cycle functions

<<:  Detailed explanation of template tag usage (including summary of usage in Vue)

>>:  Example of using js to natively implement year carousel selection effect

Recommend

Development details of Vue3 components

Table of contents 1. Introduction 2. Component De...

CSS3 filter code to achieve gray or black mode on web pages

front end css3,filter can not only achieve the gr...

Does MySql need to commit?

Whether MySQL needs to commit when performing ope...

A few steps to easily build a Windows SSH server

The SSH mentioned here is called Security Shell. ...

Detailed explanation of MySQL/Java server support for emoji and problem solving

This article describes the support and problem so...

Rhit efficient visualization Nginx log viewing tool

Table of contents Introduction Install Display Fi...

Migrate virtual machines between VMware Workstation and vSphere (picture and text)

1. Change the virtual machine hardware version in...

Several important MySQL variables

There are many MySQL variables, some of which are...

JS array deduplication details

Table of contents 1 Test Cases 2 JS array dedupli...

Analysis of 2 implementation methods of configuring jnid data source in Tomcatc3p0

Using c3p0 Import the c3p0jar package <!-- htt...

4 principles for clean and beautiful web design

This article will discuss these 4 principles as t...

How to implement the observer pattern in JavaScript

Table of contents Overview Application scenarios ...

Summary of commonly used tags in HTML (must read)

Content Detail Tags: <h1>~<h6>Title T...

Vue implements the question answering function

1. Request answer interface 2. Determine whether ...

A brief discussion on how to cancel requests and prevent duplicate requests in axios

Table of contents Preface Core - CancelToken Prac...