Be careful : Local json Documents must be placed in static Below directory , Before reading or interacting with data , Please install first. vue-resource. Click to go to   -->vue-resource Chinese document )

One 、Vue Read local JSON data

 created() {
this.$http.get("/static/data.json").then(
response => {
this.data = response.data;
},
response => {
console.log(response);
}
);
},

Two 、Vue Interact with background data

 this.$http.get("url").then(
response => {
this.data = response.data;
},
response => {
console.log(" Acquisition failure !");
}
);

Vue More articles on data interaction

  1. 11.vue Data interaction

    vue new Vue({ el, Selectors string/obj It is not possible to select html/body data, methods, template string/obj // Life cycle -- fictitious DOM 1. first ...

  2. webpack+vue Project practice ( Four , The data interaction between the front end and the back end and the data presentation by the front end )

    Address :https://segmentfault.com/a/1190000010063757 1. Preface What we're going to do today , It's based on the last article , Develop the function page . To put it simply , It's how to interact with the data in the back end ...

  3. vue Data interaction between front and back stations vue-resource file

    Address :https://segmentfault.com/a/1190000007087934 Vue You can build an application that doesn't rely on back-end services at all , At the same time, it can also interact with the server to synchronize the dynamic update of the interface . Vue through ...

  4. vue Data monitoring and data interaction in

    Now let's see vue Data listening events in $watch, js Code : new Vue({ el:"#div", data:{ arr:[,,] } }).$watch("ar ...

  5. Commonly used vue Request interactive data mode

    several vue The form of data interaction var that=this get request that.$http.get("1.txt").then(function(result){ console.l ...

  6. Vue Data interaction between independent components in

    Data interaction between independent components : By customizing events Components A Medium [ data ], Pass it to the component B 1. Create components A, Components B 2. Components B Start listening for events when the instance is created [ Waiting to receive data ]: hook 3. Components A Trigger event , send data Be careful : Pick up ...

  7. Vue frame ( Two )——Vue Instructions (v-once Instructions 、v-cloak Instructions 、 Conditional instruction 、v-pre Instructions 、 Cyclic instruction )、todolist Case study 、Vue example ( Calculation 、 monitor )、 Components 、 Component data interaction

    Vue Instructions 1.v-once Instructions   Use alone , Once the content of the restricted tag is assigned , You can't change it passively ( If it's an input box , You can take the initiative to modify ) <!DOCTYPE html> <html lang=" ...

  8. vue, Along the way (3)-- Data interaction vue-resource

    After all the static page layout is finished , The most important thing is data interaction , Simply speaking ,vue-resource It's like jquery Inside $.ajax, Used to interact with the background data . Put it in created or ready To get or update data . No ...

  9. vue The problem of data interaction between front end and back end is solved

    First in vue Configure the routing component in the project Then write the corresponding components 2 Back end Write interface and route Third   Solving cross domain problems Dealing with data interaction So the front end gets the data

Random recommendation

  1. Array method Array.map();Array.every() and Array.some(); Array of indexof(); Check if it's an array isArray(obj);

    Array method Array.map(); chestnuts : var a=[1,2,,3]; var b=a.map( function(value){return value*value} ); alert(b); ...

  2. Maven Learning summary ( 8、 ... and )—— Use Maven Build a multi module project

    In normal times Javaweb In the development of the project, for the convenience of later maintenance , We usually develop in layers , The most common is divided into domain( Domain model layer ).dao( Database access layer ).service( Business logic layer ).web( The presentation layer ), In this way, it can be layered ...

  3. CSRF Attack principle and defense method

    1. CSRF Attack principle CSRF(Cross site request forgery), I.e., cross-site request forgery . We know XSS It's a cross site scripting attack , Is to execute the attacker's script in the user's browser , To get it cookie Etc ...

  4. Android Development of MD5 encryption

    String MD5 encryption , Returns the encrypted string public static String encode(String password) { try { StringBuffer sb = new Str ...

  5. The application of media query and in css3 Change in the world

    CSS It's always supported to set up style sheets associated with media . They can adapt to different media types of display . for example , The document is displayed on the screen using sans-serif typeface , When printing, use serif typeface .screen and print There are two predefined media classes ...

  6. T4 Templates automatically generate annotated entity class files

    T4 Templates automatically generate annotated entity class files - Just one SqlSugar.dll Generating entities is that simple , Just build one T4 Document and Put one in the folder DLL. Use T4 Template tutorial step 1 establish T4 Templates If you don't ...

  7. Chromium Graphics Update in 2014( slide )

    Original article , Reprint please indicate as link original source for http://blog.csdn.net/hongbomin/article/details/40897433. Abstract :Chromium The graphics stack is 2014 There are many changes in the year ...

  8. Think about a question about Lambda Expression as linq The question of conditions

    There's a set like this List<User> users = new List<User> { new User{Name = "1",Aget = 12}, ne ...

  9. Spring Source sentiment edification - Custom node resolution

    This article continues the previous article Spring Source sentiment edification -DefaultBeanDefinitionDocumentReader#parseBeanDefinitions, I've opened up a new field to chew this interesting bone Custom section ...

  10. windows Installation under system tomcat And configuration

    1. Install the test 1. install It is recommended to use the installation free version of Tomcat( Put it in a directory without Chinese and spaces ), The premise is that JDK And configured environment variables . 2. test double-click startup.bat, Browser input url:localhos ...