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 >