vue 기본 1:

    ：
1，vue  
    1，vue  ：
    2，vue    ：
    3，    -  （data）
    4，    —    filters,
        ：
    5，    
    6.    ：
    7，    
    8.          
    9，    （       ）
    
    
1,vue  
      html+css+js  。    js  jq       
      |     | vue  
2，drf  
    Django   ，                  
          |       |   ，  ，  ，  |   ，  ，  
3，    
       vue  ，    drf         
    Git|       | celery    


    1，vue  ：
        vue   ：
            vue     ，        ：Angular、React、Vue
            # vue js     
            #       ，    vue           ：       ，        ，         
        vue   ：
                         ，    ，    ，    ，    ，MVVM    、     、     
       vue   ：
           vue  ：     cdn  
           1，    （  vue）
               
           2，cdn  
                

    2，vue    ：
        1，    —   （      HTML      ）
            1，vue     ：          
            2、vue     ：  、cdn
            3、vue     ：   、  API、    、    、MVVM    、     、     
            4、vue   html        ：        ****

            ps：       
                1，html body         
                2，  vue                 ，        id  

              ：
                

                    {{ }}
                    

                    

                        {{ }}
                    

                    

                    

                        {{ }}
                    

                

                
                <br>                    new Vue({<br>                        el:'.main'  //el            <br>                    });<br>                    new Vue({<br>                        el: '#wrap'  // el       id   <br>                    })<br>                


        js  (  )  ：
            let b = 20;
            let dic = {
                a: 10,  //         ，key             
                b  //      ，  key  ，         b:b     b    key，   b   
            };
            console.log(dic)

    3，    -  （data）
        1，     data vue      ，         {}
        2，      {{}} ，      key     
        3，          app，      (      $  ），       
               app.$data.info
        4，            APP      
            app.info
        5, vue       methods ，    ，this.info(this      info）

          ：
        

            
            
{{ info }}

            
{{ info }}

            
{{ num }}

            
{{ arr }}

            
{{ dic }}

        

        
        <br>            let app = new Vue({<br>                el: '#app',<br>                data: {<br>                    info: 'message',<br>                    num: 100,<br>                    result: true,<br>                    arr: [1, 2, 3, 4, 5],<br>                    dic: {<br>                        name: 'Owen',<br>                        age: 17.5<br>                    }<br>                }<br>            })<br>        
        <br>            console.log(app);<br>            console.log(app.$data.info); //     info   $data.info    $<br>            console.log(app.info);   //   app.$data.info  ，    ，   $data   <br>        

    4，    —    filters,
        1，             ，                ，              
        2，       {{...  |    (...  ）}}
        3，        filters      （         ）

          ：
        

            
            
{{ num + 3.5 }}

            
{{ msg.split('')[4] }}


            
{{ num | f1 }}

            
{{ 10, 20, 30, 40 | f2 }}

            
{{ 10, 20 | f2(50, 80) }}

            
{{ 120 | f2 }}

        

        
        <br>            new Vue({<br>                el: '#app',<br>                data: {<br>                    num: 100,<br>                    msg: 'message'<br>                },<br>                filters: {<br>                    //   ：{{ num | f1 }}<br>                    f1: function (num) {<br>                        return num * 2<br>                    },<br>                    //   ：{{ a,b,c,d | f2 }}  {{ a,b,c | f2(d) }}  { a,b| f2(c,d) }}  { a| f2(b,c,d) }}<br>                    f2: function (a, b, c, d) {<br>                        console.log(a, b, c, d);<br>                        return a + b + c + d    //   <p>{{ 120 | f2 }}</p>     a  120，b,c,d    undefined           NaN<br>                    }<br>                }<br>            })<br>        

    5，    
        1，       v-text  ，      
        2，v-html       html     ，    html  
        3，                    

        

            
{{ info }}


            
            

            
            

            

            

            


            
            

            

        

        
        <br>            new Vue({<br>                el: '#app',<br>                data: {<br>                    info: 'data     ',<br>                }<br>            })<br>        

             
            // 1) js          ``
            // 2)                ，    `${   }`
            let s1 = `   
               
               `;
            console.log(s1);

            let name = 'Owen';
            let age = 17.5;
            let s2 = `
            name: ${name}
            age: ${age}
            `;
            console.log(s2);


    6.    ：
          ：v-on:   ='   (   )’
          ：@   ='   (   )'
         methods               
            :    |    () |    (     )

        
        
        
            
            
            
        
        
            

                
                
    1

                
    2


                
         vue  1

                
                
         vue  2

                
      


                
                
    1

                
    2


                
                
    3

                
    4

                
                
    5



                
                
     

            

        
        
        <br>            new Vue({<br>                el: '#app',<br>                data: {<br>                    p1: 'q1',<br>                    myStyle: {<br>                        backgroundColor: 'pink',<br>                        color: 'deeppink',<br>                        'border-radius': '50%'<br>                    },<br>                    c1: 'cyan',<br>                    c2: 'tan',<br>                    myc1: 'ccc ddd eee',<br>                    myc2: 'ccc1',<br>                    myc3: 'ccc2',<br>                    myc4: 'ccc3',<br>                    yyy: true,  // false<br>                },<br>                methods: {<br>                    clickAction() {<br>                        this.yyy = !this.yyy;<br>                    }<br>                }<br>            })<br>        
        

    8.          ：