web applications regardless of CSS , HTML or js are parasitic in the browser, all the hardware memory are interacting with the browser, if the browser card, js optimization no matter how useless
Vue is doing the underlying optimization, and memory can deal with cache
Vue advantages:
Single-page: high efficiency, low flow rate, I / O is low, high efficiency
Virtual the DOM : page caching
Two-way data binding
Data driven: From the data, not from DOM departure
Vue installation:
https://cn.vuejs.org/
Enter the official outlets learning "course" Install "opening the development version of" directly copied down saved as js file "with a script introduced
Vue simple to use
<! DOCTYPE HTML > < HTML > < head > < Meta charset = "UTF-. 8" > < title > VUE acquaintance </ title > </ head > < body > < div ID = "App" > <! - }} {{vue variable interpolation expression -> < h1 of > {} {} h1_msg </ h1 of > < H2 > {} {} h2_msg </ H2 > </ div > </body><script src= "JS / vue.js" > </ Script > < Script > new new Vue ({ EL: ' #app ' , // mount point data: {// improved data structure for a page h1_msg mount point: 'h1 content ', h2_msg: ' H2 content ' , } }) </ Script > </ HTML >
{{H1_msg}} is equivalent to a variable,
h1_msg: 'h1 content ' is equivalent to assign values to variables
el: '# app' only id for the app label in the {} {} to be recognized as a variable
data: {} in the inside variable assignment
(Note that the write-only variable is not assigned, the front end will complain, the front page can brush out, no variable assignment does not show up, did not write the equivalent;
I do not want to error on the direct assignment '' )
Note that the definition of variables and assignment to a variable when not playing quotes, such as {{ 'h1_msg'}} , 'h1_msg': 'h1 content ' , write will not have the effect of
Vue complete a simple event (function variable)
<div ID = "App">
<h1 of V-ON: the Click = "ClickAction"> h1 of the content {{MSG}} </ h1 of>
</ div>
</ body>
<Script the src = "JS / VUE. JS "> </ Script>
<Script>
new new Vue ({
EL: '#app',
Data: {
MSG: 'VUE rendered content'
},
Methods: {// event mount point provide
clickAction: function ( ) {
Alert (123)
}
}
})
</ Script>
Vue simple operation style
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="main"> <h1>{{h1标签里的变量}}sfgsdfgsdf{{x}}{{aaaaaaaaaaa}}</h1> <h2>{{h2标签}}</h2> <h1 v-on:click= "ClickAction" v-the bind: style = "v_style" > Alert box </ h1 > </ div > # Here v_style is a variable, the variable will need to give him an assignment in the following data inside, you can give it to add more than a style, so the value of using a dictionary we can clickAction as an event (function) variable, v_style as a pattern variable </ body > < Script src = "JS / vue.js" > </ Script > < Script > new new Vue ({ EL: ' .main ' , Data: { h1 of tag variables: ' h1 of variable values ' , X:'nbsp', v_style:{ color:'red' } }, methods:{ clickAction :function () { this.v_style.color = 'green' } } }); </script> </html>
1.vue controlled by v- * label instructions
2.vue driven by a variable page
instruction
Text command
< Div ID = "App" > <-! Interpolation expression is v-text shorthand -> < P > {} {} MSG1 </ P > ## can be added to the contents inside the tag < P v-text = "msg2" > </ the p- > ## written content is invalid tag inside, such as <p> adadas <p> are not showing up in the show only <b> msg2 ** ** </ b> < the p- v -html = "msg3" > </ the p- > <! - can parse html tags -> <! - must initial value, rendering the results will never change -> < the p- v-Once = "msg3" v-on:mouseover="action">{{ msg3 }}</p> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { msg1: '**msg1**', msg2: '<b>**msg2**</b>', msg3: '<b>**msg3**</b>', }, methods: { action: function () { // var msg = this.$data.msg4; this.msg3 = '<i>**new msg3**</i>' } } }) </script>
Incident command
If there are many identical or similar variables, we can not assign one by one, we put their values into a container
< Div the above mentioned id = "App" > <-! V-ON: The event name = "function" can be abbreviated as @ event name = "function" (v-ON: => @) -> < the p- V- ON: the Click = "action1" > {{Msgs [0]}} </ P > < P @click = "Action2" > {{Msgs [. 1]}} </ P > <-! parameter passing event - -> < UL > < Li @click = "liAction (100)" > list item. 1 </ Li > <Li @click = "liAction (200 is)" > list item 2 </li > < li @click = "liAction (300)" > list item 3 </ li > </ ul > <-! objects for mouse events: direct write function name, the default mouse event object passed -> < div @click = "func1" > func1 </ div > <-! mouse event object: Once the add (), you must manually mass participation, $ event on behalf of a mouse event object -> < div @click = "func2 ($ Event, 'ABC') " > func2 </ div > </ div > </ body > <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { msgs: ['11111', '22222'] }, methods: { action1: function () { alert(this.msgs[0]) }, action2: function () { alert(this.msgs[1]) }, liAction: function (num, msg) { console.log(num, msg) }, func1: function (ev) { console.log(ev) }, func2: function (ev, msg) { console.log(ev); console.log(msg) } } }) </script>