自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

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

作者：碼農(nóng)UP2U
開發(fā) 前端
現(xiàn)在的各種開源項目中使用 Vue 的越來越多了，作為一個后端程序員不會點 Vue 也都玩不轉(zhuǎn)了。

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

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

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

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

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

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

一、Vue 的開始

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

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

  1. <body> 
  2.     <div id="app"> 
  3.         <!-- 插值表達式，綁定vue中的data --> 
  4.         {{message}} 
  5.     </div> 
  6.     <script src="vue.min.js"></script> 
  7.     <script> 
  8.         // 創(chuàng)建一個vue對象 
  9.         new Vue({ 
  10.             el:'#app',  // 綁定vue作用的范圍 
  11.             data: {     // 定義頁面中顯示的模型數(shù)據(jù) 
  12.                 message: 'Hello Vue!' 
  13.             } 
  14.         }) 
  15. </script> 
  16. </body> 

在上面的代碼中，通過 <script src="vue.min.js"> 引入了 vue 的庫文件，然后通過 new Vue 來創(chuàng)建一個 Vue 的對象。其中 el 是 DOM 的 id，表示該 Vue 對象是針對該 DOM 中。在 data 中定義了值 “Hello Vue” 為 message 變量，然后在 id 為 app 的 div 標(biāo)簽中通過 插值表達式（使用 {{}} 插入的變量） 來輸出 message 變量的值。

Vue 中的 el 和 data 是固定的寫法，el 和一個標(biāo)簽進行關(guān)聯(lián)，表示該 Vue 對象只和該標(biāo)簽關(guān)聯(lián)，data 是用來定義變量使用的。

這樣就構(gòu)建了一個簡單的 Vue 的 HTML 頁面。Vue 內(nèi)部完成了 DOM 的綁定操作，無需像 jQuery 那樣獲取 DOM 的操作。

二、單向綁定

單向綁定的指令是 v-bind，它用在標(biāo)簽屬性上面，通過它可以獲取 data 中定義的變量的值。代碼如下：

  1. <body> 
  2.     <div id="app"> 
  3.         <!-- v-bind 在標(biāo)簽的屬性中，取到vue在data中定義的變量的值 --> 
  4.         <div v-bind:style="msg">單向綁定</div> 
  5.         <div :style="msg">單向綁定</div> 
  6.     </div> 
  7.     <script src="vue.min.js"></script> 
  8.     <script> 
  9.         new Vue({ 
  10.             el: '#app', 
  11.             data: { 
  12.                 msg: 'color: blue;' 
  13.             } 
  14.         }) 
  15. </script> 
  16. </body> 

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

三、雙向綁定

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

  1. <body> 
  2.     <div id="app"> 
  3.         {{keyword}}<br> 
  4.         <!-- 單向綁定 --> 
  5.         <input type="text" :value="keyword"><br> 
  6.         <!-- 雙向綁定 --> 
  7.         <input type="text" v-model="keyword"><br> 
  8.     </div> 
  9.     <script src="vue.min.js"></script> 
  10.     <script> 
  11.         new Vue({ 
  12.             el: '#app', 
  13.             data: { 
  14.                 keyword: 'test' 
  15.             } 
  16.         }) 
  17. </script> 
  18. </body> 

運行如下圖所示：

改變第二個 input 的值，如下圖所示：

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

四、事件綁定

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

  1. <body> 
  2.     <div id="app"> 
  3.         <button v-on:click="show()">事件綁定1</button> 
  4.         <button @click="show()">事件綁定2</button> 
  5.     </div> 
  6.     <script src="vue.min.js"></script> 
  7.     <script> 
  8.         new Vue({ 
  9.             el: '#app', 
  10.             data: { 
  11.                 keyword: 'test' 
  12.             }, 
  13.             methods: { 
  14.                 show() { 
  15.                     console.log("show....") 
  16.                 } 
  17.             } 
  18.         }) 
  19. </script> 
  20. </body> 

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

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

五、條件指令

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

  1. <body> 
  2.     <div id="app"> 
  3.         <input type="checkbox" v-model="ok"> 
  4.         <span v-if="ok">選中了</span> 
  5.         <span v-else>沒有選中</span> 
  6.     </div> 
  7.     <script src="vue.min.js"></script> 
  8.     <script> 
  9.         new Vue({ 
  10.             el: '#app', 
  11.             data: { 
  12.                 ok: false 
  13.             } 
  14.         }) 
  15. </script> 
  16. </body> 

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

六、循環(huán)指令

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

  1. <body> 
  2.     <div id="app"> 
  3.         <div v-for="(user, index) in userList"> 
  4.             {{index+1}} -- {{user.name}} -- {{user.age}} 
  5.         </div> 
  6.     </div> 
  7.     <script src="vue.min.js"></script> 
  8.     <script> 
  9.         new Vue({ 
  10.             el: '#app', 
  11.             data: { 
  12.                 userList: [ 
  13.                     {"name":"張三", "age":20}, 
  14.                     {"name":"李斯", "age":30}, 
  15.                 ] 
  16.             } 
  17.         }) 
  18. </script> 
  19. </body> 

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

七、Vue 生命周期

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

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 等。

這里寫代碼進行測試：

  1. <body> 
  2.     <div id="app"> 
  3.         {{msg}} 
  4.     </div> 
  5.     <script src="vue.min.js"></script> 
  6.     <script> 
  7.         new Vue({ 
  8.             el: '#app', 
  9.             data: { 
  10.                 msg: 'hello' 
  11.             }, 
  12.             // 在頁面渲染之前執(zhí)行 
  13.             created() { 
  14.                 debugger 
  15.                 console.log('created...') 
  16.             }, 
  17.             // 在頁面渲染之后執(zhí)行 
  18.             mounted() { 
  19.                 debugger 
  20.                 console.log('mounted...') 
  21.             } 
  22.         }) 
  23. </script> 
  24. </body> 

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

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

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

八、axios 和 vue-resource 庫

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

  1. <body> 
  2.     <div id="app"> 
  3.         <table> 
  4.             <tr v-for="(user, index) in userList"> 
  5.                 <td>{{index + 1}}</td> 
  6.                 <td>{{user.name}}</td> 
  7.                 <td>{{user.age}}</td> 
  8.             </tr> 
  9.         </table> 
  10.         <table> 
  11.             <tr v-for="(it, index) in itList"> 
  12.                 <td>{{index + 1}}</td> 
  13.                 <td>{{it.name}}</td> 
  14.                 <td>{{it.age}}</td> 
  15.             </tr> 
  16.         </table> 
  17.     </div> 
  18.     <script src="vue.min.js"></script> 
  19.     <script src="axios.min.js"></script> 
  20.     <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script> 
  21.     <script> 
  22.         new Vue({ 
  23.             el: '#app', 
  24.             data: { 
  25.                 userList : [], 
  26.                 itList: [] 
  27.             }, 
  28.             // 在頁面渲染之前執(zhí)行 
  29.             created() { 
  30.                 // 調(diào)用方法，得到返回json數(shù)據(jù) 
  31.                 this.getUserList(), 
  32.                 this.getLanguageList() 
  33.             }, 
  34.             methods: { 
  35.                 getUserList() { 
  36.                     // 使用 axios 方式 ajax 請求 
  37.                     // 請求的接口路徑 
  38.                     axios.get("user.json") 
  39.                         // 請求成功 
  40.                         .then(response =>{ 
  41.                             console.log(response) 
  42.                             this.userList = response.data.data.items 
  43.                         }) 
  44.                         // 請求失敗 
  45.                         .catch(error => { 
  46.                             console.log(error) 
  47.                         }) 
  48.                 }, 
  49.                 getLanguageList(){ 
  50.                     //發(fā)送get請求 
  51.                     this.$http.get('language.json').then(function(response){ 
  52.                         console.log(response.body); 
  53.                         this.itList = response.body.data.items 
  54.                     },function(){ 
  55.                         console.log('請求失敗處理'); 
  56.                     }); 
  57.                 } 
  58.             } 
  59.         }) 
  60. </script> 
  61. </body> 

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

九、總結(jié)

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

 

責(zé)任編輯：張燕妮 來源： 碼農(nóng)UP2U
程序員技能開發(fā)者
相關(guān)推薦

2017-12-15 15:09:42

2019-05-15 23:04:19

程序員數(shù)據(jù)建模

2016-12-19 16:55:10

PHP程序員運維

2018-08-02 17:00:15

Vue.js學(xué)習(xí)iOS開發(fā)

2013-08-20 09:33:59

程序員

2016-01-05 10:30:59

后端程序員緩存原理

2024-05-06 00:00:00

2022-12-07 10:21:19

谷歌搜索技巧

2010-12-30 10:04:49

Linux入門

2011-05-13 14:34:02

程序員

2020-02-14 15:16:16

程序員表白浪漫

2009-07-28 08:28:15

2015-01-12 10:42:02

程序員

2015-06-02 11:01:18

JavaGo

2019-05-16 08:36:53

Eureka緩存網(wǎng)關(guān)

2009-01-16 19:49:49

程序員考試數(shù)組指針

2017-11-14 21:30:15

2012-11-22 14:00:26

程序員

2019-06-23 17:37:58

Linux后端函數(shù)棧

2012-03-06 09:22:46

程序員
點贊
收藏

51CTO技術(shù)棧公眾號