Vue.js 3.x前端開發(fā)技術(shù)與實(shí)戰(zhàn) 課件 第1、2章 Vue.js概述；Vue.js基礎(chǔ)

教學(xué)目標(biāo)理解Vue.js指令的定義與分類。掌握條件渲染指令的使用與注意事項(xiàng)。掌握列表渲染指令v-for的多種定義方法及與key屬性配合使用的方法。掌握數(shù)據(jù)綁定的多種方式。掌握事件處理指令及事件修飾符的使用方法。掌握其它內(nèi)置指令的作用與使用方法。掌握Vue自定義指令定義與注冊的方法。1第3章

Vue.js指令（6學(xué)時(shí)）教學(xué)目標(biāo)第1章

Vue.js發(fā)展概述（1課時(shí)）1.掌握常用的Vue.js開發(fā)工具。2.掌握Vue.js頁面的基本組成。3.學(xué)會(huì)使用Vue.js3.x編寫簡易的單頁面應(yīng)用。4.掌握ECMAScript基礎(chǔ)語法(重點(diǎn))。1.1Vue.js簡介

Vue.js是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。Vue.js被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue.js的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。

當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時(shí)，Vue.js可以開發(fā)復(fù)雜的SPA(SinglePageApplication)單頁應(yīng)用項(xiàng)目。

尤雨溪(EvanYou)現(xiàn)任職于紐約GoogleCreativeLab。尤雨溪是Vue.js框架的作者，HTML5版Clear(移動(dòng)應(yīng)用)的打造人。

理想：從想讓自己的工作更有效率，到想自己寫一個(gè)框架。從提供一個(gè)十分簡單專注的工具到將一些DOM和JS對象同步，再到開始擴(kuò)充范圍以及將更多的模塊加入到生態(tài)系統(tǒng)，最終形成一個(gè)框架。思政理想還是要有的，萬一實(shí)現(xiàn)呢？三大前端框架：React、Angular、Vue.js（Github中star最多）三大移動(dòng)端框架：Flutter、Weex、ReactNativeVue.js發(fā)展史和特點(diǎn)易用已經(jīng)會(huì)了HTML、CSS、JavaScript即可閱讀指南開始構(gòu)建應(yīng)用靈活不斷繁榮的生態(tài)系統(tǒng)，可以在一個(gè)庫和一套完整框架之間自如伸縮。高效20kbmin+gzip的運(yùn)行大小。超快虛擬DOM，最省心的優(yōu)化。Vue1.0,2014.2-2015.10.27Vue2.0,2016.4.27Vue2.6.x，2019.02.05V3.0,2020.9.18Vue發(fā)展簡史Vue特點(diǎn)起源于2013年12月自己的實(shí)驗(yàn)項(xiàng)目1.2Vue.js生產(chǎn)環(huán)境配置Vue.js引入方法<scripttype="text/javascript"src="js/vue.min.js"></script><scriptsrc="/vue@next"></script>安裝VueDevtools1.下載并安裝Node.js和npm2.從GitHub上下載VueDevtools（解壓到vue-devtools-dev）npminstall；npmrunbuild安裝Chorme擴(kuò)展程序（選擇shells/chrome文件夾）Firefox和Edge可以直接瀏覽器安裝devtools拓展程序1.2.1Vue.js引入方法61.2.3Node.js環(huán)境配置

環(huán)境配置主要是為npm配置全局模塊安裝的路徑和緩存cache的路徑。默認(rèn)情況下執(zhí)行：npminstall*-g。

模塊安裝到“C:\Users\用戶名\AppData\Roaming\npm”（會(huì)占用C盤資源）。

為了減輕C盤資源的壓力，建議使用以下方法進(jìn)行優(yōu)化環(huán)境配置。步驟如下：

（1）在指定盤符（設(shè)為F:\nodejs）下新建文件夾node_global和node_cache，用作存放安裝的全局模塊及緩存cache，

（2）在命令行執(zhí)行下列配置設(shè)置命令。npmconfigsetprefix"F:\nodejs\node_global“

npmconfigsetcache"F:\nodejs\node_cache“

安裝node.js（v16.14.x以上）71.2.3環(huán)境配置示意圖(3)設(shè)置環(huán)境變量。右擊“計(jì)算機(jī)”,依次選擇“屬性→高級(jí)系統(tǒng)設(shè)置→高級(jí)→環(huán)境變量”。在系統(tǒng)變量域中，單擊“新建”按鈕，在“編輯系統(tǒng)變量”對話框中設(shè)置變量名為NODE_PATH、變量值為F:\nodejs\node_global\node_modules。

在“Administrator的用戶變量”域中，選擇變量Path后，單擊“編輯”按鈕，將變量值中的C:\Users\Administrator\AppData\Roaming\npm修改為F:\nodejs\node_global。81.2.4創(chuàng)建第一個(gè)Vue單頁程序(1)Vuev2.X<divid="app"><p>{{message}}--{counter}}</p></div><!--JS部分-->

<script>var

vm=newVue({//創(chuàng)建Vue實(shí)例

el:"#app",//定義掛載元素

template:"",//定義模板內(nèi)容選項(xiàng)

data:{//定義數(shù)據(jù)選項(xiàng)

message:"HelloVue!",

counter:0,

},

methods:{//定義方法（函數(shù)）

},

});</script>

(2)VueV3.x<divid="app"><p>{{message}}</p><p>計(jì)數(shù)器Counter={{counter}}</p><button@click="add">計(jì)數(shù)器增1</button></div><script>//第1種方法const{createApp}=Vue;//解構(gòu)賦值constApp={//定義JS對象-App組件data(){//data選項(xiàng)為函數(shù),return返回變量

return{

message:"HelloVue!",

counter:0,

}; }, methods:{//定義組件中的方法 },};//創(chuàng)建Vue實(shí)例,并掛載到DOM上

createApp(App).mount("#app");//也可以創(chuàng)建一個(gè)Vue實(shí)例，獲取data中數(shù)據(jù)constinstance=app.mount('#app');案例演示：【例1-1、1-2】1.3Vue.js開發(fā)工具開發(fā)工具VisualStudioCode(VSCode)HBuilderXWebStorm瀏覽器工具M(jìn)SEdge(devtools）Mozilla

Firefox（devtools）GoogleChromeVue調(diào)試工具DevTools問：掌握這些工具就能夠很好地就業(yè)嗎？答：我們還得了解一下目前企業(yè)需求是什么?101.4ECMAScript6.0基礎(chǔ)ECMAScript6.0（以下簡稱ES6）是JavaScript語言的下一代標(biāo)準(zhǔn)，已經(jīng)在2015年6月正式發(fā)布了。它的目標(biāo)是使得JavaScript語言可以用來編寫復(fù)雜的大型應(yīng)用程序，成為企業(yè)級(jí)開發(fā)語言。1.4.1let和const//var的情況

console.log(chu);//輸出undefined

var

chu

=

2022;

//let的情況

console.log(bar);//報(bào)錯(cuò)ReferenceError

let

bar

=

2;

const

numberArr=[1,2,3,4,5,6,7]

//賦值numberArr.push(10,20,30);

//可以執(zhí)行console.log(numberArr);

//輸出所有元素numberArr=[15,2,3,4,5,6,7]

//報(bào)錯(cuò)，不能重新賦值

注意：ES6新增了let命令，用來聲明變量。它的用法類似于var，但是所聲明的變量，只在let命令所在的代碼塊內(nèi)有效。常量不能重新賦值、不能重復(fù)聲明、不會(huì)被預(yù)解析。常量屬于塊級(jí)作用域。對象常量屬性可以修改，但對象的引用不能修改。否則會(huì)報(bào)錯(cuò)。111.4.2解構(gòu)賦值ES6允許按照一定模式，從數(shù)組和對象中提取值，對變量進(jìn)行賦值。解構(gòu)不成功，變量的值就等于undefined。(1)數(shù)組的解構(gòu)賦值let

[a1,b2,c1]=[100,200,300];//a1=100,b1=200,c1=300

左右兩邊結(jié)構(gòu)必須一樣let

[chu,[[jiu],liang]]=[10,[[20,30],30]];//chu=10,jiu=[20,30],liang=30

let

[,,z]=["chu","jiu","liang"];//z='liang'

let

[x,,y]=[10,20,30]//x=10,y=30,不完全解構(gòu)let

[head,...tail]=[10,20,30,40]//head=10,tail=[20,30,40]

let

[x,y,...z]=['z']//x='z',y=undefined,z=[]

1.4ECMAScript6.0基礎(chǔ)(2)對象的解構(gòu)賦值let

{bar,foo}={foo:'aaa',bar:'bbb'}//bar='bbb',foo='aaa',變量必須與屬性同名才能成功賦值let

{baz}={foo:'aaa',bar:'bbb'}//baz=undefined，解構(gòu)不成功。

(3)解構(gòu)賦允許指定默認(rèn)值let

[foo=true]=[];//foo=true

let

[x,y='b']=['a'];//x='a',y='b'

let

[x,y='b']=['a',undefined];//x='a',y='b'

121.4ECMAScript6.0基礎(chǔ)1.4.3箭頭函數(shù)

（參數(shù)）=>{//函數(shù)體,return表達(dá)式}ES6中，箭頭函數(shù)就是函數(shù)的一種簡寫形式，使用括號(hào)包裹參數(shù)，跟隨一個(gè)“=>”，緊接著是函數(shù)體。當(dāng)箭頭函數(shù)沒有參數(shù)或者有多個(gè)參數(shù)，要用()括起來。當(dāng)箭頭函數(shù)函數(shù)體有多行語句，用{}包裹起來，表示代碼塊，當(dāng)只有一行語句，并且需要返回結(jié)果時(shí)，可以省略{},結(jié)果會(huì)自動(dòng)返回。當(dāng)箭頭函數(shù)要返回對象的時(shí)候，為了區(qū)分于代碼塊，要用()將對象包裹起來。var

fun=num=>num;

//與第2～4行等價(jià)var

fun=function(num){

return

num;

}

var

fn=()=>5

//與第6行等價(jià)var

fn=function(){return

5}

var

sum=(num1,num2)=>num1+num2

//與第8～11行等價(jià)var

sum=function(num1,num2){

//普通函數(shù)console.log(this)//指向Window對象

return

num1+num2

}

Console.log(sum(100,200));//顯示300varfun=(id,name)=>({id:id,name:name});//返回對象時(shí)，使用()包裹對象注意:箭頭函數(shù)里面沒有this對象，此時(shí)的this是外層的this對象，即Window。普通函數(shù)中的this指向Window對象。箭頭函數(shù)中的this指的是函數(shù)定義位置的上下文。箭頭函數(shù)體中的this對象，是定義函數(shù)時(shí)的對象，而不是使用函數(shù)時(shí)的對象。131.4.4展開運(yùn)算符

展開運(yùn)算符（...）用于取出參數(shù)對象所有可遍歷屬性，然后拷貝到當(dāng)前對象。//拷貝對象（深拷貝）

let

preson1

=

{

name:

"chujiuliang",

age:

57

}

let

obj1=

{

...preson1

}

//拷貝console.log(obj1)//{

name:

"chujiuliang",

age:

57

}

//合并對象

let

age

=

{

age:

22

}

let

name

=

{

name:

"liming"

}

let

person2

=

{}

person2

=

{

...age,

...name

}

console.log(person2

)

//{age:

22,

name:

"liming"}

//如果person2中原本有name,age屬性會(huì)被覆蓋

1.4.5模板字符串

模板字符串相當(dāng)于加強(qiáng)版的字符串，用反引號(hào)“`”,除了作為普通字符串，還可以用來定義多行字符串，也可以在字符串中加入變量和表達(dá)式。1.4ECMAScript6.0基礎(chǔ)多行字符串

let

string1

=

`Vue.js,

isveryeasytolearn!`

console.log(string1)//

Vue.

js,

//

isveryeasytolearn!字符串插入變量和表達(dá)式。變量名寫在${}中，${}中可以放入JavaScript表達(dá)式。let

name

=

"Chujiuliang"

let

age

=

57

let

info

=

`My

Name

is

${name},I

am

${age+1}

years

old

next

year.`

console.log(info)

//

My

Name

is

Chujiuliang,I

am

58

years

old

next

year.

字符串中調(diào)用函數(shù)function

fun(){

return

"ChuJiuLiang!"

}

let

string2

=

`Welcomto${fun()}`

console.log(string2);

//

WelcomtoChuJiuLiang!

Vue.js開發(fā)就業(yè)前景Web前端開發(fā)人才需求量大，供不應(yīng)求，薪酬高，待遇好，就業(yè)前景寬廣！

這么好的機(jī)會(huì)，還等啥？努力學(xué)習(xí)吧！本章小結(jié)本章主要介紹了Vue.js由來及如何配置Vue.js生產(chǎn)環(huán)境的方法。對Vue3.x新特性進(jìn)行講解。詳細(xì)講解了Vue.js引入方法及devtools調(diào)試工具的使用方法。結(jié)合2個(gè)Vue版本，詳細(xì)介紹Vue實(shí)例創(chuàng)建方法、App組件定義及組件內(nèi)的el、data、methods等常用的選項(xiàng)。對常用的Vue.js開發(fā)工具進(jìn)行了介紹，主要對業(yè)界主流的VSCode、HBuilderX進(jìn)行介紹，在實(shí)際開發(fā)過程中，可以根據(jù)實(shí)際工程的需要和個(gè)人喜愛去選擇合適的開發(fā)工具。最后介紹ECMAScript6的一些基礎(chǔ)知識(shí)。主要包括let和const、解構(gòu)賦值、箭頭函數(shù)、展開運(yùn)算符和模板字符串等方面的基礎(chǔ)知識(shí)，為后期項(xiàng)目的開發(fā)提供基礎(chǔ)條件。思考與拓展總結(jié)與提高教學(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ù)對象7.掌握數(shù)據(jù)中數(shù)組對象的變異與非變異方法(難點(diǎn))2.1MVVM模式

MVVM是Model-View-ViewModel的簡寫，它是一種基于前端開發(fā)的架構(gòu)模式，其核心是提供對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)對比結(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ù)組對象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ù)組對象

};

},

});

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。252.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對象中定義

computed:{

myObject:{//myObject定義為對象

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

get:function(){return相關(guān)參數(shù)(表達(dá)式);}}}定義setter時(shí)，需要定義成帶參數(shù)的set，參數(shù)為newValue，其值為字符串，渲染時(shí)可從中提取相關(guān)信息即可。必須在computed屬性下，必須定義一個(gè)對象，如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à)信息26更新圖書/定價(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í)例添加被觀察的對象，并在對象被修改時(shí)調(diào)用設(shè)計(jì)人員自定義的方法。watch可以觀察簡單變量、數(shù)組和對象變化，但使用方法略有不同。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)28【例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)聽對象或數(shù)組的變化，在變更(不是替換)對象或數(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針對這兩個(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對象2.7.1顯示信息的命令

顯示信息的命令console.log("HelloWorld");("這是info");console.debug("這是debug");//只有顯示級(jí)別為verbose時(shí)才顯示信息console.warn("這是warn");console.error("這是error");【語法說明】console.log()：用來顯示信息。()：顯示一般信息；console.debug()：與consol