日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
后端程序員的 VUE 超簡(jiǎn)單入門(mén)筆記

 現(xiàn)在的各種開(kāi)源項(xiàng)目中使用 Vue 的越來(lái)越多了，作為一個(gè)后端程序員不會(huì)點(diǎn) Vue 也都玩不轉(zhuǎn)了。所以抽空學(xué)習(xí)了一下 Vue 的簡(jiǎn)單用法，整理成筆記，方便有需要的同學(xué)一起學(xué)習(xí)。

長(zhǎng)嶺網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)公司,長(zhǎng)嶺網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為長(zhǎng)嶺成百上千提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)要多少錢(qián)，請(qǐng)找那個(gè)售后服務(wù)好的長(zhǎng)嶺做網(wǎng)站的公司定做！

Vue 是一個(gè)前端的框架，被稱(chēng)作是 漸進(jìn)式 JavaScript 框架。在進(jìn)入 Vue 的官網(wǎng)時(shí)即可看到，上面圖的就是從 Vue 官網(wǎng)復(fù)制的。

什么是 漸進(jìn)式 框架，這里我們引用官網(wǎng)的原文來(lái)看，原文如下：

Vue (讀音 /vju?/，類(lèi)似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類(lèi)庫(kù)結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用提供驅(qū)動(dòng)。

https://cn.vuejs.org/v2/guide/

Vue 可以作為整個(gè)前端開(kāi)發(fā)的一部分，也可以作為一個(gè)整體。也就是說(shuō)，可以使用 Vue 的部分功能來(lái)構(gòu)建前端，也可以完全使用 Vue 來(lái)構(gòu)建前端。大概就是這樣的意思。

一、Vue 的開(kāi)始

Vue 的開(kāi)始還是很方便的，只需要引入一個(gè)庫(kù)文件 —— vue.js 即可開(kāi)始。我們可以去 Vue 的官網(wǎng)下載，也可以通過(guò) CDN 來(lái)直接引入 vue 都可以。這里我下載了 vue.min.js 文件。

創(chuàng)建一個(gè) HTML 文件，然后引入 vue.min.js 文件，接著實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 Hello Vue 的程序。代碼如下：

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.      
    3.   
  
  
  
  3.          
    4.   
  
  
  
  4.         {{message}} 
    5.   
  
  
  
  5.     
 
  •      
  •      
  •  

    • 在上面的代碼中，通過(guò)  

  •      
  •  

    • 單向綁定可以時(shí) v-bind 也可以省略 v-bind，但是注意，冒號(hào)不能省略。上面的代碼中相當(dāng)于給 style 設(shè)置了 color:blue 屬性，運(yùn)行效果如下圖：

    三、雙向綁定

    雙向綁定通過(guò)指令 v-model 來(lái)完成，下面的代碼中，data 中的 keyword 會(huì)影響 div 中的兩個(gè) input 框，第二個(gè) input 框使用的 v-model 指令，那么當(dāng)改變第二個(gè) input 框中的值時(shí)，同樣會(huì)改變 data 中 keyword 的值；又由于改變了 data 中 keyword 的值，從而第一個(gè) input 框的值也會(huì)隨之改變。

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.      
      3.   
  
  
  
    3.         {{keyword}}
       
      4.   
  
  
  
    4.          
      5.   
  
  
  
    5.         
       
      6.   
  
  
  
    6.          
      7.   
  
  
  
    7.         
       
      8.   
  
  
  
    8.     
     
  •      
  •      
  •  

    • 運(yùn)行如下圖所示：

    改變第二個(gè) input 的值，如下圖所示：

    可以看到，通過(guò)修改第二個(gè) input 框的值，上面的值也跟著發(fā)生了改變。

    四、事件綁定

    事件綁定是對(duì)事件的監(jiān)聽(tīng)，可以通過(guò) v-on 或 @ 指令來(lái)完成，代碼如下：

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.      
      3.   
  
  
  
    3.         事件綁定1 
      4.   
  
  
  
    4.         事件綁定2 
      5.   
  
  
  
    5.     
     
  •      
  •      
  •  

    • 上面的代碼中，通過(guò) v-on 和 @ 將 Button 和 show() 方法進(jìn)行綁定，輸出如下圖所示：

    上面的代碼中，在 Vue 對(duì)象中增加了 methods，在 methods 中可以用來(lái)定義方法。

    五、條件指令

    條件指令使用 v-if 和 v-else 來(lái)完成，看如下代碼：

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.      
      3.   
  
  
  
    3.          
      4.   
  
  
  
    4.         選中了 
      5.   
  
  
  
    5.         沒(méi)有選中 
      6.   
  
  
  
    6.     
     
  •      
  •      
  •  

    • 上面的代碼中，通過(guò) v-model 和 ok 來(lái)進(jìn)行雙向綁定，然后當(dāng)改變 checkbox 的選中狀態(tài)時(shí)，v-if 和 v-else 會(huì)自動(dòng)改變文字描述。

    六、循環(huán)指令

    循環(huán)指令使用 v-for，它可以用來(lái)遍歷數(shù)組從而渲染一個(gè)列表，看如下代碼：

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.      
      3.   
  
  
  
    3.          
      4.   
  
  
  
    4.             {{index+1}} -- {{user.name}} -- {{user.age}} 
      5.   
  
  
  
    5.         
     
  •     
    •  
  •      
  •      
  •  

    • 上面的代碼中 index 是一個(gè)循環(huán)的計(jì)數(shù)從 0 開(kāi)始，然后循環(huán) userList Json 數(shù)組，輸出如下圖：

    七、Vue 生命周期

    Vue 的生命周期，就是創(chuàng)建、銷(xiāo)毀 Vue 對(duì)象時(shí)會(huì)自動(dòng)執(zhí)行的幾個(gè)函數(shù)，Vue 的官網(wǎng)提供了一個(gè)生命周期圖，該圖的地址如下：

    https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA

    我這里從官網(wǎng)復(fù)制過(guò)來(lái)，如下圖。

    在上圖中可以看到，不同的生命周期有不同的方法會(huì)被執(zhí)行，比如 created、updated、destroyed 等。

    這里寫(xiě)代碼進(jìn)行測(cè)試：

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.      
      3.   
  
  
  
    3.         {{msg}} 
      4.   
  
  
  
    4.     
     
  •      
  •      
  •  

    • 在代碼的 created 和 mounted 兩處放入了 debugger 命令，打開(kāi) F12 的調(diào)試窗口時(shí)，當(dāng)執(zhí)行到 debugger 位置處時(shí)，會(huì)自動(dòng)觸發(fā)斷點(diǎn)從而斷下，首先斷在 created 方法中，如下圖：

    從上圖可以看出，此時(shí)的插值表達(dá)式并沒(méi)有進(jìn)行實(shí)際的替換，按 F8 讓頁(yè)面繼續(xù)渲染，會(huì)斷在 mounted 方法中，如下圖：

    此時(shí)可以看到，插值表達(dá)式已經(jīng)變成了 hello。這樣可以清楚的看到不同的生命周期會(huì)觸發(fā)不同的方法。

    八、axios 和 vue-resource 庫(kù)

    axios 是基于 Promise 的 Ajax 的庫(kù)，在 Vue 中有一個(gè) vue-resource 庫(kù)用于實(shí)現(xiàn)異步加載的庫(kù)。在 Vue.js 2.0 中推薦使用 axios 來(lái)完成 Ajax 的請(qǐng)求。這里給出演示的代碼，代碼如下：

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.      
      3.   
  
  
  
    3.          
    4.              
    5.                 
      6.  
    6.                 
      7.  
    7.                 
      8.  
    8.             
      9.  
    9.         
      10.   
  
  
    
  
  
  
      {{index + 1}}  
  
  
  {{user.name}}  
  
  
  {{user.age}}  
  
  
  
        
  
  
  
       
      10.   
  
  
  
    10.          
    11.              
    12.                 
      13.  
    13.                 
      14.  
    14.                 
      15.  
    15.             
      16.  
    16.         
      17.   
  
  
    
  
  
  
      {{index + 1}}  
  
  
  {{it.name}}  
  
  
  {{it.age}}  
  
  
  
        
  
  
  
       
      17.   
  
  
  
    17.     
     
  •      
  •      
  •      
  •      
  •  

    • 上面的代碼中，同時(shí)演示了 axios 和 vue-resource 兩個(gè)庫(kù)。代碼中直接請(qǐng)求了兩個(gè) json 文件，并沒(méi)有去進(jìn)行實(shí)際的接口請(qǐng)求。

    九、總結(jié)

    Vue 的內(nèi)容不只有這么些，具體可以參考 Vue 的官網(wǎng)（https://cn.vuejs.org/v2/guide/）進(jìn)行學(xué)習(xí)和了解。這里只是列出了可能使用較為頻繁的部分。不對(duì)之初請(qǐng)予指正。


    網(wǎng)站名稱(chēng)：后端程序員的 VUE 超簡(jiǎn)單入門(mén)筆記
    地址分享：http://www.5511xx.com/article/cospiss.html