當前位置：首頁 > 前端技术 > vue >内容正文

vue

二、Vue基础语法学习笔记——事件监听v-on、条件判断（v-if、v-else-if、v-else、v-show）、循环遍历（v-for遍历数组对象，key属性、检测数组更新）、图书案例、双向绑定

發布時間：2024/7/5 vue 27 豆豆

生活随笔收集整理的這篇文章主要介紹了二、Vue基础语法学习笔记——事件监听v-on、条件判断（v-if、v-else-if、v-else、v-show）、循环遍历（v-for遍历数组对象，key属性、检测数组更新）、图书案例、双向绑定小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

四、事件監聽

在前端開發中，我們需要經常和用于交互。
這個時候，我們就必須監聽用戶發生的時間，比如點擊、拖拽、鍵盤事件等等
在Vue中如何監聽事件呢？使用v-on指令

v-on介紹
作用：綁定事件監聽器
縮寫：@
預期：Function | Inline Statement | Object
參數：event

下面，我們就具體來學習v-on的使用。

1.v-on基礎

這里，我們用一個監聽按鈕的點擊事件，來簡單看看v-on的使用
下面的代碼中，
我們使用了v-on:click="counter++”
另外，我們可以將事件指向一個在methods中定義的函數

注：v-on也有對應的語法糖：
v-on:click可以寫成@click

2.v-on參數

當通過methods中定義方法，以供@click調用時，需要注意參數問題：

情況一：如果該方法不需要額外參數，那么方法后的()可以不添加。
但是注意：如果方法本身中有一個參數，那么會默認將原生事件event參數傳遞進去
情況二：如果需要同時傳入某個參數，同時需要event時，可以通過$event傳入事件。

3.v-on修飾符

在某些情況下，我們拿到event的目的可能是進行一些事件處理。

Vue提供了修飾符來幫助我們方便的處理一些事件：

stop - 調用 event.stopPropagation()。

prevent - 調用 event.preventDefault()。

{keyCode | keyAlias} - 只當事件是從特定鍵觸發時才觸發回調。

native - 監聽組件根元素的原生事件。

once - 只觸發一次回調。

五、條件判斷

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

條件渲染案例:
我們來做一個簡單的小案例：
用戶再登錄時，可以切換使用用戶賬號登錄還是郵箱地址登錄。
類似如下情景：

案例中存在的小問題：

小問題：
如果我們在有輸入內容的情況下，切換了類型，我們會發現文字依然顯示之前的輸入的內容。
但是按道理講，我們應該切換到另外一個input元素中了。
在另一個input元素中，我們并沒有輸入內容。
為什么會出現這個問題呢？

問題解答：
這是因為Vue在進行DOM渲染時，出于性能考慮，會盡可能的復用已經存在的元素，而不是重新創建新的元素。
在上面的案例中，Vue內部會發現原來的input元素不再使用，直接作為else中的input來使用了。

解決方案：

如果我們不希望Vue出現類似重復利用的問題，可以給對應的input添加key
并且我們需要保證key的不同

2. v-show

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

六、循環遍歷

1.v-for遍歷數組

當我們有一組數據需要進行渲染時，我們就可以使用v-for來完成。

v-for的語法類似于JavaScript中的for循環。
格式如下：item in items的形式。

我們來看一個簡單的案例：

如果在遍歷的過程中不需要使用索引值
v-for="item in names"
依次從names中取出item，并且在元素的內容中，我們可以使用Mustache語法，來使用item
如果在遍歷的過程中，我們需要拿到元素在數組中的索引值呢？
語法格式：v-for=(item, index) in items
其中的index就代表了取出的item在原數組的索引值。

2.v-for遍歷對象

v-for可以用戶遍歷對象：
比如某個對象中存儲著你的個人信息，我們希望以列表的形式顯示出來。

3.組件的key屬性

key的作用主要是為了高效的更新虛擬DOM

4.檢測數組更新

因為Vue是響應式的，所以當數據發生變化時，Vue會自動檢測數據變化，視圖會發生對應的更新。
Vue中包含了一組觀察數組編譯的方法，使用它們改變數組也會觸發視圖的更新。

push() ：在數組最后面添加元素，可傳入1個或者多個參數

pop()：刪除數組中的最后一個元素

shift()：刪除數組中的第一個元素

unshift()：在數組最前面添加元素

splice()：刪除元素/插入元素/替換元素

sort()：正序排列

reverse()：倒序排列

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="app"><ul><li v-for="item in letters">{{item}}</li></ul><button @click="btnClick">按鈕</button> </div><script src="../js/vue.js"></script> <script>const app = new Vue({el: '#app',data: {letters: ['A','B','C','D','E']},methods:{btnClick() {// 0注意：通過索引值修改數組中的元素(無法做到響應式，數組的內容改變時頁面內容不會響應式變化)// this.letters[0] = 'bbbb'/*以下幾種改變數組的方法是響應式的*/// 1.push方法// this.letters.push('AAA');// this.letters.push('AAA','bbbb');// 2.pop():刪除數組中的最后一個元素// this.letters.pop();// 3.shift()：刪除數組中的第一個元素// this.letters.shift();// 4.unshift()：在數組最前面添加元素// this.letters.unshift('aaaa');// this.letters.unshift('aaaa','BBBB');// 5.// splice的作用：刪除元素/插入元素/替換元素// 刪除元素：第二個參數傳入你要刪除幾個元素(如果沒有傳參數，就刪除后面所有的元素)// 替換元素：第二個參數，表示我們要替換幾個元素，后面的參數是用來替換前面的元素// 插入元素：第二個參數，傳入0，并且后面跟上要插入的元素// splice(start):// this.letters.splice(2,2,'ab','cz');// this.letters.splice(2,0,'X','Y')// 6.sort()// this.letters.sort()// 7.reverse()// this.letters.reverse()// set(要修改的對象,索引值，修改后的值)Vue.set(this.letters,0,'bbbbbbbb')}}}) </script></body> </html>

七、階段案例

圖書購物車

代碼實現：HTML、CSS：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="style.css"> </head> <body><div id="app"><div v-if="books.length"><table><thead><tr><th></th><th>書籍名稱</th><th>出版日期</th><th>價格</th><th>購買數量</th><th>操作</th></tr></thead><tbody><tr v-for="(item,index) in books"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.date}}</td><td>{{item.price | showPrice}}</td><td><button @click="decrement(index)" v-bind:disabled="item.count <= 1">-</button>{{item.count}}<button @click="increment(index)">+</button></td><td><button @click="removeHandle(index)">移除</button></td></tr></tbody></table><h2>總價格：{{totalPrice | showPrice}}</h2></div><h2 v-else>購物車為空！</h2> </div><script src="../js/vue.js"></script> <script src="main.js"></script> </body> </html> table {border: 1px solid #e9e9e9;border-collapse: collapse;border-spacing: 0; }th, td {padding: 8px 16px;border: 1px solid #e9e9e9;text-align: center; }th {background-color: #f7f7f7;color: #5c6b77;font-weight: 600; } const app = new Vue({el:'#app',data:{books: [{id: 1,name: '《Python入門》',date: '2020-10',price: 85.00,count: 36},{id: 2,name: '《Vue從入門到精通》',date: '2020-10',price: 99.00,count: 22},{id: 3,name: '《算法導論》',date: '2020-08',price: 32.00,count: 10},{id: 4,name: '《軟件工程》',date: '2020-02',price: 105.00,count: 50}]},methods: {getFinalPrice(price) {return '￥' + price.toFixed(2);},increment(index) {console.log('increment',index);this.books[index].count++;},decrement(index) {console.log('decrement',index);this.books[index].count--;},removeHandle(index) {this.books.splice(index,1);}},filters: {showPrice(price) {return '￥' + price.toFixed(2);}},computed: {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) {totalPrice += this.books[i].price * this.books[i].count;}return totalPrice;*//*// 3. for(let item of this.books)let totalPrice = 0;for (let item of this.books) {totalPrice += item.price * item.count;}return totalPrice;*/// 4.reducereturn this.books.reduce(function (preValue,book) {return preValue + book.price * book.count},0)}}})// 編程范式：命令式編程/聲明式編程 // 編程范式：面向對象編程（第一公民：對象）/函數式編程（第一公民：函數） // filter /map /reduce // filter 中的回調函數有一個要求：必須返回一個boolean值 // true :當返回true時，函數內部會自動將這次回調的n加入到心得數組中 // false：當返回false時，函數內部會過濾掉這次的n const nums = [10,20,111,222,444,40,50]/*let total = nums.filter(function (n) {return n < 100; }).map(function (n) {return n * 2; }).reduce(function (preValue,n) {return preValue + n; },0) console.log(total);*/ let total = nums.filter(n => n < 100).map(n => n * 2).reduce((preValue,n) => preValue + n) console.log(total); /* // 1. filter函數的使用 // 10， 20， 40， 50 let newNums = nums.filter(function (n) {return n < 100; }) console.log(newNums);// 2. map函數的使用 // 20,40,80,100 let new2Nums = newNums.map(function (n) {return n*2; }) console.log(new2Nums);// 3. reduce函數的使用 // educe函數的作用：對數組中所有的內容進行匯總 /!* // new2Nums.reduce(function (preValue,n) { // return 100; // },0) // 第一次：preValue=0,n=20 // 第二次：preValue=100,n=40 // 第三次：preValue=100,n=80 // 第四次：preValue=100,n=100 *!/let total = new2Nums.reduce(function (preValue,n) {return preValue + n; },0) // 第一次：preValue=0,n=20 // 第二次：preValue=20,n=40 // 第三次：preValue=60,n=80 // 第四次：preValue=140,n=100 // 第五次：preValue + n=240 console.log(total); */

八、雙向綁定v-model

1.表單綁定v-model

表單控件在實際開發中是非常常見的。
特別是對于用戶信息的提交，需要大量的表單。
Vue中使用v-model指令來實現表單元素和數據的雙向綁定。

案例的解析：

當我們在輸入框輸入內容時
因為input中的v-model綁定了message，所以會實時將輸入的內容傳遞給message，message發生改變。
當message發生改變時，因為上面我們使用Mustache語法，將message的值插入到DOM中，所以DOM會發生響應的改變。
所以，通過v-model實現了雙向的綁定。

當然，我們也可以將v-model用于textarea元素

2.v-model原理

v-model其實是一個語法糖，它的背后本質上是包含兩個操作：

v-bind綁定一個value屬性

v-on指令給當前元素綁定input事件

也就是說下面的代碼：等同于下面的代碼：

3.v-model：radio

當存在多個單選框時

4.v-model：checkbox

復選框分為兩種情況：單個勾選框和多個勾選框

單個勾選框：
v-model即為布爾值。
此時input的value并不影響v-model的值。

多個復選框：
當是多個復選框時，因為可以選中多個，所以對應的data中屬性是一個數組。
當選中某一個時，就會將input的value添加到數組中。

5.v-model：select

和checkbox一樣，select也分單選和多選兩種情況。
單選：只能選中一個值。

v-model綁定的是一個值。
當我們選中option中的一個時，會將它對應的value賦值到mySelect中
多選：可以選中多個值。
v-model綁定的是一個數組。
當選中多個值時，就會將選中的option對應的value添加到數組mySelects中

6.值綁定

初看Vue官方值綁定的時候，我很疑惑：what the hell is that？
但是仔細閱讀之后，發現很簡單，就是動態的給value賦值而已：
我們前面的value中的值，可以回頭去看一下，都是在定義input的時候直接給定的。
但是真實開發中，這些input的值可能是從網絡獲取或定義在data中的。

所以我們可以通過v-bind:value動態的給value綁定值。
這不就是v-bind嗎？

這不就是v-bind在input中的應用嗎？搞的我看了很久，搞不清他想講什么。
這里不再給出對應的代碼，因為會用v-bind，就會值綁定的應用了。