Brief introduction to Vue filter life cycle function and vue resource
- 2021-10-16 01:07:01
- OfStack
Step 1 Filter
Use example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
// Put msg Of the content of abc Replace with ' How do you do 123' And finally add the '========'
<p>{{ msg | msgFormat(' How do you do ', '123') | test }}</p>
</div>
<script>
// Definition 1 A Vue The global filter is called msgFormat
Vue.filter('msgFormat', function (msg, arg, arg2) {
// String replace Method, section 1 Parameters, except those that can be written 1 A String, you can also define 1 A regular
return msg.replace(/abc/g, arg + arg2)
})
Vue.filter('test', function (msg) {
return msg + '========'
})
// Create Vue Example, get the ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: 'abc,abcdefg, Ha ha ha '
},
methods: {}
});
</script>
</body>
</html>
2. Life cycle function of vue
1. What is the life cycle
Vue instances are always accompanied by a variety of events from creation, running, and destruction. These events are collectively referred to as lifecycle
2. Classification of main life cycle functions
1. Life cycle function during creation:
beforeCreate: The instance has just been created in memory, and the data and methods properties have not been initialized
created: The instance has created OK in memory, data and methods have created OK, and the template has not yet been compiled
beforeMount: At this point, the template has been compiled, but it has not been mounted into the page
mounted: At this point, the compiled template has been mounted into the container specified by the page for display
2. Life cycle function during operation:
beforeUpdate: Perform this function before the status update, when the status value in data is up to date, but the data displayed on the interface is still old, because the re-rendering of the DOM node has not yet started
updated: This function is called after the instance is updated. At this time, the status values in data and the data displayed on the interface have been updated and the interface has been rendered again!
3. Life cycle function during destruction:
beforeDestroy: Called before the instance is destroyed. In this step 1, the instance is still fully available.
destroyed: Called after the Vue instance is destroyed. When invoked, everything indicated by the Vue instance is unbound, all event listeners are removed, and all child instances are destroyed.
Use 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(' Executed show Method ')
}
},
beforeCreate() {
alert('beforeCreate1')
//this.show()
// Note: In beforeCreate When the life cycle function is executed, data And methods In The data hasn't been initialized yet
},
created() { // This is the first time encountered 2 Life cycle function
alert('created2')
// this.show()
// In created In, data And methods It has been initialized!
// If you want to call methods Method in, or action data The data in, at the earliest, can only be found in created Operation in
},
beforeMount() { // This is the first time encountered 3 A life cycle function representing The template has been edited in memory, but it has not been put Template rendering to In the page
alert('beforeMount3')
// In beforeMount At the time of execution, the elements in the page have not been really replaced, just written before 1 Some template strings
},
mounted() { // This is the first time encountered 4 Life cycle function, indicating that the template in memory has been actually mounted on the page, and the user can already see the rendered page
alert('mounted4')
// Note: mounted Yes At the end of the instance creation period 1 Life cycle function, when executed mounted It means that the instance has been completely created. At this time, if there is no other operation, the instance will be quiet Lying in our memory, 1 Moving
},
// The following are two events in operation
beforeUpdate() { // At this time, it means Our interface hasn't been updated yet. "Has the data been updated? The data has definitely been updated. "
alert('beforeUpdate Modify ')
// Conclude that: When executing beforeUpdate When the data displayed in the page is still old, at this time, data The data is up-to-date, the page has not yet been and The latest data is kept in sync
},
updated() {
console.log(' Contents of elements on the interface: ' + document.getElementById('h3').innerText)
console.log('data In msg The data are: ' + this.msg)
// updated Event is executed, the page and the data The data has been synchronized and is up to date
}
})
</script>
</body>
</html>
3. vue-resource
github Address: https://github.com/pagekit/vue-resource
1. The request of vue-resource api is designed according to the style of rest, which provides seven kinds of request api
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
They all accept three parameters:
url (string), the request address. Can be overridden by the url attribute in the options object.
data (optional, string or object), the data to be sent, can be overwritten by the data property in the options object.
options object
Parameter type description
url string Requested URL
method string Requested HTTP Method, such as: 'GET', 'POST' Or other HTTP Method
body Object, FormData string request body
params Object Requested URL Parameter object , get
headers Object request header No. 1 3 The party request data needs to be used
timeout number Request timeout in milliseconds (0 Indicates no timeout )
before function(request) The handler before the request is sent, similar to the jQuery Adj. beforeSend Function
progress function(event) ProgressEvent Callback handler
credentials boolean Indicates whether credentials are required for cross-domain requests
emulateHTTP boolean Send PUT, PATCH, DELETE When requested with HTTP POST And set the request header X-HTTP-Method-Override
emulateJSON boolean Will request body With application/x-www-form-urlencoded content type Send 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 Vue Example, get the ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {
getInfo() { // Initiate get Request
// When initiating get After the request, Pass .then To set the successful callback function
this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) {
// Pass result.body Get the successful data returned by the server
// console.log(result.body)
})
},
postInfo() { // Initiate post Request application/x-wwww-form-urlencoded
// Manually initiated Post Request has no form format by default, so some servers can't handle it
// Pass post The first of the method 3 Parameters, { emulateJSON: true } Settings Submitted content type For Common 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>
These are the details of the Vue filter, life cycle function and vue-resource. For more information on Vue filter, life cycle function and vue-resource, please pay attention to other related articles on this site!