最近一段時間都花在了學習vue上，還總是斷斷續續的，學習的效果不是很明顯，思考了好久了，應該是沒有進行一個系統的總結，導致很多知識點總是似是而非，而且也有一部分是思維還沒有從java轉變過來，廢話不多說，慢慢學吧！
準備將我學習vue的只是總結一下當個筆記吧，不記得的時候回頭看一看；
vue官方檔案：https://cn.vuejs.org
1.什么是vue.js
其實百度一下可以知道很多說明，是一套用于構建用戶界面的漸進式框架，Vue 被設計為可以自底向上逐層應用，Vue 的核心庫只關注視圖層....，說實話這些剛開始對我來說完全沒有什么用，直接學就對了，暫時就把vue當作一個js的第三方庫用，就類似jquery一樣，首先用script標簽引入，然后用特定的語法使用就ok了；
當然，這是最low的方式，后面我們慢慢學怎么和webpack包管理工具集成，實作模塊化開發，在此，我們先了解一下幾個概念：
node：什么是node呢？我們知道js代碼只能運行在瀏覽器上，但是沒有瀏覽器js可以運行嗎？當然可以，于是就有了node，node就是一個js的運行環境，你可以把它理解為瀏覽器的替代品，而且最關鍵的是js擺脫了瀏覽器的限制之后，就可以用js寫后端代碼了；比如可以寫個服務器，其實就是寫個程式跑起來一直監聽電腦的某個埠，外界可以通過http請求訪問這個埠，然后程式就收到這個請求的url，根據url中的路徑去讀寫檔案，然后回傳用戶請求；
npm：可以簡單的理解為一個下載第三方庫的工具，有了這個工具，你想在你的專案中使用優秀的第三方庫只需要一個命令可以了npm i xxx -s，最比較新的node中已經自帶的npm，所以你無需自己去下載
webpack：可以用npm下載，在模塊化開發時候用到的，因為如果模塊之間的依賴關系很復雜，專案做好之后，頁面加載或互動時，將會發起大量請求，為了性能優化，需要使用webpack這樣的打包器對模塊進行打包整合，以減少請求數，借用一張圖，其實就是簡化依賴關系的一個打包工具
總之一句話，node是一個運行環境，npm是下載第三方庫的工具避免重復造輪子，webpack打包工具，優化性能
2.vue簡單使用
我們從最簡單的開始，隨便準備一個html檔案，千萬不要從vue-cli腳手架開始，因為剛開始目錄太多，一臉蒙逼w(°ｏ°)w
我這里編輯器用的是vscode，強烈推薦用這個，我用這個編輯器的最大原因是輕量級(千萬別下錯了，vscode全稱叫做Visual Studio Code，還有一個名字很像的Microsoft Visual Studio Code，這個有幾個G的大小....)，而且想要什么插件直接下載，好用，當然有興趣的也可以用webstorm等；
新建一個html檔案，用vscode打開，然后 ！+Tab快速生成html模板，引入vue的js檔案，并且在vscode中下載一個open in browers插件，這樣就可以在html中右鍵，選擇是在默認瀏覽器打開還是在其他瀏覽器打開
簡單vue代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- 引入vue的依賴檔案 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> {{ message }} //這里有一個message變數，用{{}}包起來 </div> <script> var app = new Vue({ el: '#app', //這里就是選擇上面的div標簽 data: { message: 'Hello Vue!' //給message變數賦值，這里會同步到div標簽中的message中 } }) </script> </body> </html>
右鍵，打開默認瀏覽器，然后瀏覽器中就能看到Hello Vue!
很容易，只需要三步，首先是引入vue依賴檔案，然后在html標簽中用{{xxx}}包著一個vue變數，最后就是創建Vue實體，在這個實體中選擇指定標簽，定義變數值，然后這個變數值就會在html標簽中生效；
這里其實就相當于document.getElementsById("app").innerText="Hello Vue!"，然而vue的目的就是盡量不讓我們去直接操作dom節點，我們只需要專注于向標簽中填充資料就行了，了解了這些下面我們就簡單看看vue常見的命令吧！
3.vue基礎語法
我們在2中使用了{{}}這個東西表示其中的變數是和Vue實體相關聯的，其實vue還給我們提供了一些命令
我們要注意一點：只要是跟vue指令系結的，都是變數、函式物件（boolean型別除外）或者是運算式，比如經典的v-bind:，v-on:clidk="xxx"；注意，引號里面的都是變數，不是字串
3.1 v-bind指令
這個指令可以系結標簽中的任意屬性，使得這個屬性的值就變成了vue中的屬性!有沒有覺得這句話很繞，舉個例子：<a v-bind:href="https://www.cnblogs.com/wyq1995/p/url">我是百度</a>
這個a標簽的屬性href,被v-bind命令給系結了，使得href這個屬性的值url就變成了vue中的一個屬性，下圖所示，在Vue實體中，我們就可以對url這個屬性賦值了，是不是很容易，而且這個命令還可以簡寫成冒號，即上面的標簽簡寫后就是<a :href="https://www.cnblogs.com/wyq1995/p/url">我是百度</a>
我上面說過，v-bind屬性可以系結標簽中的任何屬性，也就是說屬性id，class，style，src等等屬性都可以，只需要宣告類似的 :xxx = “aaa”，然后在Vue實體中的data中宣告aaa屬性即可
3.2 v-for指令
這個指令常常用于回圈展示，舉個簡單的例子：
var app = new Vue({
el: '#app',
data: { //定義了一個books陣列
books: [{
name: "魯濱遜",
price: 15
}, {
name: "葫蘆娃",
price: 7
}]
}
})
<ul> <li v-for="book in books">書名是：{{book.name}}-------價格是：{{book.price}}</li> </ul>
3.3 v-if指令
這個用于條件判斷，如果v-if="flag"中flag為true，那么這個標簽就是看得到的，否則就是看不到的，舉個例子：
<h1 v-if="true">你看不到我</h1> <h1 v-if="false">你看得到我</h1>
當然，也可以在v-if里面是一個屬性，效果和上面是一樣的
這個指令和v-show用法一樣，效果幾乎一樣，唯一的區別就是v-if指令為false時，那么該標簽在html中根本就沒有，而v-show即使為false，這個標簽在html是存在的，只不過該標簽使用style="display: none;"不顯示出來，這也很好理解
3.4 v-model指令
注意，這個指令只會用在input標簽中，換句話說只會用在表單中，舉個例子,如下圖，只要輸入框中改變了什么，那么上面的顯示也會跟著改變，而且也會用于表單資訊收集，后面用到的時候再說
3.5 v-on指令
前面的幾個指令都是系結屬性的，這個命令是系結事件的，我們可以用這個命令來系結一些事件函式；舉個例子，系結只要滑鼠的點擊事件,每一次點擊按鈕，counter的值就會加一，使得vue實體中的counter也會跟著加一，然后p標簽又會時刻監聽著counter的變化，所以最終的效果就是每點擊一次按鈕，螢屏中的數字就會變化加一
補充一下，v-on指令由于很常用，所以也有簡寫形式，就是@，比如上面的<button @click="counter += 1">Add 1</button>
到這里可以說vue的幾個基本指令就說完了，還是很容易的，不知道大家有沒有發現，我們現在的指令還只是涉及到了vue實體中的data中的屬性，那么，在Vue實體中，除了el、data還有其他的屬性嗎？
4.vue實體的屬性
vue實體的屬性太多，我們就說說的常用屬性，首先的就是在上面我們說到的el屬性和data屬性，這兩個屬性很好理解，el的全稱是element，也就是標簽嘛，這里用的id選擇器選擇指定標簽，當然也可以用class選擇器，自己可以試試；然后data屬性表示在標簽中要進行初始化的一些靜態資料，注意，這里是靜態資料；
然后我們要想辦法讓這些資料是動態的，于是就有了事件監聽然后呼叫指定的函式，于是就有一個屬性是methods，在面向物件的語言中，這些函式也叫做方法，這里的就是存放標簽中監聽的自定義的事件函式；
由于每一次標簽中的資料發生變化，我們要動態顯示的話，都用函式監聽，那么每一次都會呼叫函式，雖然說可以實作基本功能，但是在某些特殊情況下，我們可以利用一個計算屬性computed，這個屬性有一個好處，就是可以使用快取，比如計算屬性中有個變數資料一直沒有改變，那么下一次訪問就直接回傳快取中的結果就行了，而函式的話每一次都會去執行一次；
還有就是在vue實體在實體化的程序中也會默認呼叫一些函式（這些函式不是在methods中的），這些函式是一些生命周期函式，大概分為三個部分，初始化的時候呼叫beforeCreate和created、beforedMount和mounted；更新資料的時候beforeUpdate和updated；銷毀vue實體的時候beforeDestroy和destroy；
我們簡單了解vue的生命周期，下面有個圖從官網那里拿過來的，很經典的一個圖：
下面我們就用簡單的例子，簡單看看使用一下這幾個常用的屬性和生命周期函式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <input type="text" v-model="message" placeholder="隨便輸入什么內容"> <input type="submit" value="逆轉按鈕" @click = "reverseMsg"> <br> <div>計算屬性為：{{msg}}</div> </div> <script> new Vue({ el: '#app', data: { message: '' }, methods:{ //這個方法作用是將字串逆轉 reverseMsg(){ return this.message = this.message.split('').reverse().join('') } }, computed:{ //這個計算屬性，在這類就是將逆轉的字串后面加計算回傳 msg(){ return this.message+"計算" } }, //以下都是生命周期函式的執行時機 beforeCreate(){ console.log("beforeCreate方法執行") }, created(){ console.log("create方法執行") }, beforeMount(){ console.log("beforedMount方法執行") }, mounted(){ console.log("mounted方法執行") }, beforeUpdate(){ console.log("beforeUpdate方法執行") }, updated(){ console.log("updated方法執行") }, //注意，下面兩個直接用頁面測驗不出來，到后面使用了vue-cli之后就很好測驗了 destoryed(){ console.log("destoryed方法執行"); }, beforeDestory(){ console.log("beforeDestory方法執行"); } }) </script> </body> </html>
可以看到，多次更新資料框中的資料都會呼叫更新的函式，而beforeCreate和created、beforedMount和mounted只會執行一次；beforeUpdate和updated會執行多次
具體的步驟：
在呼叫beforeCreate的時候，vue實體中的el，data，data中的message都為undefined；
呼叫created的時候，el還是undefined，而資料已經與data中的屬性進行系結（放在data中屬性當值發生改變的同時，視圖也會發生變化），一般可以在這里做初始資料的獲取；
呼叫beforedMount，載入前（完成了data和el資料初始化），但是頁面中的內容還是vue中的占位符，data中的message資訊沒有被掛在到Bom節點中，一般可以在這里做初始資料的獲取；
呼叫mounted，載入后html已經渲染(ajax請求可以放在這個函式中)，把vue實體中的data里的message掛載到BOM節點中去；
呼叫beforeUpdate，更新前狀態（html中的資料變化前，不是data中的資料改變前），重新渲染之前觸發，然后vue的虛擬dom機制會重新構建虛擬dom與上一次的虛擬dom進行對比之后重新渲染；
呼叫updated,資料已經更改完成，dom也重新渲染完成
沒記錯的話還有一個監聽屬性沒有說到，后面用到再說，其實監聽屬性暫時基本用不到，先放一下，還有幾個影片的指令，有興趣的自己研究一下；
5.vue組件
前面說了這么多都是一些基本用法，vue真正的精髓就是組件，可以有很多很多的組件，那么什么是組件呢？是一個js檔案，還是一個css檔案？
其實我認為組件是一個資源的集合，比如后面我們可能會用到的Element UI組件庫中的組件，每一個組件都包括js，css，scss，image等資源組成，然后我們隨時可以用這個組件放在我們的頁面中，不需要我們去自己手寫樣式或者去復制別人的css、js代碼了，實作了代碼的重用性，極大的簡化了開發；
當然我們這里會用到最簡單的組件，組件中就是一個template屬性（在模塊化開發中組件是一個vue檔案，里面有一個template標簽，在這個標簽里，可以用所有的html語法以及vue指令），例如下面的這樣的：
<div id="app">
<!--至于怎么使用組件呢？可以直接用組件名當作標簽使用就行了，注意，這里標簽中可以使用vue指令-->
<template01></template01>
<template02></template02>
<div>{{message}}</div>
</div>
<script>
var template01 = {template: '<h1>這里是第一個自定義組件</h1>'}
var template02 = {template: '<h1>這里第二個自定義組件</h1>'}
//這里是第一種注冊組件的做法，直接全域注冊，也就是說子組件中還可以用組件2
Vue.component("template02",template02)
new Vue({
el: '#app',
data: {
message: 'hello vue'
},
//這是第二種注冊組件的方式，但是這種方式是能在當前組件使用，這里相當于 "template01": template01
components:{
template01
}
})
</script>
如果是在組件化開發中，我們的組件是這種形式的，下圖所示：
·· 這里還有一點需要說一下，上面我們使用了template01 組件，但是這個組件中是不能使用new Vue(xxx)這個里面的data資料的，因為取不到；
我們把當前的組件叫做父組件，template01 組件叫做子組件，現在我們需要傳遞資料，由于子組件無法使用父組件中的資料，于是我們可以在子組件使用一個props，然后父組件可以在<template01></template01>中使用vue指令系結自定義屬性，這樣就將資料傳到子組件的props中，然后子組件就可以隨便使用props中的資料了；
舉個簡單的例子：
補充一下，不知道大家有沒有覺得這個template屬性比較熟悉，在前面應該見過，就是那個Vue生命周期的圖中，有關于生命周期的具體詳解我看了一篇博客講的挺不錯的，有興趣的可以去看看，點擊這里；
其實這里的template是vue的一個實體屬性，就像data屬性和el屬性一樣，實際上表示的是要渲染的模板，如果在Vue中沒有宣告這個屬性template，默認就把el屬性指向的標簽當作template去決議；否則只決議Vue中的template屬性對應的標簽內容，此時el對應的標簽不會決議
<div id="app">
<div>外面的模板：{{message}}</div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'hello vue'
},
//注意，此時不管這個div中沒有沒id="app"都一樣，只會默認決議這個模板，然后渲染資料
template:'<div><p>template屬性對應的模板：{{message}}</p></div>'
})
</script>
顯示的結果是：
由此可以知道Vue實體中的template屬性優先級更高，不過這個屬性很少用到，，，
6.總結
多了解Vue的宣告周期以及vue基礎知識很重要，然后在使用vue的程序中學會了很多的東西，慢慢學吧，這次只是簡單的看了一下基礎知識，下一次就好好的用vue-cli構建專案，然后快速開發一些東西
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/168605.html
標籤：JavaScript
上一篇：JS原生練習