Vue.js 3.x前端開發(fā)技術(shù)與實(shí)戰(zhàn) 課件 第2章Vue.js基礎(chǔ)_第1頁
Vue.js 3.x前端開發(fā)技術(shù)與實(shí)戰(zhàn) 課件 第2章Vue.js基礎(chǔ)_第2頁
Vue.js 3.x前端開發(fā)技術(shù)與實(shí)戰(zhàn) 課件 第2章Vue.js基礎(chǔ)_第3頁
Vue.js 3.x前端開發(fā)技術(shù)與實(shí)戰(zhàn) 課件 第2章Vue.js基礎(chǔ)_第4頁
Vue.js 3.x前端開發(fā)技術(shù)與實(shí)戰(zhàn) 課件 第2章Vue.js基礎(chǔ)_第5頁
已閱讀5頁,還剩18頁未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

教學(xué)目標(biāo)第2章

Vue.js基礎(chǔ)(5課時(shí))1.理解MVVM模式的工作機(jī)制2.掌握多種類型數(shù)據(jù)綁定的方法3.掌握計(jì)算屬性與方法在使用上的區(qū)別(重點(diǎn))4.學(xué)會(huì)使用偵聽屬性處理數(shù)據(jù)變化的相關(guān)事務(wù)5.理解生命周期鉤子函數(shù)在使用上的差異性6.學(xué)會(huì)定義及使用數(shù)據(jù)對(duì)象7.掌握數(shù)據(jù)中數(shù)組對(duì)象的變異與非變異方法(難點(diǎn))2.1MVVM模式

MVVM是Model-View-ViewModel的簡寫,它是一種基于前端開發(fā)的架構(gòu)模式,其核心是提供對(duì)View和ViewModel的雙向數(shù)據(jù)綁定,這使得ViewModel的狀態(tài)改變可以自動(dòng)傳遞給View,即所謂的數(shù)據(jù)雙向綁定。Angular、React、Vue.js三大主流MVVM框架

在MVVM架構(gòu)下,View和Model之間并沒有直接的聯(lián)系,而是通過ViewModel進(jìn)行交互,Model和ViewModel之間的交互是雙向的,因此View數(shù)據(jù)的變化會(huì)同步到Model中,而Model數(shù)據(jù)的變化也會(huì)立即反映到View上。ViewModel通過雙向數(shù)據(jù)綁定把View層和Model層連接了起來,而View和Model之間的同步工作完全是自動(dòng)的,無需人為干涉。

因此開發(fā)者只需關(guān)注業(yè)務(wù)邏輯,不需要手動(dòng)操作DOM,不需要關(guān)注數(shù)據(jù)狀態(tài)的同步問題,復(fù)雜的數(shù)據(jù)狀態(tài)維護(hù)完全由MVVM來統(tǒng)一管理。

2.1.2MVVM模式的前端框架發(fā)展趨勢從/@angular/core-vs-angular-vs-react-vs-vue網(wǎng)站上可以查看下載量和使用狀態(tài)等數(shù)據(jù),其下載量和狀態(tài)對(duì)比結(jié)果如下圖所示。2.1.3MVVM模式的應(yīng)用(1)

<!--定義View

-->

<div

id="app">

<h3>教材列表</h3>

<ol>

<li

v-for="book

in

books">{{book.bookName}}</li>

</ol>

</div>

案例演示:【例2-1】MVVM模式的應(yīng)用

<script>

//定義JS數(shù)組對(duì)象Model,并作為組件內(nèi)data選項(xiàng)中的books的引用值

var

myModel

=

[

{

bookName:

"Web前端開發(fā)技術(shù)"

},

{

bookName:

"JSP程序設(shè)計(jì)"

},

{

bookName:

"計(jì)算機(jī)網(wǎng)絡(luò)"

},

];

//

創(chuàng)建Vue實(shí)例app,也稱為ViewModel,用來連接View與Model

const

app

=

Vue.createApp({

//

定義data選項(xiàng)

data()

{

return

{

books:

myModel,

//

引用JS數(shù)組對(duì)象

};

},

});

app.mount("#app");

//

掛載到DOM上

</script>

2.1.3MVVM模式的應(yīng)用(2)案例演示:【例2-2】數(shù)據(jù)雙向綁定與MVVM模式解析<div

id="app">

<fieldset>

<legend>圖書信息</legend>

圖書名稱:<input

type="text"

v-model="bookName"

placeholder="輸入圖書名稱"><br

/>

出版社:<input

type="text"

v-model="press"

placeholder="輸入出版社"><br

/>

定價(jià):<input

type="number"

v-model="price"

placeholder="輸入定價(jià)"><br

/><br

/>

<input

type="submit"

value="提交">

<input

type="reset"

value="重置">

<p>圖書名稱:{{bookName}}、出版社:{{press}}、定價(jià):{{price}}</p>

</div>

<script

type="text/javascript">

const

app

=

Vue.createApp({

//

Vue實(shí)例app

data()

{

return

{

bookName:

'Vue.js前端框架技術(shù)與實(shí)戰(zhàn)',

//給定初始值,視圖同步變化

press:

'',

//為空串

price:

0.0

//為0

}

}

});

app.mount('#app');

//

掛載到DOM上

</script>

2.2數(shù)據(jù)綁定與插值Vue.js中插值分為文本、HTML代碼、屬性、JavaScript表達(dá)式等多種形式。文本插值:<p>我的姓名是{{myName}}。</p>HTML代碼:

<p>v-html指令:<spanv-html="htmlCode"></span></p>屬性插值:<av-bind:href="url"v-bind:title="title">中國教育和科研計(jì)算機(jī)網(wǎng)</a>JavaScript表達(dá)式插值:<標(biāo)記名稱>{{JS合法表達(dá)式}}</標(biāo)記名稱><標(biāo)記名稱>{{5+5*3}}</標(biāo)記名稱><標(biāo)記名稱>{{Math.pow(x,2)+5}}</標(biāo)記名稱><標(biāo)記名稱>{{yesNo?'確定':'取消'}}</標(biāo)記名稱><標(biāo)記名稱>{{message.split('').reverse().join('')}}</標(biāo)記名稱>數(shù)據(jù)綁定最常見的形式就是使用“Mustache”語法:{{}}。案例演示:【例2-3】插值的綜合應(yīng)用2.3計(jì)算屬性與方法問題導(dǎo)入:當(dāng)模板中插入過多的業(yè)務(wù)邏輯,會(huì)使模板過重且后期難以維護(hù)。<divid='app'>{{information}}--{{information.split('').reverse().join('')}}</div>基本語法//在Vue實(shí)例vm中定義選項(xiàng)computedcomputed:{

businessHandler(){//業(yè)務(wù)邏輯處理代碼returninformation.split('').reverse().join('');

}

【例2-4】計(jì)算屬性的應(yīng)用場景(

vue-2-4.html)。

要求:使用計(jì)算屬性定義maxNumber、minNumber等函數(shù)實(shí)現(xiàn)從給定數(shù)組中找出最大數(shù)和最小數(shù)。2.3.1計(jì)算屬性基礎(chǔ)應(yīng)用解決方案:采用計(jì)算屬性(computed)來處理一些復(fù)雜邏輯時(shí)非常有用。計(jì)算屬性定義為函數(shù)形式,在一個(gè)計(jì)算屬性里可以完成各種復(fù)雜的邏輯,包括運(yùn)算、函數(shù)調(diào)用等,最終返回一個(gè)結(jié)果就可以。2.3.1計(jì)算屬性基礎(chǔ)應(yīng)用

設(shè)計(jì)要求:(1)使用計(jì)算屬性定義maxNumber函數(shù),找出數(shù)組中最大數(shù);(2)使用方法定義minNumber函數(shù),找出數(shù)組中最小數(shù)。比較計(jì)算屬性和方法的差異性。Methods配置選項(xiàng):

methods:{

findMaxNumber(){

this.maxNumber=Math.max(...this.numberArr)

}

},計(jì)算屬性緩存與方法比較計(jì)算屬性和方法區(qū)別:(1)可以將同一函數(shù)定義為一個(gè)方法(而不是計(jì)算屬性)。兩種方式的最終結(jié)果確實(shí)是完全相同的。然而,不同的是計(jì)算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的。只在相關(guān)響應(yīng)式依賴發(fā)生改變時(shí)它們才會(huì)重新求值。computed是局部渲染,而methods是全部渲染。(2)methods必須需要一定的條件去觸發(fā),而computed則不需要,實(shí)時(shí)響應(yīng)。(3)computed依賴緩存,如果不需要經(jīng)常變動(dòng)時(shí),可使用computed;需要經(jīng)常變動(dòng)時(shí),可使用methods。如果需要傳參數(shù),就用methods。102.3.2計(jì)算屬性的setter和gettercomputed屬性默認(rèn)只有g(shù)etter,但Vue允許設(shè)計(jì)人員在需要時(shí)可以為其提供一個(gè)setter。

在computed選項(xiàng)下設(shè)置setter,頁面信息會(huì)立即渲染,并完成更新工作。如果使用methods選項(xiàng),并為其定義相同的方法set(),只有調(diào)用時(shí)才能完成更新工作。//在Vue實(shí)例vm對(duì)象中定義

computed:{

myObject:{//myObject定義為對(duì)象

set:function(newValue){//對(duì)新值進(jìn)行相關(guān)業(yè)務(wù)邏輯處理 },

get:function(){return相關(guān)參數(shù)(表達(dá)式);}}}定義setter時(shí),需要定義成帶參數(shù)的set,參數(shù)為newValue,其值為字符串,渲染時(shí)可從中提取相關(guān)信息即可。必須在computed屬性下,必須定義一個(gè)對(duì)象,如myObject,用于包裹set和get函數(shù)。然后通過賦值語句(或在調(diào)試狀態(tài)下)給myObject賦值,實(shí)現(xiàn)數(shù)據(jù)的變化。案例演示:【例2-5】計(jì)算屬性的setter和getter屬性應(yīng)用實(shí)戰(zhàn)-更新圖書/定價(jià)信息11更新圖書/定價(jià)信息<div

id="app">

<p

v-once>初始信息:圖書名稱/定價(jià):{{bookName}}/{{price}}元</p>

<h4>computed設(shè)置后立即更新:</h4>

<p>圖書名稱/定價(jià):{{bookName}}/{{price}}元</p>

<button

type="button"

v-on:click="set()">set方法更新</button>

<p>圖書名稱/定價(jià):{{bookName}}/{{price}}元</p>

<p

v-once>初始圖書名稱/定價(jià):{{myBooks}}元</p>

<p>更新后圖書名稱/定價(jià):{{myBooks}}元</p>

</div>

<script

type="text/javascript">

const

App

=

{

data()

{

return

{

bookName:

"Web前端開發(fā)技術(shù)",

price:

59.5,

};

},

computed:

{

myBooks:

{

set:

function

(newValue)

{

//

重新設(shè)置

var

newBook

=

newValue.split("

");

this.bookName

=

newBook[0];

this.price

=

newBook[newBook.length

-

1];

},

get:

function

()

{

//

取志愿

return

this.bookName

+

"/"

+

this.price;

},

},

},

methods:

{

set:

function

()

{

//

通過方法來賦值

this.bookName

=

"Vue.js前端框架技術(shù)與實(shí)戰(zhàn)";

this.price

=

69.8;

},

},

};

Vue.createApp(App).mount("#app");

</script>

2.4偵聽屬性watch-1問題導(dǎo)入:有時(shí)需要在數(shù)據(jù)發(fā)生變化時(shí),執(zhí)行一些特定的指令操作,該如何處理呢?解決方案:Vue提供更通用的方法,通過watch選項(xiàng)來響應(yīng)數(shù)據(jù)的變化。watch可以為實(shí)例添加被觀察的對(duì)象,并在對(duì)象被修改時(shí)調(diào)用設(shè)計(jì)人員自定義的方法。watch可以觀察簡單變量、數(shù)組和對(duì)象變化,但使用方法略有不同。2.4.1watch屬性基本用法

在watch選項(xiàng)中,需要將變量changeValue定義為函數(shù)變量,參數(shù)分別為newValue、oldValue。其中newValue是變化后的值,oldValue為變化之前的值。//HTML部分<p>需要偵聽的綁定數(shù)據(jù)變量:{{changeValue}}</p>//在JS部分,Vue組件中定義

watch:{changeValue(newValue,

oldValue){//偵聽數(shù)據(jù)變化需要處理的業(yè)務(wù)邏輯代碼} }//通過實(shí)例修改data中的數(shù)據(jù)constinstance=Vue.createApp(App).mount("#app");instance.changeValue=5000;//立即觸發(fā)偵聽案例演示:【例2-6】微信零錢變更動(dòng)項(xiàng)目實(shí)戰(zhàn)13【例2-6】微信零錢變更動(dòng)項(xiàng)目實(shí)戰(zhàn)

<div

id="app">

<h3>微信錢包變更通知</h3>

<p>微信帳號(hào):202208200111199</p>

<p

v-once>零錢:{{change}}</p>

消費(fèi)支付:<input

type="text"

name=""

id=""

v-model="money"

/>

<button

type="button"

v-on:click="changeMoney()">支付{{money}}元</button>

<p

style="font-size:

22px">

<img

src="wxlq.jpg"

/>消費(fèi)后零錢:{{change}}元

</p>

<h3>以下是消費(fèi)明細(xì)帳</h3>

<hr

/>

</div>

<div

id="detail"></div>

<script

type="text/javascript">

const

App

=

{

data()

{

return

{

change:

50000,

money:

300,

loop:

0,

};

},

watch:

{

change(newValue,

oldValue)

{

alert("零錢由

:"

+

oldValue

+

"

變?yōu)?/p>

"

+

newValue

+

"元!");

//

告警輸出前后值

},

},

methods:

{

changeMoney()

{

this.loop

=

this.loop

+

1;

//

統(tǒng)計(jì)次數(shù)

this.change

=

this.change

-

this.money;

//

變更零錢

this.writeDetail();

//

計(jì)入明細(xì)帳

},

getElemet(id)

{

return

document.getElementById(id);

//

返回指定id的元素

},

writeDetail()

{

this.getElemet("detail").innerHTML

+=

"<p>第"

+

this.loop

+"次,

消費(fèi)"

+

this.money

+

"元,零錢為¥:"

+

this.change

+

"元</p>";

//

生成明細(xì)帳

},

},

};

constinstance=Vue.createApp(App).mount("#app");

instance.change=35000;//立即觸發(fā)偵聽

</script>2.4.2watch屬性高級(jí)用法

通常情況下,watch屬性并不關(guān)心第一次綁定的數(shù)據(jù),也不會(huì)執(zhí)行監(jiān)聽函數(shù)。只有數(shù)據(jù)發(fā)生改變才會(huì)執(zhí)行。

如果需要在最初綁定值時(shí)就能執(zhí)行函數(shù),則就需要使用handler方法和immediate屬性,并將immediate:true。如果還需要嘗試偵聽數(shù)據(jù)的變化,還需要設(shè)置deep:true。deep:

false(默認(rèn)值),表示不進(jìn)行深度監(jiān)聽;true時(shí),表深度偵聽。任何修改changeValue里面任何一個(gè)屬性都會(huì)觸發(fā)這個(gè)監(jiān)聽器里的handler。

注意:watch深度監(jiān)聽對(duì)象或數(shù)組的變化,在變更(不是替換)對(duì)象或數(shù)組時(shí),舊值將與新值相同。//HTML部分<p>需要偵聽的綁定數(shù)據(jù)變量:{{changeValue}}</p>//在JS部分//Vue實(shí)例watch選項(xiàng)中定義

watch:{changeValue:{handler(newValue,oldValue){//處理代碼},deep:true,//深度偵聽

immediate:true//立即先去執(zhí)行handler方法}}constinstance=Vue.createApp(App).mount("#app");//定義實(shí)例instance.tuition=5000;//基礎(chǔ)數(shù)據(jù)類型-數(shù)值="張曉娟";//基礎(chǔ)數(shù)據(jù)類型-字符串//控制臺(tái)修改方法instance.$data.tuition=4500案例演示:【例2-7】watch屬性的高級(jí)應(yīng)用2.5生命周期鉤子函數(shù)2.5.1生命周期鉤子函數(shù)作用

//在Vue實(shí)例中定義以下選項(xiàng)beforeCreate:function(){}created:function(){}beforeMount:function(){}mounted:function(){}beforeUpdate:function(){}updated:function(){}beforeUnmount:function(){}unmounted:function(){}renderTriggered(event){}//虛擬DOM被觸發(fā)渲染時(shí)調(diào)用renderTracked(event){}//虛擬DOM重新渲染時(shí)調(diào)用

2.5.1-Vue生命周期流程圖-2-5.png案例演示:【例2-8】生命周期鉤子函數(shù)綜合應(yīng)用

beforeCreate()

{

console.log("子組件創(chuàng)建前...");

},

created()

{

console.log("子組件創(chuàng)建啦!");

},

beforeMount()

{console.log("子組件掛載前...");

},

mounted()

{

console.log("子組件掛載啦!");

},

beforeUpdate()

{

console.log("子組件更新前...");

},

updated()

{

console.log("子組件掛載啦!");

},

beforeUnmount(){

console.log("子組件卸載前...");

},

unmounted(){

console.log("子組件卸載啦!");

},

2.6Vue中數(shù)組變動(dòng)更新問題導(dǎo)入:當(dāng)數(shù)組元素發(fā)生變化時(shí),需要及時(shí)渲染到頁面上去,但不是所有方法都能夠觸發(fā)視圖更新的。constinstance=Vue.createApp(App).mount('#app');instance.items[indexOfItem]=newValue//利用索引賦值instance.items.length=newLength//直接修改數(shù)組的長度Vue.js針對(duì)這兩個(gè)問題給出了相應(yīng)的解決辦法,使用這些方法,可以觸發(fā)狀態(tài)更新。使用Vue全局方法Vue.set()或者使用instance.$set()實(shí)例方法。參見“2.7.2Vue實(shí)例屬性與方法”小節(jié)。使用數(shù)組變異方法。例如push()、unshift()、splice()、pop()、shift()、sort()、reverse()。使用非變異方法。例如filter()、concat()、slice()。constinstance=Vue.createApp(App).mount('#app'); letnewItems=instance.items.slice(1,3)案例演示:【例2-9】數(shù)組元素更新方法的應(yīng)用2.7控制臺(tái)console對(duì)象2.7.1顯示信息的命令

顯示信息的命令console.log("HelloWorld");("這是info");console.debug("這是debug");//只有顯示級(jí)別為verbose時(shí)才顯示信息console.warn("這是warn");console.error("這是error");【語法說明】console.log():用來顯示信息。():顯示一般信息;console.debug():與console.log方法類似,會(huì)在控制臺(tái)輸出調(diào)試信息。但是,默認(rèn)情況下,console.debug輸出的信息不會(huì)顯示,只有在打開顯示級(jí)別在“verbose”的情況才會(huì)顯示。console.warn():顯示警告提示;console.error():顯示錯(cuò)誤提示。單擊“控制臺(tái)方法的應(yīng)用”按鈕后,控制臺(tái)會(huì)顯示如左圖所示。2.7控制臺(tái)console對(duì)象2.7.2占位符

占位符//data中定義number:13.343434,student:{name:"",age:25}//在js相關(guān)方法中定義console.log("%d年%d月%d日",2011,3,26);console.log("圓周率是%f",Math.PI);console.log("數(shù)值為%f",this.number);console.log("學(xué)生信息為%o",this.student);console.log("學(xué)生姓名:%c"+,'color:red');//CSS樣式%cconsole對(duì)象顯示信息的5種方法,均可以使用printf風(fēng)格的占位符。不過,占位符的種類比較少,只支持字符(%s)、整數(shù)(%d或%i)、浮點(diǎn)數(shù)(%f)、對(duì)象(%o)和CSS樣式(%c)5種。2.7控制臺(tái)console對(duì)象2.7.3分組顯示console.group() 分組顯示console.group()console.group("學(xué)習(xí)第1小組");console.log("第1組-張小東");console

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論