vue Study Notes 1: el and data

 

A, vue Introduction

vue is one of the three major framework (React, Angular, Vue)

vue Features:

• Easy to use
• flexible
• Efficient

vue official website: official website link

Second, knowledge

vue instance option: EL

Note: You can not let el directly manage html or body, will complain

• Action: Specifies the current view of the management instance vue

• Found: id may be a selector, other selectors, DOM elements (# div1, .div1 etc.)

vue instance option: the Data

• Action: Specifies the current data managed instance vue view to be used

• Value: it can be an object

• Access methods: instance of an object attribute name

• Features: responsive data (data changed in the Data View layer will automatically vary)

Third, the layer is rendered views of the data js

1. Introduced vue.js

<script src="../js/vue.js"></script>

 

2. In view of the establishment of a div

<div id="div1">   
   <p></p>
</div>

3. js code

new new Vue ({ 
  EL: '# DIV1',    // bind view layer id 
  Data: { 
   MSG: 'the Hello, VUE'   // Render view layer 
  } 
 })

 

4. Binding data

< P > {} {} msg </ P > <-! Binding data js in msg ->

 

5. Run shot
   
6. The complete code

< Body > 
  < div ID = "DIV1" > <-! View of a new layer of div -> 
   < P > {{MSG}} </ P > <-! Binding data -> 
  </ div > 
  
  < Script > 
   new new Vue ({ 
     EL: ' # DIV1 ' ,    // bind view layer id 
     data: { 
      MSG: ' the Hello, VUE '   // render view layer 
     } 
    }) 
  </ Script > 
 </body>