有声读物,豆豆小说阅读网,梦入神机

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

后端程序員的 VUE 超簡單入門筆記

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

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

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

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

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

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

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

一、Vue 的開始

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

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

 
 
 
   
  
  
     
  
  
         
  
  
             
  
  
          {{message}}

在上面的代碼中，通過

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

三、雙向綁定

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

 
 
 
   
  
  
     
  
  
         
  
  
          {{keyword}}

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

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

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

四、事件綁定

事件綁定是對事件的監(jiān)聽，可以通過 v-on 或 @ 指令來完成，代碼如下：

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

上面的代碼中，在 Vue 對象中增加了 methods，在 methods 中可以用來定義方法。

五、條件指令

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

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

六、循環(huán)指令

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

 
 
 
   
  
  
     
  
  
         
  
  
             
  
  
              {{index+1}} -- {{user.name}} -- {{user.age}}

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

七、Vue 生命周期

Vue 的生命周期，就是創(chuàng)建、銷毀 Vue 對象時(shí)會自動執(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ù)制過來，如下圖。

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

這里寫代碼進(jìn)行測試：

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

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

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

八、axios 和 vue-resource 庫

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

 
 
 
   
  
  
     
  
  
         
  
  
                        
                
                 
                 
             
         
  
  
  
    
  
  
  {{index + 1}}  
  
  
  {{user.name}}  
  
  
  {{user.age}}  
  
  
    
  
  
  
   
  
  
                        
                
                 
                 
             
         
  
  
  
    
  
  
  {{index + 1}}  
  
  
  {{it.name}}  
  
  
  {{it.age}}

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

九、總結(jié)

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

分享標(biāo)題：后端程序員的 VUE 超簡單入門筆記
標(biāo)題路徑：http://m.fisionsoft.com.cn/article/cospiss.html

新聞中心

一、Vue 的開始

三、雙向綁定

四、事件綁定

五、條件指令

六、循環(huán)指令

七、Vue 生命周期

八、axios 和 vue-resource 庫