vue-基礎語法和元件化開發
vue基礎語法
一. 計算屬性
1.1. 計算屬性的本質
fullname: {set(), get()}
每個計算屬性都包含一個getter和一個setter
在上面的例子中，我們只是使用getter來讀取。
在某些情況下，你也可以提供一個setter方法（不常用）。
在需要寫setter的時候，程式碼如下：
1.2. 計算屬性和methods對比
計算屬性在多次使用時, 只會呼叫一次.
它是由快取的
我們可能會考慮這樣的一個問題：
methods和computed看起來都可以實現我們的功能，
那麼為什麼還要多一個計算屬性這個東西呢？
原因：計算屬性會進行快取，如果多次使用時，計算屬性只會呼叫一次。
我們來看下面的程式碼：
1.3. ES6 語法
let/var (定義變數)
塊級作用域
變數作用域 :
ES5中的var是沒有作用域的
ES中的let是有作用域的(if / for)
變數在什麼範圍內是可用的
var沒有作用域限制(會引起一些問題 )
沒有塊級作用域所引起的問題
沒有塊級作用域 資料得不到保證,在哪都能修改
const (定義長量)
物件字面量增強寫法
二. 事件監聽
2.1. 事件監聽基本使用
在前端開發中，我們需要經常和用於互動。
這個時候，我們就必須監聽使用者發生的時間，比如點選、拖拽、鍵盤事件等等
在Vue中如何監聽事件呢？使用v-on指令
v-on介紹
作用：繫結事件監聽器
縮寫：@
預期：Function | Inline Statement | Object
引數：event
這裡，我們用一個監聽按鈕的點選事件，來簡單看看v-on的使用
下面的程式碼中，我們使用了v-on:click="counter++”
另外，我們可以將事件指向一個在methods中定義的函式
2.2. 引數問題
btnClick
btnClick(event) :!--2.在事件定義時, 寫方法時省略了小括號, 但是方法本身是需要一個引數的, 這個時候, Vue會預設將瀏覽器生產的event事件物件作為引數傳入到方法-->
btnClick(abc, event) -> $event : !--3.方法定義時, 我們需要event物件, 同時又需要其他引數-->
!-- 在呼叫方式, 如何手動的獲取到瀏覽器引數的event物件: $event-->
當通過methods中定義方法，以供@click呼叫時，需要注意引數問題：
情況一：如果該方法不需要額外引數，那麼方法後的()可以不新增。
但是注意：如果方法本身中有一個引數，那麼會預設將原生事件event引數傳遞進去
情況二：如果需要同時傳入某個引數，同時需要event時，可以通過$event傳入事件
Event 本身包含適用於所有事件的屬性和方法。
構造器：可以使用event（）建立一個event物件
Event 物件代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、滑鼠的位置、滑鼠按鈕的狀態。事件通常與函式結合使用，函式不會在事件發生前被執行！
2.3. 修飾符
stop
prevent
.enter
.once
.native
在某些情況下，我們拿到event的目的可能是進行一些事件處理。
Vue提供了修飾符來幫助我們方便的處理一些事件：
.stop - 呼叫 event.stopPropagation()。
.prevent - 呼叫 event.preventDefault()。
.{keyCode | keyAlias} - 只當事件是從特定鍵觸發時才觸發回撥。
.native - 監聽元件根元素的原生事件。
.once - 只觸發一次回撥。
三. 條件判斷
3.1. v-if/v-else-if/v-else
v-if、v-else-if、v-else
這三個指令與JavaScript的條件語句if、else、else if類似。
Vue的條件指令可以根據表示式的值在DOM中渲染或銷燬元素或元件
簡單的案例演示：
v-if的原理：
v-if後面的條件為false時，對應的元素以及其子元素不會渲染。
也就是根本沒有不會有對應的標籤出現在DOM中。
3.2. 登入小案例
使用者再登入時，可以切換使用使用者賬號登入還是郵箱地址登入。
類似如下情景：
小問題：
如果我們在有輸入內容的情況下，切換了型別，我們會發現文字依然顯示之前的輸入的內容。
但是按道理講，我們應該切換到另外一個input元素中了。
在另一個input元素中，我們並沒有輸入內容。
為什麼會出現這個問題呢？
問題解答：
這是因為Vue在進行DOM渲染時，出於效能考慮，會盡可能的複用已經存在的元素，而不是重新建立新的元素。
在上面的案例中，Vue內部會發現原來的input元素不再使用，直接作為else中的input來使用了。
解決方案：
如果我們不希望Vue出現類似重複利用的問題，可以給對應的input新增key
並且我們需要保證key的不同
3.3. v-show
v-show和v-if區別
v-show的用法和v-if非常相似，也用於決定一個元素是否渲染：
v-if和v-show對比
v-if和v-show都可以決定一個元素是否渲染，那麼開發中我們如何選擇呢？
v-if當條件為false時，壓根不會有對應的元素在DOM中。
v-show當條件為false時，僅僅是將元素的display屬性設定為none而已。
開發中如何選擇呢？
當需要在顯示與隱藏之間切片很頻繁時，使用v-show
當只有一次切換時，通過使用v-if
四. 迴圈遍歷
4.1. 遍歷陣列
當我們有一組資料需要進行渲染時，我們就可以使用v-for來完成。
v-for的語法類似於JavaScript中的for迴圈。
格式如下：item in items的形式。
我們來看一個簡單的案例：
如果在遍歷的過程中不需要使用索引值
v-for="movie in movies"
依次從movies中取出movie，並且在元素的內容中，我們可以使用Mustache語法，來使用movie
如果在遍歷的過程中，我們需要拿到元素在陣列中的索引值呢？
語法格式：v-for=(item, index) in items
其中的index就代表了取出的item在原陣列的索引值。
totalPrice() {
// 1.普通的for迴圈
// let totalPrice = 0
// for (let i = 0; i < this.books.length; i++) {
// totalPrice += this.books[i].price * this.books[i].count
// }
// return totalPrice
// 2.for (let i in this.books)
// let totalPrice = 0
// for (let i in this.books) {
// const book = this.books[i]
// totalPrice += book.price * book.count
// }
//
// return totalPrice
// 3.for (let i of this.books)
// let totalPrice = 0
// for (let item of this.books) {
// totalPrice += item.price * item.count
// }
// return totalPrice
return this.books.reduce(function (preValue, book) {
return preValue + book.price * book.count
}, 0)
}
4.2. 遍歷物件
value
value, key
value, key, index
v-for可以使用者遍歷物件：
比如某個物件中儲存著你的個人資訊，我們希望以列表的形式顯示出來。
4.3. 陣列哪些方法是響應式的
官方推薦我們在使用v-for時，給對應的元素或元件新增上一個:key屬性。
為什麼需要這個key屬性呢（瞭解）？
這個其實和Vue的虛擬DOM的Diff演算法有關係。
這裡我們借用React’s diff algorithm中的一張圖來簡單說明一下：
當某一層有很多相同的節點時，也就是列表節點時，我們希望插入一個新的節點
我們希望可以在B和C之間加一個F，Diff演算法預設執行起來是這樣的。
即把C更新成F，D更新成C，E更新成D，最後再插入E，是不是很沒有效率？
所以我們需要使用key來給每個節點做一個唯一標識
Diff演算法就可以正確的識別此節點
找到正確的位置區插入新的節點。
所以一句話，key的作用主要是為了高效的更新虛擬DOM。
因為Vue是響應式的，所以當資料發生變化時，Vue會自動檢測資料變化，檢視會發生對應的更新。
Vue中包含了一組觀察陣列編譯的方法，使用它們改變陣列也會觸發檢視的更新。
push() 往最後新增元素 (可以新增多個元素)
pop() 刪除資料中的最後一個元素
shift() 刪除我們陣列中的第一個元素
unshift() 在陣列最前面新增元素 (可以新增多個元素)
splice() 作用<刪除元素 / 插入元素/ 替換元素>
刪除元素 splice(1,2), 第二個引數傳入你要刪除幾個元素(如果沒有傳刪除,就刪除後面所有的元素)
插入元素splice(1,3,'m','n','u','x') 第二個引數表示我們要替換幾個元素,後面是用於替換前面的元素
替換元素splice(1,0,'x','y','z') 第二個引數傳入0 ,並且後面跟上要插入的元素
sort() 排序
reverse() 反轉
注意: 通過索引值修改陣列中的元素(不是響應式)
// this.letters[0] = 'bbbbbb';
解決辦法this.letters.splice(0, 1, 'bbbbbb')
// set(要修改的物件, 索引值, 修改後的值)
// Vue.set(this.letters, 0, 'bbbbbb')
4.3. 陣列哪些方法是響應式的小案例 點選 那個那個新增樣式
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .active { color: red; } </style> </head> <body> <div id="app"> <ul> <li v-for="(item, index) in movies" :class="{active: currentIndex === index}" @click="liClick(index)"> {{index}}.{{item}} </li> </ul> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { movies: ['海王', '海賊王', '加勒比海盜', '海爾兄弟'], currentIndex: 0 }, methods: { liClick(index) { this.currentIndex = index}}}) </script> </body> </html>
五. v-model的使用
預設情況下再給變數賦值都是字串型別
5.1. v-model的基本使用
5.2 表單繫結v-model
v-model => v-bind:value v-on:input
表單控制元件在實際開發中是非常常見的。特別是對於使用者資訊的提交，需要大量的表單。
Vue中使用v-model指令來實現表單元素和資料的雙向繫結。
案例的解析：
當我們在輸入框輸入內容時
因為input中的v-model綁定了message，所以會實時將輸入的內容傳遞給message，message發生改變。
當message發生改變時，因為上面我們使用Mustache語法，將message的值插入到DOM中，所以DOM會發生響應的改變。
所以，通過v-model實現了雙向的繫結。
當然，我們也可以將v-model用於textarea元素
5.3v-model原理
v-model其實是一個語法糖，它的背後本質上是包含兩個操作：
1.v-bind繫結一個value屬性
2.v-on指令給當前元素繫結input事件
也就是說下面的程式碼：等同於下面的程式碼：
-
<input type="text" v-model="message"> 等同於 <input type="text" v-bind:value="message" v-on:input="message = $event.target.value">
5.4. v-model和radio/checkbox/select
當存在多個單選框時
v-model：checkbox
單個勾選框：
v-model即為布林值。
此時input的value並不影響v-model的值
多個複選框：
當是多個複選框時，因為可以選中多個，所以對應的data中屬性是一個數組。
當選中某一個時，就會將input的value新增到陣列中。
v-model：select
單選：只能選中一個值。
v-model繫結的是一個值。
當我們選中option中的一個時，會將它對應的value賦值到mySelect中
多選：可以選中多個值。
v-model繫結的是一個數組。
當選中多個值時，就會將選中的option對應的value新增到陣列mySelects中
5.5. 修飾符
lazy:
預設情況下，v-model預設是在input事件中同步輸入框的資料的。
也就是說，一旦有資料發生改變對應的data中的資料就會自動發生改變。
lazy修飾符可以讓資料在失去焦點或者回車時才會更新：
number:
預設情況下，在輸入框中無論我們輸入的是字母還是數字，都會被當做字串型別進行處理。
但是如果我們希望處理的是數字型別，那麼最好直接將內容當做數字處理。
number修飾符可以讓在輸入框中輸入的內容自動轉成數字型別：
trim:
如果輸入的內容首尾有很多空格，通常我們希望將其去除
trim修飾符可以過濾內容左右兩邊的空格
5.6值繫結
初看Vue官方值繫結的時候，我很疑惑：what the hell is that？
但是仔細閱讀之後，發現很簡單，就是動態的給value賦值而已：
我們前面的value中的值，可以回頭去看一下，都是在定義input的時候直接給定的。
但是真實開發中，這些input的值可能是從網路獲取或定義在data中的。
所以我們可以通過v-bind:value動態的給value繫結值。
這不就是v-bind嗎？
這不就是v-bind在input中的應用嗎？搞的我看了很久，搞不清他想講什麼。
這裡不再給出對應的程式碼，因為會用v-bind，就會值繫結的應用了。
六. 元件化開發
6.1. 認識元件化
什麼是元件化
人面對複雜問題的處理方式：
任何一個人處理資訊的邏輯能力都是有限的
所以，當面對一個非常複雜的問題時，我們不太可能一次性搞定一大堆的內容。
但是，我們人有一種天生的能力，就是將問題進行拆解。
如果將一個複雜的問題，拆分成很多個可以處理的小問題，再將其放在整體當中，你會發現大的問題也會迎刃而解。
元件化也是類似的思想：
如果我們將一個頁面中所有的處理邏輯全部放在一起，處理起來就會變得非常複雜，而且不利於後續的管理以及擴充套件。
但如果，我們講一個頁面拆分成一個個小的功能塊，每個功能塊完成屬於自己這部分獨立的功能，那麼之後整個頁面的管理和維護就變得非常容易了。
Vue元件化思想
元件化是Vue.js中的重要思想
它提供了一種抽象，讓我們可以開發出一個個獨立可複用的小元件來構造我們的應用。
任何的應用都會被抽象成一顆元件樹。
元件化思想的應用：
有了元件化的思想，我們在之後的開發中就要充分的利用它。
儘可能的將頁面拆分成一個個小的、可複用的元件。
這樣讓我們的程式碼更加方便組織和管理，並且擴充套件性也更強。
所以，元件是Vue開發中，非常重要的一個篇章，要認真學習。
6.2. 元件的基本使用
註冊元件的基本步驟
元件的使用分成三個步驟：
建立元件構造器
註冊元件
使用元件。
我們來看看通過程式碼如何註冊元件
檢視執行結果
和直接使用一個div看起來並沒有什麼區別。
但是我們可以設想，如果很多地方都要顯示這樣的資訊，我們是不是就可以直接使用
註冊元件步驟解析
這裡的步驟都代表什麼含義呢？
1.Vue.extend()：
呼叫Vue.extend()建立的是一個元件構造器。
通常在建立元件構造器時，傳入template代表我們自定義元件的模板。
該模板就是在使用到元件的地方，要顯示的HTML程式碼。
事實上，這種寫法在Vue2.x的文件中幾乎已經看不到了，它會直接使用下面我們會講到的語法糖，但是在很多資料還是會提到這種方式，而且這種方式是學習後面方式的基礎。
2.Vue.component()：
呼叫Vue.component()是將剛才的元件構造器註冊為一個元件，並且給它起一個元件的標籤名稱。
所以需要傳遞兩個引數：1、註冊元件的標籤名 2、元件構造器
3.元件必須掛載在某個Vue例項下，否則它不會生效。（見下頁）
我們來看下面我使用了三次
而第三次其實並沒有生效：
6.3. 全域性元件和區域性元件
當我們通過呼叫Vue.component()註冊元件時，元件的註冊是全域性的
這意味著該元件可以在任意Vue示例下使用。
如果我們註冊的元件是掛載在某個例項中, 那麼就是一個區域性元件
6.4. 父元件和子元件
在前面我們看到了元件樹：
元件和元件之間存在層級關係
而其中一種非常重要的關係就是父子元件的關係
我們來看通過程式碼如何組成的這種層級關係：
父子元件錯誤用法：以子標籤的形式在Vue例項中使用
因為當子元件註冊到父元件的components時，Vue會編譯好父元件的模組
該模板的內容已經決定了父元件將要渲染的HTML（相當於父元件中已經有了子元件中的內容了）
類似這種用法，
6.5. 註冊的語法糖
在上面註冊元件的方式，可能會有些繁瑣。
Vue為了簡化這個過程，提供了註冊的語法糖。
主要是省去了呼叫Vue.extend()的步驟，而是可以直接使用一個物件來代替。
語法糖註冊全域性元件和區域性元件：
6.6.模板的分離寫法
script
template
剛才，我們通過語法糖簡化了Vue元件的註冊過程，另外還有一個地方的寫法比較麻煩，就是template模組寫法。
如果我們能將其中的HTML分離出來寫，然後掛載到對應的元件上，必然結構會變得非常清晰。
Vue提供了兩種方案來定義HTML模組內容：
使用