當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

vue2 （一）

發(fā)布時(shí)間：2024/3/13 vue 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue2 （一）小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

一、vue入門

1.1 vue是一個(gè)漸進(jìn)式框架、

可以將vue作為一部分作為應(yīng)用的一部分嵌入。帶來更豐富的交互體驗(yàn)。
Core（vue核心庫）+Vue-router（路由）+Vuex（vue狀態(tài)管理）：vue全家桶

1.2 vue有很多高級(jí)功能。

1.3 安裝

1.4 vue的好處

實(shí)現(xiàn)了數(shù)據(jù)與界面真正的分離。

1.5 vue的MVVM：Model View Model View

?1.6 vue的options選項(xiàng)

?1.7 vue的生命周期

二、基本語法：

2.1 mustache語法中，不僅可以寫變量，也可以寫簡單的表達(dá)式。

2.2 一些簡單的語法：

（1）v-once:

該指令表示元素和組件只會(huì)渲染一次，不會(huì)隨著數(shù)據(jù)的改變而改變

<h2 v-once>{{message}}</h2>

（2）v-html

將string按照字符串格式進(jìn)行解析，并渲染

?（3）v-text

和mustache比較相似，都是用于將數(shù)據(jù)顯示在界面中。

但是不如mustache靈活。

（4）v-pre

用于顯示原本的mustache語法。

（5）v-cloak? （一般不用）

當(dāng)網(wǎng)頁比較卡頓時(shí)，可能先顯示mustache語句，再進(jìn)行渲染，因此，使用v-cloak，可以先顯示v-cloak顯示內(nèi)容，再用mustanche來渲染。

在vue解析之前，div中有一個(gè)屬性v-cloak，在vue解析之后，該屬性就會(huì)消失。

?2.3 v-bind

語法糖：：

2.3.1 使用v-bind綁定href 和src屬性

在做網(wǎng)頁進(jìn)行渲染時(shí)，很多時(shí)候，圖片已經(jīng)鏈接不是寫死的，而是服務(wù)器端發(fā)送過來的，因此可以使用v-bind進(jìn)行渲染。（注意v-bind：“參數(shù)”? 不能有空格）

2.3.2 .1使用v-bind屬性綁定class:對(duì)象方法

（1）通過{? }綁定一個(gè)或者多個(gè)類

class中是一個(gè)對(duì)象，以class名：boolean的形式存在。true表示，該class添加到該標(biāo)簽上，false表示不添加到該標(biāo)簽上。

<h2 v-bind:class="{activate: true, line:false}">{{message}}</h2>

通常情況下，true和false也寫到vue的data變量中。

<h2 v-bind:class="{activate: isactivate, line: isline}">{{message}}</h2>

(2) 可以和普通的類同時(shí)并存

（3）有時(shí){...} 中的數(shù)據(jù)太長了，因此可以放在methods中。

<body><div><h2>{{message}}</h2><h2 v-once>{{message}}</h2><img v-bind:src="url"><h2 v-bind:class="getClass()">{{message}}</h2></div><script src = "../js/vue.js"></script><script>const app = new Vue({el: document.querySelector('div'),data: {message: "nihaoa",url: 'test.png',isActivate: true,isLine: true},methods: {getClass: function(){return {activate: this.isActivate, line: this.isLine}}}});</script> </body>

2.3.2 .2使用v-bind屬性綁定class:數(shù)組方法

數(shù)組方法使用的比較少，因?yàn)轭惷菍懰赖摹５韧赾lass = "title activate line"

<h2 class="title" v-bind:class="['activate', 'line']">{{message}}</h2>

但是如果是服務(wù)器端傳來的類名，可以使用該寫法。（注意數(shù)組中帶單引號(hào)，表示字符串，不帶單引號(hào)，表示變量）

<h2 class="title" v-bind:class="[activate, line]">{{message}}</h2>

?同樣，也可以放在methods中表示，此處不再演示。

2.3.3 使用v-bind綁定style屬性

對(duì)象寫法：?

<h2 v-bind:style="{fontSize:'100px', color: 'red'}">{{message}}</h2> <h2 v-bind:style="{fontSize: finalFont, color: finalColor}">{{message}}</h2> <h2 v-bind:style="{fontSize: finalSize+'px', color: finalColor}">{{message}}</h2>

數(shù)組寫法：（一般不用！！）

2.4 計(jì)算屬性

{{}}稱為插值語法

2.4.1 了解計(jì)算屬性；

計(jì)算屬性是對(duì)于data的重新處理。

<body><div><h2>{{LastName}} {{firstName}}</h2> <h2>{{fullName}}</h2><h2>{{getFullName()}}</h2> <h2>書的總價(jià)格為：{{totalPrice}}</h2> </div><script src="../js/vue.js"></script><script>const app = new Vue({el: 'div',data: {firstName: "Xuan",LastName: "晴天",books: [{name: '三國演技', price: 100, number: 10},{name: '水滸傳', price: 100, number: 10},{name: '西游記', price: 100, number: 10},{name: '你好舊時(shí)光', price: 100, number: 10},]},computed: {fullName: function(){return this.LastName + ' ' + this.firstName; },totalPrice: function() {let sum = 0;// for(let i = 0; i < this.books.length; i++) {// sum += this.books[i].price;// }// for(let i in this.books) {// sum += this.books[i].price;// }for(let i of this.books) {sum += i.price;}return sum;}},methods: {getFullName: function(){return this.LastName + ' ' + this.firstName;}}})</script> </body>

案例：點(diǎn)擊電影名稱，電影名稱變色。設(shè)置一個(gè)currentIndex。只有currentIndex === index時(shí)，才把類掛載到其電影名稱上。

<div><ul><li v-for="(item,index) in movies" :class="{activate: index === isCurrentIndex}" v-on:click="getIndex(index)">{{item}}</li></ul></div><script src="../js/vue.js"></script><script>const app = new Vue({el: 'div',data: {movies: ["海王", '變形金剛','你好舊時(shí)光',"小情書"],isCurrentIndex: -1},methods: {getIndex: function(index) {this.isCurrentIndex = index;}}})</script> </body>

2.4.2 計(jì)算屬性的getter和setter

本身計(jì)算屬性是個(gè)對(duì)象，對(duì)象中有g(shù)et和set兩個(gè)方法，但是計(jì)算屬性一般不用set方法，是個(gè)只讀屬性，因此，可以將set方法省略。

computed: {fullName: function(){return this.LastName + ' ' + this.firstName; },// fullName: {// set: function(){// },// get: function(){// return this.LastName + ' ' + this.firstName;// }// }}

2.4.3 計(jì)算屬性和methods的對(duì)比（緩存問題）

計(jì)算屬性的get方法只執(zhí)行一次，將結(jié)果存到了緩存中，如果檢測到get中用到的屬性發(fā)生了變化，會(huì)重新執(zhí)行。

而method方法，每次都調(diào)用。因此，計(jì)算屬性更快一些。

2.5 v-on

2.5.1 v-on傳遞參數(shù)

如果不需要傳遞參數(shù)，小括號(hào)可以不加。小括號(hào)不加時(shí)，默認(rèn)傳遞了event參數(shù)。

如果加了括號(hào)，但是沒有傳遞參數(shù)，同時(shí)方法需要參數(shù)，此時(shí)輸出的是undefined；如果沒有加括號(hào)，同時(shí)方法需要參數(shù)，此時(shí)輸出的是event。

手動(dòng)傳入時(shí)用$event。

<body><div><button v-on:click="btnClick">按鈕一</button> <button @click="btnClick()">按鈕二</button> <button @click="btnClick2('123',$event)">按鈕二</button> </div><script src="../js/vue.js"></script><script>const app = new Vue({el: 'div',data: {},methods: {btnClick(abc){console.log(abc);},btnClick2(abc,event){console.log(abc);console.log(event);}}})</script> </body>

2.5.2 v-on修飾符

（1）.stop,阻止冒泡，否則點(diǎn)擊button，兩個(gè)店家函數(shù)都會(huì)執(zhí)行

<div @click="btnClick()">jhjhjhj<button @click.stop="btnClick3()">按鈕4</button> </div>

（2）.prevent,阻止默認(rèn)事件

阻止了submit的默認(rèn)提交事件，當(dāng)點(diǎn)擊按鈕時(shí)，就不會(huì)提交，而是執(zhí)行點(diǎn)擊事件

（3）鍵盤的監(jiān)聽事件

如果不加enter，只要點(diǎn)擊鍵盤，就會(huì)觸發(fā)該事件（具體說，是鍵盤彈起時(shí)觸發(fā)事件）。加了enter以后，只有松開enter鍵時(shí)，才會(huì)觸發(fā)事件。

（4）.once,只調(diào)用一次。

2.6 v-if和v-else使用

有時(shí)為了代碼整潔，也可以用計(jì)算屬性完成某些功能

<body><div><h1 v-if="score>=90">優(yōu)秀</h1><h1 v-else-if="score>=80">良好</h1><h1 v-else>及格</h1><h1>{{result}}</h1></div><script src="../js/vue.js"></script><script>var app = new Vue({el: 'div',data: {score: 100},computed: {result(){let resultShow = '';if(this.score >= 90) {resultShow = '優(yōu)秀';} else if(this.score>=80) {resultShow = '良好';} else {resultShow = '及格';}return resultShow;}}})</script> </body>

案例：點(diǎn)擊按鈕切換用戶登錄界面：v-if顯示不同的input

設(shè)置一個(gè)key作為標(biāo)識(shí)，如果名字相同，表示可以被復(fù)用。名字不同，則不可以被復(fù)用。

?2.7 v-show

v-if為false時(shí)，在DOM中不存在，為true時(shí)，dom為重新創(chuàng)建該元素。

而v-show，為false時(shí)，只是為該元素添加了行內(nèi)樣式：dispaly：none

?2.8 v-for循環(huán)遍歷

（1）數(shù)組遍歷：可以只寫item

v-for = "(item, index) in items"

(2)對(duì)象遍歷：可以只寫value

v-for = "(value, key) in items"

?在使用v-for時(shí)，推薦使用key屬性。但是key必須是唯一的。不能重復(fù)

?在插入元素時(shí)，會(huì)先將key與li中間的元素item作對(duì)比，如果相同就復(fù)用。因此在插入節(jié)點(diǎn)F時(shí)，只創(chuàng)建節(jié)點(diǎn)F，ABCDE都是復(fù)用之前的節(jié)點(diǎn)。

2.9 哪些數(shù)組的方法是響應(yīng)式的。

當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，頁面中的數(shù)據(jù)也會(huì)隨之改變。-->因?yàn)?#xff0c;數(shù)據(jù)是響應(yīng)式的，vue會(huì)對(duì)數(shù)據(jù)進(jìn)行監(jiān)聽，因此，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，會(huì)創(chuàng)建虛擬DOM，虛擬DOM與真實(shí)DOM會(huì)進(jìn)行比較，然后對(duì)其做出調(diào)整。

以下數(shù)組的方法是可以進(jìn)行響應(yīng)式的：

push()? ?在數(shù)組的后面添加元素。可以同時(shí)添加多個(gè)元素
pop()? ?刪除數(shù)組中的最后一個(gè)元素
shift()? 刪除數(shù)組中的第一個(gè)元素
unshift()? ?在數(shù)組的前面添加元素，可以添加多個(gè)元素
splice()? ?可以刪除元素/添加元素/替換元素。

（1）刪除元素：splice(start,? 刪除元素個(gè)數(shù))，如果沒有第二個(gè)參數(shù)，會(huì)第一個(gè)元素以及后面的元素全部刪除。

（2）替換元素：splice(start,? 替換元素個(gè)數(shù)m，替換1，替換2，...)，相當(dāng)于刪除了從start開始，刪除了m個(gè)元素，并追加了后面的替換元素

（3）插入元素：splice(start,? 0，元素1，元素2，...)? ?道理是一樣的。

? ?sort()? 排序，是可以傳遞參數(shù)的（函數(shù)）
reverse()? 反轉(zhuǎn)

注意：通過元素的索引修改數(shù)組，不是響應(yīng)的。因?yàn)関ue沒有對(duì)其進(jìn)行監(jiān)聽。因此，在開發(fā)中，如果確實(shí)有這樣的需要，可以通過以下兩種方式：

通過splice(start, index, value)進(jìn)行替換，就可以產(chǎn)生響應(yīng)了。
通過Vue的一個(gè)函數(shù)。Vue.set(數(shù)組，索引值，修改后的值)

購物車案例：

vue案例1：購物車案例_阿旋要畢業(yè)~的博客-CSDN博客1.實(shí)現(xiàn)效果：2.涉及到的知識(shí)點(diǎn)：toFixed函數(shù)、過濾器、reduce高階函數(shù)、v-bind:disabled、v-if3.代碼：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewhttps://blog.csdn.net/xuan971130/article/details/124309340復(fù)習(xí)：map、filter、reduce函數(shù)

filter：用于對(duì)數(shù)組中的數(shù)據(jù)做篩選。filter的回調(diào)函數(shù)返回的是true和false，返回true的元素，將會(huì)被篩選出來。

map：用于對(duì)數(shù)組中的元素做批量化處理，比如統(tǒng)一乘以2.

reduce：用于對(duì)數(shù)組中的數(shù)據(jù)進(jìn)行匯總。參數(shù)有兩個(gè)：第一個(gè)為回調(diào)函數(shù)callback(preValue, value),第二個(gè)為preValue的初始值。callback函數(shù)，每次返回的值，為下一個(gè)回調(diào)函數(shù)preValue的值。

案例：

2.10 v-model

2.10.1 與表單一起使用實(shí)現(xiàn)雙向綁定

實(shí)現(xiàn)原理：在input元素上，使用v-bind綁定value值等于message（當(dāng)message改變時(shí)，value值會(huì)改變），然后使用v-on:input響應(yīng)事件,監(jiān)聽value值的改變，使得message也相應(yīng)地改變（當(dāng)value值改變時(shí)，message也相應(yīng)地改變）。

<body><div><input type="text" name="" id="" :value="message" @input="message = $event.target.value">{{message}}<input type="text" name="" id="" v-model="message"></div><script src="../vue學(xué)習(xí)/js/vue.js"></script><script>const app = new Vue({el: 'div',data: {message: '你好啊'}})</script> </body>

2.10.2? v-model和radio的結(jié)合使用

?使用radio時(shí)，同一組元素要具有相同的name.如果綁定了相同的v-model,name可以不設(shè)置。

<body><div><input type="radio" name="sex" id="" value="男" v-model="sex">男<input type="radio" name="sex" id="" value="女" v-model="sex">女<h4>您的性別是：{{sex}}</h4></div><script src="../vue學(xué)習(xí)/js/vue.js"></script><script>const app = new Vue({el: 'div',data: {sex: '男'} })</script> </body>

2.10.3? v-model和checkbox的結(jié)合使用

單選框綁定的是布爾值，多選框綁定的是數(shù)組

<body><div><label for="agree"><input type="checkbox" id="agree" v-model="isSelect">我同意該協(xié)議</label><h4>您的選擇是：{{isSelect}}</h4><button :disabled="!isSelect">下一步</button><label for="dance"><input type="checkbox" name="" id="dance" value="跳舞" v-model="hobbies">跳舞</label><label for="play"><input type="checkbox" name="" id="play" value="玩耍" v-model="hobbies">玩耍</label><label for="sing"><input type="checkbox" name="" id="sing" value="唱歌" v-model="hobbies">唱歌</label><label for="study"><input type="checkbox" name="" id="study" value="學(xué)習(xí)" v-model="hobbies">學(xué)習(xí)</label><h4>您的愛好是：{{hobbies}}</h4></div><script src="../vue學(xué)習(xí)/js/vue.js"></script><script>const app = new Vue({el: 'div',data: {isSelect: false,hobbies: []}})</script> </body>

2.10.4 v-model 與 select

單選時(shí)綁定的是一個(gè)字符串，多選時(shí)綁定的是數(shù)組。

<body><div><select name="fruit" v-model="isSelect"><option value="香蕉">香蕉</option><option value="蘋果">蘋果</option><option value="榴蓮">榴蓮</option><option value="櫻桃">櫻桃</option></select><h4>您的選擇是：{{isSelect}}</h4><select name="fruits" v-model="fruits" multiple><option value="香蕉">香蕉</option><option value="蘋果">蘋果</option><option value="榴蓮">榴蓮</option><option value="櫻桃">櫻桃</option></select><h4>您的愛好是：{{fruits}}</h4></div><script src="../vue學(xué)習(xí)/js/vue.js"></script><script>const app = new Vue({el: 'div',data: {isSelect: '蘋果',fruits: []}})</script> </body>

2.10.5 v-model 值綁定

動(dòng)態(tài)加載數(shù)組中的內(nèi)容

<body><div><label v-for="item in fruits" :for="item"><input type="checkbox" :id="item" :value="item" v-model="likeFruits">{{item}}</label><h4>您喜歡的水果是：{{likeFruits}}</h4><select name="sports" v-model="likeSports" multiple><option v-for="item in sports" :value="item">{{item}}</option> </select><h4>您喜歡的運(yùn)動(dòng)是：{{likeSports}}</h4></div><script src="../vue學(xué)習(xí)/js/vue.js"></script><script>const app = new Vue({el: 'div',data: {sports: ['跳舞','乒乓球','羽毛球','跑步'],likeSports: [],fruits: ['香蕉','蘋果','榴蓮','櫻桃'],likeFruits: []}})</script> </body>

2.10.6 v-model 的修飾符

<body><div><input type="text" name="" id="" v-model.lazy="text1"><h2>{{text1}}</h2><input type="number" name="" id="" v-model.number="text2"><h2>{{text2}}</h2><input type="text" name="" id="" v-model.trim="text3"><h2>{{text3}}</h2></div><script src="../../vue學(xué)習(xí)/js/vue.js"></script><script>const app = new Vue({el: 'div',data: {text1: '你好啊',text2: 123,text3: 'aaaaa'}})</script> </body>

總結(jié)

以上是生活随笔為你收集整理的vue2 （一）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：网卡的基本构成
下一篇： html5倒计时秒杀怎么做,vue 设