Vue ----------- understand, show json data

Vue.js frame is a gradual build user interface.

advantage:

Frame difference is large and a bottom-up design of the incremental development,

Only focus on the view layer, it is not only easy to use but also easy to integrate third-party libraries or existing project

When used in conjunction with modern tools and various libraries chain, fully able to provide drivers for complex one-page application

The core Vue.js that allows the use of a simple declarative syntax template to render data into the DOM system

Use vue display json object data

Features: declarative rendering, using the need to instantiate

It seemed that this rendered with a string template is very similar, but a lot of work behind the Vue.

Now data and DOM association has been established, everything is responsive when you open your browser's JavaScript console (opens in this page),

And modify the value of the message, you will see the example updated accordingly.

The browser

Use js way to show data in json objects

The browser

With js or jQuery What are the advantages compared to

js jquery need or manner of HTML DOM, displays the data on

If Vue, need only provide data, and id data binding element, it is not required to display the operation HTMl DOM,

Code:

<! DOCTYPE HTML > 
< HTML > 
< head lang = "EN" > 
    < Meta charset = "UTF-. 8" > 
    < title > VUE Learning </ title > 
    <-! Introduced VUE -> 
    < Script the src = "HTTP : //www.obge.top/js/vue/v2.5.16/vue.min.js " >  </ Script > 
</ head > 
< body > 
<-! prepare a box -> 
< div ID ="d1" style="border: solid"> 
    <! - acquiring directly by two braces Name attribute. -> 
    < P > {} {} obge.name </ P > 
    < h1 of style = "Color: Brown" > {} {obge.age } </ h1 of > 
</ div > 
<-! Vue.js using a template-based grammar of HTML allows developers to declaratively Vue DOM instance bound to the underlying data. 
     When re-rendering state changes components, used in the DOM 
-> 
< Script > 
    // prepare a target json 
    var obge = { " name " : " Joe " , ": 17 }
     // the associated data corresponding to the view it and by vue.js 
    // Each Vue applications require realization by instantiating Vue 
    var VM =  new new Vue ({
         // Get attention has a distal element id # 
        EL: ' # D1 ' , 
        Data: { 
            // association json Object 
            Message: obge 
        } 
    }) 
</ Script > 


<! - <Script> -> 
    <! - // prepare a json Object -> 
    <! - var obge = { "name": " Zhou Yu", "Age": 12 is}; -> 
    ! <- // Get the cassette ID -> 
    <-!document.getElementById DIV1 = var ( "D1"); -> 
    ! <- // display the data inside the box -> 
    <-! div1.innerHTML = obge.name; -> 
! <- </ Script> -> 

</ body > 
</ HTML >

Vue ----------- understand, show json data

Guess you like