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

Vue implements a simple shopping cart example

This article example shares the specific code of ...

Detailed explanation of MySQL database--multi-table query--inner join, outer join, subquery, correlated subquery

Multi-table query Use a single select statement t...

HTML realizes real-time monitoring function of Hikvision camera

Recently the company has arranged to do some CCFA...

JavaScript+HTML to implement student information management system

Table of contents 1. Introduction 2. Rendering 3....

How to use Gitlab-ci to continuously deploy to remote machines (detailed tutorial)

Long story short, today we will talk about using ...

Vue implements the product tab of the product details page function

This article example shares the specific code of ...

How to install Oracle on Windows Server 2016

1. Install Oracle There are too many Oracle insta...

How to build SFTP server and image server on Linux cloud server

First of all, you can understand the difference b...

JavaScript to achieve magnifying glass effect

This article shares the specific code for JavaScr...

How to test the maximum number of TCP connections in Linux

Preface There is a misunderstanding about the max...

Detailed description of the function of meta name="" content="

1. Grammar: <meta name="name" content...

How to implement parent-child component communication with Vue

Table of contents 1. Relationship between parent ...

Completely uninstall mysql. Personal test!

Cleanly uninstall MySQL. Personally tested, this ...

Implementation of CSS3 3D cool cube transformation animation

I love coding, it makes me happy! Hello everyone,...

Introduction to MySQL database performance optimization

Table of contents Why optimize? ? Where to start?...