A filter
Use examples:
<! DOCTYPE HTML > < HTML lang = "EN" > < head > < Meta charset = "UTF-. 8" > < title > the Title </ title > < Script the src = "vue.js" > </ Script > </ head > < body > < div ID = "App" > // abc replace the contents into msg 'Hello 123', and finally add the '========' < P >{{Msg | msgFormat ( 'Hello', '123') | Test}} </ P> </ Div > < Script > // define a global Vue filter, called msgFormat Vue.filter ( ' msgFormat ' , function (MSG, Arg, arg2) { // Replace string method, the first parameter , in addition to write a string, you can also define a regular return msg.replace ( / ABC / G, Arg + arg2) }) Vue.filter ( ' Test ' , function (MSG) { return MSG + ' == ====== ' }) //Create Vue instance, to give the ViewModel var VM = new new Vue ({ EL: ' #app ' , Data: { MSG: ' ABC, ABCDEFG, ha ' }, Methods: {} }); </ Script > </ body > </ HTML >
Two, vue life cycle functions
1. What is the life cycle
Created from Vue instance, to run, to destroy the period, always accompanied by a variety of events, which, collectively referred to as life cycle
2, the main function of the life cycle of classification
1, during the life cycle of creation functions:
beforeCreate: instance is created in memory just came out, this time, there is no good data initialization methods and properties
created: OK instance has been created in memory, this time data and methods have been created OK, this time has not yet begun to compile a template
beforeMount: At this point it has been compiled template, but have not mounted to the page
mounted: At this point, has compiled template, mounted to the page specified container display
2, during the life cycle of the run function:
beforeUpdate: This function is executed before a status update, this time in the state value data is up to date, but the data displayed on the screen or old, because at this time has not yet begun to re-render DOM node
updated: This function is called after the update is completed instance, data is displayed on the data values in the state and interfaces, have completed the update, the interface has been re-rendered good!
3, during the life cycle of destruction function:
beforeDestroy: called before destroy instance. In this step, the instance is still fully available.
destroyed: Vue instance called after the destruction. After the call, everything will de-binding indication Vue instance, all event listeners will be removed, all the child instance will be destroyed.
Use examples:
<!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="修改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方法') } }, beforeCreate() { alert('beforeCreate1' ) // this.Show () // Note: When the function execution beforeCreate life cycle, the data DATA and methods are not yet initialized }, Created () { // second life which is encountered periodic function Alert ( ' created2 ' ) // this.Show () // in created in, data and methods have been initialized good! // If you want to invoke a method of methods, data or operational data in the earliest, can only operate in created in }, beforeMount () { // This is the third encounter of the life cycle of functions, represents a template already in memory the editing is complete, but not yet put into the page template rendering Alert ( ' beforeMount3 ' ) //When beforeMount performed, page elements, but also not really replaced over, just before writing some template string }, Mounted () { // This is the fourth encounter life-cycle function, said memory the template has been mounted to the real page, the user can already see the rendered page of the Alert ( ' mounted4 ' ) // Note: mounted last a life-cycle function during instance creation, when executing the mounted says examples have been completely created, this time, if no other operations, then this instance, it is lying quietly in our memory, motionless } // the next two events are running beforeUpdate ( ) { // this time, express our interface has not been updated [data is updated yet? Data must have been updated] Alert ( ' beforeUpdate modified ' ) // concluded: beforeUpdate when executed, the data displayed on the page, or old, at this time the data is the latest data, and the latest data pages yet sync }, Updated () { the console.log ( ' content interface element: ' + document.getElementById ( ' H3 ' ) .innerText) the console.log ( ' Data in data msg: ' + the this a .msg) // when the updated event execution, page data and the data has been synchronized, are the latest } }) </ Script > </ body > </ HTML >
Three, vue-resource
github address: https: //github.com/pagekit/vue-resource
1, vue-resource request in accordance with the api rest style, which provides seven requests 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, parameters introduced
Accepts three parameters are:
URL (string), the request address. Url property options may be covered object.
data (Alternatively, string or object) data to be transmitted, the data property options may be covered object.
options object
Parameter Type Description
URL url string request
method string HTTP request methods, for example: 'GET', 'POST' or other HTTP methods
body Object, the FormData body Request String
the URL parameter params Object Object request, GET
headers Object Request header data to a third party requests used
timeout number unit request time is milliseconds (0 for no timeout)
before function (request) before sending the request handler, a function similar to the jQuery beforeSend
progress function (event) ProgressEvent callback handler
credentials boolean represent cross- when requested credentials need to use
emulateHTTP boolean transmission PUT, PATCH, when the DELETE request is sent to the HTTP POST mode, and set the X-HTTP-Method-Override request header
emulateJSON boolean sent in the request body 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请求" @click="getInfo"> <input type="button" value="post请求" @click="postInfo"> <input type="button" value="jsonp请求" @click="jsonpInfo"> </div> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: {initiate get request// getInfo () { // after initiation get request, to set a successful callback function .then the this . http.get $ ( ' http://vue.studyit.io/api/getlunbo ' ). the then ( function (Result) { // successful data returned by the server to get through result.body // the console.log (result.body) }) }, postinfo () { // initiate post requests application / x-wwww- -urlencoded form // manually initiated Post request form is not the default format, so that the server can not handle some // third parameter post method, {emulateJSON: true} filed set the content type form common data format this . $ http.post ( ' http://vue.studyit.io/api/post ' , {}, {emulateJSON: to true }).then(result => { console.log(result.body) }) }, jsonpInfo() { // 发起JSONP 请求 this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => { console.log(result.body) }) } } }); </script> </body> </html>