Xpress front-end record --------- vuejs based learning 1.0

View

Father front end -vuejs- Zhiyouyuxi

Vue official website address : https://cn.vuejs.org/

 

Google chrome browser plug-in installation of vuejs devtools   

References: https: //www.cnblogs.com/alice-fee/p/8038367.html

 

How to get started quickly vuejs it?

1. html page introduction vuejs 
　　npm install VUE download package

// first embodiment npm package management incorporated 
<Script type = "text / JavaScript" the src = "./ the node_modules / VUE / dist / vue.js"> </ Script> 
<-! Presence downloaded packages using npm 1 . src directory (soruce), generally the source directory, can not be directly used, you need to compile 2. dist directory, the file directory of the storage that can be used to compile this is. dist (distaination destination 2. distribution distribution, release) -> // The second way to download files introduced js 
<script type = "text / javascript " src = "js / vue.js"> </ script>

 

2. Define a vuejs area management (syntax vuejs provided by operating vuejs no DOM) 
   Note: The management area that white is a DOM area, but can not be html or body region

    <! - app called regional or general management Box -> 
    <! - V View -> 
    <div ID = "app"> 
        <! - This area management vuejs vuejs specific code written instructions interpolation expression - -> 
        <H2> {{}} title </ H2> 
        <HR> 
        <P> {} {} the infos </ P> 
        <-! now view showing data -> 
        <HR> 
        <-! embodiment two : view -> - model 
        <INPUT type = "text" = V-model "username"> 
        <HR> 
        <- way:! model view -> 
        <P> {{}} username </ P> 
    < / div>     
    <div> 
        H2> not vuejs management area <</ H2> 
        <P> {{}} username </ P> 
    </div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    // vuejs MVVM is a frame 
    // M V Model VM on behalf of the representative view ViewModel Vuejs provide 
    // Model Model 
    var obj = {
         // inside view interpolation expression is written inside Model properties directly, commonly called model variables 
        title: 'title' , 
        the infos: 'information' , 
        username: 'default userName' 
    }; 

    // the VM the controller 
    var VM = new new Vue ({ 
        EL: '#app', // the value is css selector, ID selector 
        data: obj , // representation and generating Model relation 
    }); // accepts parameters: Object 1. el (element) 2. data attribute
    console.log( vm );

</script>

3. vuejs code calls 
    Note: When the exposed introduced vuejs a global constructor Vue

 

Case implement: Enter the number calculated

< Body > 

    <-! 2. vuejs management area defined -> 
    < div ID = "Box" > 
        < P > Shipment: 10 yuan per kg </ P > 
        weight: < INPUT type = "Number" ID = "Number " V-Model =" Number " > KG < br > 
        Total: < B ID =" Total " > {{10}} * Number </ B > 
    </ div > 

</body>

 

// first native achieved: 
<Script type = "text / JavaScript"> // 1. DOM event listener operation 
    $ ( "# Number") keyUp (. Function () {
         // 2. DOM service logic operation var Number the parseInt = ($ ( the this ) .val ());
         // this.value; // var Total Number * = 10 ;
         // 3. DOM manipulation or 
        $ ( "Total #" ) .html (Total); 
    }) </ Script> // second: Vuejs-free operation of the DOM 
<Script type = "text / JavaScript"> used to code vuejs new new Vue ({ 
        EL: '#box' ,
            number:
    
        
        



   
    
        data: {0,
        }
    })
</script>

 

 

vuejs learning model

1 shows basic types of data string number boolean undefined null

HTML section:
  <div ID = "Box"> 
    <P> {{string1}} </ P> 
    <P> {{number1}} </ P> 
    <P> {{boolean1}} </ P> 
    <P> unkown1} {} {</ P> 
    </ div> 
Javascript part: new new Vue ({ 
        EL: '#box' ,
         // be appreciated that such data is the model         data: {
             // data attributes which commonly called model variables may be in view of which call // 1. the basic data types 
            string1: 'Hi vuejs Lorem' , 
            number1: 13 is , 
            boolean1: to false , 
            unkown1: undefined,
            unkown2: null




            
    }        
});

 

2 shows a complex data type (data type reference) Object Array 

 vuejs provided a template grammar engine, called the interpolation expression {{ 'interpolation expression'}}

Interpolation expression which you can write anything? Expression: 1. 2. The model variables can be some of the simple syntax trinocular js string splicing

 

Display complex data types

1. Obtain a single value 2. traversal for () loop to provide a similar beginning vuejs v something called instruction

 Array type:

HTML section:
 < div ID = "Box" > 
first take a single value: 
     < P > {} {} array1 </ P > 
    < P > {{array1 [0]}} </ P > 
    < P > {{ array1 [. 1]}} </ P > 

The second traverse: and remove the standard value

<ul> 
    <-! for (var attr in obj) for ... in traversing the object's properties, but can vuejs v-for grammar through the array objects -> 
    <li v-for = "(ELE, index) in array1 "> subscript: {{index}}, value: {} {} ELE </ Li> 
</ UL>

</div>

Javascript部分：
<script type="text/javascript">
    new Vue({
        el: '#box',
        data: {
          array1: [12, 23, 34, 45]
       }
  }）；

</script>

Object Object:

HTML section:
 < div ID = "Box" > 
take a single value:

<p>{{ obj1['name'] }}</p>

And takes a value index
     < UL >

<Li v-for = "(value, attr, index) in obj1"> Attribute Name: {{attr}} attribute values: {{value}} subscript: {{index}} </ li>

    </ul>
 </div> 


Javascript部分：

 <script type="text/javascript"> 

new Vue({
 el: '#box',
 data: { 
      obj1: { 
         id: 1, name: 'andy',
          address: 'shenzhenshi' 
      } 
     }）；
 </script>

Array Object type:

HTML section:
 < div ID = "Box" > 
     < UL V-for = "ELE in objArray" > 
        < Li > ID: ele.id {{}} </ Li > 
        < Li > Username: {{ele.name }} </ Li > 
        < Li > address: ele.address {{}} </ Li > 
    </ UL > 
</ div > 

part Javascript: 

< Script type = "text / JavaScript" > 
    new new Vue ({ 
            EL:'#box',
        data: {
             objArray: [
                {id: 12, name: 'lilei', address: 'shenzhen'},
                {id: 23, name: 'mark', address: 'guangzhoushi'}
            ]}；
        }）
        </script>

Note: The above are cited vue.js

 

 

 

1. What is the command?

Directive as attribute of the element with the emergence of html expanded the original property name id class.

for (var attr in obj) for ... in traverse the object attributes, but vuejs can iterate v-for grammatical objects 
e.g.

<li v-for="(ele,index) in array1">下标：{{ index }}， 值：{{ ele }}</li>

<Li v-for = "(value, attr, index) in obj1"> Attribute Name: {{attr}} attribute values: {{value}} subscript: {{index}} </ li>

 

Interpolation expression which in the end could write those things?

1. model variables

2. Conditional Expressions

3. The four operations + - * /

4. The logical operations && ||!

5. js special operations, +

6. literal -

7. Self-defined global functions can not use

8. ECMAScript defined functions Math.random ()

9. not write the statement