先端技術——Vue.js

 

   
  {{gareen.name}}
 

  

  
<span style="color:#008000;">//</span><span style="color:#008000;">    </span>
<span style="color:#0000ff;">var</span> gareen = {"name":"  ","hp":616<span style="color:#000000;">};
 
</span><span style="color:#008000;">//</span><span style="color:#008000;">  vue.js              </span>
<span style="color:#0000ff;">new</span><span style="color:#000000;"> Vue({
      el: </span>'#div1'<span style="color:#000000;">,
      data: {
        message: gareen
      }
    })
  
</span> 
   
 
   
 
 
   
1.v-on      （    ）
 
   
 
 
   
2.    ：
 
   
v-if
 
   
v-else
 
   
v-else-if
 
   
 
 
   
3.    
 
   
v-for     
 
   
 
 
   
4.    
 
   
v-bind      
 
   
 
 
   
5.    
 
   
v-model     
 
   
         
 
   
 
 
   
6.    
 
   
computed
 
   
 
 
   
7.    
 
   
watch
 
   
 
 
   
8.   
 
   
（     ）
 
   
 
 
   
9.  
 
   
components
 
   
 
 
   
10.     
 
   
 
 
   
11.  ：
 
   
         
 
   
（1）       ：vue-router.min.js
 
   
（2）
 
   
 
    



    



    

        
            
            
            
    
    
    

        
                
    



    <span style="color:#008000;">/*</span><span style="color:#008000;">
    *       ( html    )
    </span><span style="color:#008000;">*/</span>
    <span style="color:#0000ff;">var</span> user = { template: '<p>         </p>'<span style="color:#000000;"> };
    </span><span style="color:#0000ff;">var</span> second = { template: '<p>         </p>'<span style="color:#000000;"> };
    </span><span style="color:#0000ff;">var</span> order = { template: '<p>         </p>'<span style="color:#000000;"> };
    </span><span style="color:#008000;">/*</span><span style="color:#008000;">
    *     
    </span><span style="color:#008000;">*/</span>
    <span style="color:#0000ff;">var</span> routes =<span style="color:#000000;"> [
        { path: </span>'/', redirect: '/user'}, <span style="color:#008000;">//</span><span style="color:#008000;">           /user，        </span>
        { path: '/user'<span style="color:#000000;">, component: user },
        { path: </span>'/product'<span style="color:#000000;">, component: second },
        { path: </span>'/order'<span style="color:#000000;">, component: order }
    ];
    </span><span style="color:#008000;">/*</span><span style="color:#008000;">
    *   VueRouter  
    </span><span style="color:#008000;">*/</span>
    <span style="color:#0000ff;">var</span> router = <span style="color:#0000ff;">new</span><span style="color:#000000;"> VueRouter({
        routes:routes
    });
    </span><span style="color:#008000;">/*</span><span style="color:#008000;">
    *  vue      
    </span><span style="color:#008000;">*/</span>
    <span style="color:#0000ff;">new</span><span style="color:#000000;"> Vue({
        el:</span>"#app"<span style="color:#000000;">,
        router
    })

</span>

 

 

＜h 1＞ajaxを  する  :
(http://how2j.cn/k/vuejs/vuejs-axios/1759.html)

いくつかのフレーム:fetch.js     axios.js

 

＜div class=「stepbody panel-body 1」＞

＜div class=「interview Answer stephighlight Desc」＞
＜div class=「stephighlight DescOnly mask 4 spider-false」＞
Vue.jsはどのような  でajax  を うかを  していませんので、 のような  が えます.


1.  ajax
2.JQuery
3.vue-reource
では、どのような い をしますか?br/
1.  はプロジェクトでは わないので、  に
2.jqueryは4よりも5の が  です.>5.axios.jsはvue.jsの    です.

＜div class=「stephighlight DescOnly mask 4 spider-false」＞
  

＜div class=「stephighlight DescOnly mask 4 spider-false」＞
  




＜div class＝「パン・パン・el-info」＞
＜div id=「step 7841」クラス=「panel-heading」
＜h 2＞VUE.JSのCRUD  :

＜div class=「panel-heading」＞
  

＜div class=「panel-heading」＞
  


 


   :https://www.cnblogs.com/StingLon/p/11103250.html