Vue.js 3.x前端開發(fā)技術(shù)與實(shí)戰(zhàn) 課件全套 第1-13章 Vue.js概述；Vue.js基礎(chǔ) -Vue3+Element Plus實(shí)戰(zhàn)

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

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

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

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

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

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

理想：從想讓自己的工作更有效率，到想自己寫一個(gè)框架。從提供一個(gè)十分簡(jiǎn)單專注的工具到將一些DOM和JS對(duì)象同步，再到開始擴(kuò)充范圍以及將更多的模塊加入到生態(tài)系統(tǒng)，最終形成一個(gè)框架。思政理想還是要有的，萬(wàn)一實(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è)庫(kù)和一套完整框架之間自如伸縮。高效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ā)展簡(jiǎn)史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)變量”對(duì)話框中設(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單頁(yè)程序(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對(duì)象-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問(wèn)：掌握這些工具就能夠很好地就業(yè)嗎？答：我們還得了解一下目前企業(yè)需求是什么?101.4ECMAScript6.0基礎(chǔ)ECMAScript6.0（以下簡(jiǎn)稱ES6）是JavaScript語(yǔ)言的下一代標(biāo)準(zhǔn)，已經(jīng)在2015年6月正式發(fā)布了。它的目標(biāo)是使得JavaScript語(yǔ)言可以用來(lái)編寫復(fù)雜的大型應(yīng)用程序，成為企業(yè)級(jí)開發(fā)語(yǔ)言。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命令，用來(lái)聲明變量。它的用法類似于var，但是所聲明的變量，只在let命令所在的代碼塊內(nèi)有效。常量不能重新賦值、不能重復(fù)聲明、不會(huì)被預(yù)解析。常量屬于塊級(jí)作用域。對(duì)象常量屬性可以修改，但對(duì)象的引用不能修改。否則會(huì)報(bào)錯(cuò)。111.4.2解構(gòu)賦值ES6允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(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)對(duì)象的解構(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ù)的一種簡(jiǎn)寫形式，使用括號(hào)包裹參數(shù)，跟隨一個(gè)“=>”，緊接著是函數(shù)體。當(dāng)箭頭函數(shù)沒有參數(shù)或者有多個(gè)參數(shù)，要用()括起來(lái)。當(dāng)箭頭函數(shù)函數(shù)體有多行語(yǔ)句，用{}包裹起來(lái)，表示代碼塊，當(dāng)只有一行語(yǔ)句，并且需要返回結(jié)果時(shí)，可以省略{},結(jié)果會(huì)自動(dòng)返回。當(dāng)箭頭函數(shù)要返回對(duì)象的時(shí)候，為了區(qū)分于代碼塊，要用()將對(duì)象包裹起來(lái)。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對(duì)象

return

num1+num2

}

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

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

let

preson1

=

{

name:

"chujiuliang",

age:

57

}

let

obj1=

{

...preson1

}

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

name:

"chujiuliang",

age:

57

}

//合并對(duì)象

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)“`”,除了作為普通字符串，還可以用來(lái)定義多行字符串，也可以在字符串中加入變量和表達(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由來(lái)及如何配置Vue.js生產(chǎn)環(huán)境的方法。對(duì)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)。對(duì)常用的Vue.js開發(fā)工具進(jìn)行了介紹，主要對(duì)業(yè)界主流的VSCode、HBuilderX進(jìn)行介紹，在實(shí)際開發(fā)過(guò)程中，可以根據(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ù)對(duì)象7.掌握數(shù)據(jù)中數(shù)組對(duì)象的變異與非變異方法(難點(diǎn))2.1MVVM模式

MVVM是Model-View-ViewModel的簡(jiǎn)寫，它是一種基于前端開發(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)系，而是通過(guò)ViewModel進(jìn)行交互，Model和ViewModel之間的交互是雙向的，因此View數(shù)據(jù)的變化會(huì)同步到Model中，而Model數(shù)據(jù)的變化也會(huì)立即反映到View上。ViewModel通過(guò)雙向數(shù)據(jù)綁定把View層和Model層連接了起來(lái)，而View和Model之間的同步工作完全是自動(dòng)的，無(wú)需人為干涉。

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

2.1.2MVVM模式的前端框架發(fā)展趨勢(shì)從/@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,用來(lái)連接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">中國(guó)教育和科研計(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”語(yǔ)法:{{}}。案例演示：【例2-3】插值的綜合應(yīng)用2.3計(jì)算屬性與方法問(wèn)題導(dǎo)入：當(dāng)模板中插入過(guò)多的業(yè)務(wù)邏輯，會(huì)使模板過(guò)重且后期難以維護(hù)。<divid='app'>{{information}}--{{information.split('').reverse().join('')}}</div>基本語(yǔ)法//在Vue實(shí)例vm中定義選項(xiàng)computedcomputed:{

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

}

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

vue-2-4.html)。

要求：使用計(jì)算屬性定義maxNumber、minNumber等函數(shù)實(shí)現(xiàn)從給定數(shù)組中找出最大數(shù)和最小數(shù)。2.3.1計(jì)算屬性基礎(chǔ)應(yīng)用解決方案：采用計(jì)算屬性（computed）來(lái)處理一些復(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，頁(yè)面信息會(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ù)。然后通過(guò)賦值語(yǔ)句(或在調(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

()

{

//

通過(guò)方法來(lái)賦值

this.bookName

=

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

this.price

=

69.8;

},

},

};

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

</script>

2.4偵聽屬性watch-1問(wèn)題導(dǎo)入：有時(shí)需要在數(shù)據(jù)發(fā)生變化時(shí)，執(zhí)行一些特定的指令操作，該如何處理呢？解決方案：Vue提供更通用的方法，通過(guò)watch選項(xiàng)來(lái)響應(yīng)數(shù)據(jù)的變化。watch可以為實(shí)例添加被觀察的對(duì)象，并在對(duì)象被修改時(shí)調(diào)用設(shè)計(jì)人員自定義的方法。watch可以觀察簡(jiǎn)單變量、數(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ù)邏輯代碼} }//通過(guò)實(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)聽對(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)更新問(wèn)題導(dǎo)入：當(dāng)數(shù)組元素發(fā)生變化時(shí)，需要及時(shí)渲染到頁(yè)面上去，但不是所有方法都能夠觸發(fā)視圖更新的。constinstance=Vue.createApp(App).mount('#app');instance.items[indexOfItem]=newValue//利用索引賦值instance.items.length=newLength//直接修改數(shù)組的長(zhǎng)度Vue.js針對(duì)這兩個(gè)問(wèn)題給出了相應(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");【語(yǔ)法說(shuō)明】console.log()：用來(lái)顯示信息。()：顯示一般信息；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)格的占位符。不過(guò)，占位符的種類比較少，只支持字符(%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.log("第1組-李大為");console.groupEnd(); console.group("學(xué)習(xí)第2組");console.log("第2組-儲(chǔ)久鳳");console.log("第2組-王祥云");console.groupEnd();【語(yǔ)法說(shuō)明】console.group()表示分組開始，后面跟隨若干console.log()。console.groupEnd()表示分組結(jié)束。執(zhí)行效果如圖2-22所示。當(dāng)點(diǎn)擊組標(biāo)題，該組信息會(huì)折疊或展開，如下圖所示。2.7控制臺(tái)console對(duì)象2.7.4查看對(duì)象的信息console.dir()console.dir(this.student)案例演示：【例2-10】console對(duì)象的方法綜合應(yīng)用const

App

=

{

data()

{

return

{

information:

"console方法的使用",

number:

13.23455,

score:

0,

student:

{

name:

"儲(chǔ)遠(yuǎn)大",

age:

21,

study:

function

()

{

console.log("Vue.js漸進(jìn)式框架!");

},

},

};

},

本章小結(jié)

本章主要介紹了MVVM模式的工作機(jī)制；以及使用數(shù)據(jù)綁定來(lái)編寫Vue.js的簡(jiǎn)單的單頁(yè)應(yīng)用程序。同時(shí)介紹下常用的插值與數(shù)據(jù)綁定的方法。

重點(diǎn)講解computed計(jì)算屬性、watch偵聽屬性及生命周期鉤子函數(shù)的應(yīng)用場(chǎng)景及基礎(chǔ)編程方法。特別要注意，在computed和methods選項(xiàng)中定義方法時(shí)，執(zhí)行的過(guò)程是不同的。在watch選項(xiàng)下可以定義數(shù)據(jù)發(fā)生變化的業(yè)務(wù)邏輯，完成相關(guān)事務(wù)的處理。在watch屬性的高級(jí)用法中，會(huì)定義handler()方法，并根據(jù)業(yè)務(wù)需要設(shè)置immediate和deep屬性，其值為true時(shí),可以進(jìn)行立即綁定數(shù)據(jù)和深度觀察數(shù)據(jù)的變化。思考與拓展總結(jié)與提高本章小結(jié)

對(duì)Vue的數(shù)據(jù)選項(xiàng)中數(shù)組方法的應(yīng)用進(jìn)行重點(diǎn)闡述。數(shù)組操作方法分為變異方法和非變異方法。所謂變異方法就是實(shí)質(zhì)性改變數(shù)組元素，并且能夠觸發(fā)視圖更新。所謂非變異方法就是基于原數(shù)組產(chǎn)生新的數(shù)組，但原數(shù)組的元素并沒有發(fā)生變化，即未被修改，所以不會(huì)觸發(fā)視圖更新，但新生成的數(shù)組還是會(huì)觸發(fā)視圖更新的。

最后對(duì)console對(duì)象常用的方法進(jìn)行簡(jiǎn)單地介紹。思考與拓展總結(jié)與提高38思政案例教學(xué)目標(biāo)理解Vue.js指令的定義與分類。掌握條件渲染指令的使用與注意事項(xiàng)。掌握列表渲染指令v-for的多種定義方法及與key屬性配合使用的方法。掌握數(shù)據(jù)綁定的多種方式。掌握事件處理指令及事件修飾符的使用方法。掌握其它內(nèi)置指令的作用與使用方法。掌握Vue自定義指令定義與注冊(cè)的方法。39第3章

Vue.js指令（6學(xué)時(shí)）40Vue.js指令概述解決方案：Vue.js中的指令是以帶前綴（v-）的HTML屬性(attribute)的形式出現(xiàn)。指令是Vue對(duì)HTML標(biāo)記新增的、拓展的屬性，這些屬性不屬于標(biāo)準(zhǔn)的HTML屬性。只有Vue.js認(rèn)為是有效的，能夠處理它。問(wèn)題導(dǎo)入：Vue給HTML標(biāo)記增加很多額外的屬性（如v-if），但是瀏覽器并不能正確解析？那么如何才能讓JS引擎去理解并解析它們呢？（例如需要有條件渲染某一標(biāo)記/元素，該如何處理呢？）指令指令(directive)本質(zhì)是模板中出現(xiàn)的特殊符號(hào)，讓處理模板的JS庫(kù)能夠知道對(duì)相關(guān)的DOM元素進(jìn)行一些相應(yīng)的處理。指令的作用：是當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響，響應(yīng)式(Reactive)地作用于DOM上，也就是雙向數(shù)據(jù)綁定。Vue.js指令概述Vue.js的指令是以“v-”開頭的。Vue提供的指令有：v-if、v-else、v-else-if、v-show、v-for、v-bind、v-on、v-model、v-text、v-html、v-pre、v-cloak、v-once等?！净A(chǔ)語(yǔ)法】<elementprefix-directiveId[:argument]="expression"></element><!--以下是示例--><divv-html="message"></div><divv-on:click="clickHandler"></div><spanv-text="msg"></span><!--等價(jià)<span>{{msg}}</span>--><pv-if="greeting">Hello</p><pv-show="greeting">Hello2</p><av-bind:href="url">...</a>【語(yǔ)法說(shuō)明】element：標(biāo)記名稱；prefix-directiveId：通用的指令格式，如v-if，v是前綴，if是指令I(lǐng)D。expressions表示表達(dá)式。一些指令能夠接收一個(gè)argument(參數(shù))，在指令名稱之后以冒號(hào)表示。指令的值是表達(dá)式，指令的值和在文本插值表達(dá)式{{}}的寫法是一樣的。指令既可以用于普通標(biāo)記，也可以用在<template></template>標(biāo)記上。3.1條件渲染v-if：用于條件性地渲染一塊內(nèi)容。當(dāng)指令的表達(dá)式的值為true時(shí)，內(nèi)容被渲染。v-else：必須搭配v-if使用，需要緊跟在v-if或者v-else-if后面，否則不起作用?？梢杂胿-else指令給v-if添加一個(gè)“else”塊。v-else-if：充當(dāng)v-if的else-if塊，可以鏈?zhǔn)降氖褂枚啻危詫?shí)現(xiàn)switch語(yǔ)句的功效。【基本語(yǔ)法】<!--以下v-if、v-else指令的示例--><標(biāo)記名稱

v-if="flag">v-if指令：當(dāng)flag為真時(shí)，我閃亮登場(chǎng)！</標(biāo)記名稱><標(biāo)記名稱v-else>v-else指令：當(dāng)flag為假時(shí)，哎呀！我暴露！</標(biāo)記名稱><!--以下v-if、v-else-if、v-else指令的示例，替代switch結(jié)構(gòu)--><標(biāo)記名稱

v-if="expressionA">成績(jī)等級(jí)為優(yōu)秀！</標(biāo)記名稱><標(biāo)記名稱

v-else-if="expressionB">成績(jī)等級(jí)為良好！</標(biāo)記名稱><標(biāo)記名稱

v-else>成績(jī)等級(jí)為不合格！</標(biāo)記名稱>條件渲染綜合應(yīng)用案例演示：【例3-1】條件渲染綜合應(yīng)用<div

id="app">

<div><fieldset>

<legend>使用v-if、v-else指令綜合應(yīng)用</legend>

<button

type="button"

@click="change">{{flag?"隱藏":"顯示"}}</button>

<h3

v-if="flag">v-if指令：當(dāng)flag為{{flag}}時(shí)，我被渲染啦！</h3>

<h3

v-else>v-else指令：當(dāng)flag為{{flag}}時(shí)，這回該輪到我被渲染啦！</h3>

<template

v-if="flag">

<h4>template模板內(nèi)容</h4>

<p>漸進(jìn)式前端框架Vue.js簡(jiǎn)單易學(xué)！</p>

</template></fieldset>

</div>

<div>

<fieldset>

<legend>v-if、v-else-if、v-else指令綜合應(yīng)用</legend>

<label

for="">

政府采購(gòu)評(píng)審專家考試成績(jī)：</label>

<input

type="text"

v-model="score"

/>

<h3

v-if="score>=90">結(jié)果：優(yōu)秀！</h3>

<h3

v-else-if="score>=80">結(jié)果：合格！</h3>

<h3

v-else>結(jié)果：不合格！，請(qǐng)補(bǔ)考??！</h3>

</fieldset>

</div>

</div>

<script

type="text/javascript">

const

App

=

{

data()

{

return

{

flag:

true,

score:

97,

};

},

methods:

{

change()

{

this.flag

=

this.flag

?

false

:

true;

},

},

};

const

instance

=

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

</script>

3.1.2Vue3.x中key值的應(yīng)用1.v-if/v-else-if/v-else中的key值<!--Vue2.x--><divv-if="condition"key="yes">Yes</div><divv-elsekey="no">No</div><!--Vue3.x--><divv-if="condition">Yes</div><divv-else>No</div><!--Vue3.x手動(dòng)綁定key值時(shí)，每一分支均需要綁定key值--><divv-if="condition"key="a">Yes</div><divv-elsekey="b">No</div>2.<template>使用v-for中的key值

在Vue2.x中，<template>不能綁定key值，而是綁定在它的子元素身上。在Vue3.x中，key值應(yīng)該綁定在<template>上而不是它的子元素。格式如下：<!--Vue3.x--><templatev-for="iteminlist":key="item.id"><div>...</div><span>...</span></template>問(wèn)題導(dǎo)入：由于Vue通常會(huì)復(fù)用已有元素而不是從頭開始渲染。解決方案：在v-if/v-else/v-else-if中，key值綁定不再是必須的，因?yàn)閂ue3.x會(huì)自動(dòng)生成對(duì)應(yīng)的唯一key值。若在Vue3.x中（如v-if）手動(dòng)綁定key值，那么其他對(duì)應(yīng)指令中（如v-else）也必須手動(dòng)綁定key值。<templatev-for>中的key值應(yīng)該綁定在<template>中而不再綁定在它的子元素中。3.1.2Vue3.x中key值的應(yīng)用3.<templatev-for>和v-if/v-else/v-else-if一起使用的key值

在Vue3.x，如果template使用了v-for，并且它的子元素中使用了v-if/v-else-if/v-else，那么key值也需要綁定在template上。格式如下：<!--Vue2.x--><templatev-for="iteminlist"><divv-if="item.isVisible":key="item.id">...</div><spanv-else:key="item.id">...</span></template><!--Vue3.x--><templatev-for="iteminlist":key="item.id"><divv-if="item.isVisible">...</div><spanv-else>...</span></template>案例演示：【例3-2】使用key屬性管理可復(fù)用的元素3.1.3v-show指令v-show指令用于根據(jù)條件展示元素，從而實(shí)現(xiàn)元素的隱藏與顯示。有v-show的元素始終會(huì)被渲染并保留在DOM中。v-show是簡(jiǎn)單地切換元素的CSS屬性display?！净菊Z(yǔ)法】<標(biāo)記名稱v-show="true|false">標(biāo)記的內(nèi)容</標(biāo)記名稱><h1v-show="ok">Hello!</h1>【語(yǔ)法說(shuō)明】v-show屬性的值是邏輯值。true：時(shí)渲染到頁(yè)面上；false：不渲染到頁(yè)面上。

帶有v-show的元素始終會(huì)被渲染并保留在DOM中。v-show只是簡(jiǎn)單地切換元素的CSS屬性display。

注意：v-show

不支持

<template>

</template>

元素，也不支持

v-else。

v-show與v-if在使用上既有相同點(diǎn)，也有不同點(diǎn)。相同點(diǎn)：兩者都是在判斷DOM節(jié)點(diǎn)是否要顯示。不同點(diǎn)：(1)實(shí)現(xiàn)方式不同（DOM樹）。(2)編譯過(guò)程不同（局部編譯/卸載）。(3)編譯條件不同（惰性/DOM保留）。(4)性能消耗不同（切換消耗/初始渲染）。3.1.3v-show指令案例演示：【例3-3】v-show指令與v-if指令使用比較

<div

id="app">

<h3

v-if="flag">條件為{{flag}}時(shí)，渲染‘這是v-if’</h3>

<h3

v-show="flag">條件為{{flag}}時(shí)，渲染h3-這是v-show</h3>

<div

v-show="flag"

class="div1">div</div>

<button

type="button"

@click="change">切換元素-{{flag}}</button>

</div>

<script

type="text/javascript">

const

App

=

{

data()

{

return

{flag:

true,

};

},

methods:

{

change()

{

this.flag

=

!this.flag;

//取反賦值

},

},

};

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

</script>

3.2列表渲染（v-for指令）

用v-for指令基于一個(gè)數(shù)組來(lái)渲染一個(gè)列表。v-for指令可以使用shoppingin|ofshoppings形式的特殊語(yǔ)法，其中shoppings是源數(shù)據(jù)數(shù)組(可以是普通數(shù)組或?qū)ο髷?shù)組)，而shopping則是被迭代的數(shù)組元素的別名。v-for指令的值中可以使用關(guān)鍵字in或of?！皘”表示或者的意思。1.使用單一參數(shù)的v-for指令循環(huán)遍歷對(duì)象數(shù)組<ul><liv-for="shoppinginshoppings">或<liv-for="shoppingofshoppings"> {{shopping}}</li> </ul>【語(yǔ)法說(shuō)明】

定義的數(shù)組類型的數(shù)據(jù)shoppings，數(shù)組中每個(gè)元素有3個(gè)屬性，分別是bookName、issn、author，用v-for對(duì)li標(biāo)記循環(huán)渲染，效果如下圖所示。【基本語(yǔ)法】<divid="vue34"<ul>

<liv-for="(shopping,index)inshoppings">

{{index+1}}-{{shopping.bookName}}-{{shopping.issn}}-{{shopping.author}}

</li>

</ul></div>【語(yǔ)法說(shuō)明】v-for屬性值中支持第二個(gè)參數(shù)index，作為當(dāng)前項(xiàng)的索引。不可以放在第一個(gè)參數(shù)位置上，否則渲染后不會(huì)出結(jié)果。多個(gè)參數(shù)必須使用括號(hào)包裹，并使用逗號(hào)分隔參數(shù)。依次訪問(wèn)數(shù)組中對(duì)象的屬性shopping.bookName、shopping.issn、shopping.author。渲染結(jié)果如圖所示。2.使用兩個(gè)參數(shù)的v-for指令循環(huán)遍歷對(duì)象數(shù)組3.2列表渲染（v-for指令）3.使用三個(gè)參數(shù)的v-for指令循環(huán)遍歷對(duì)象的屬性v-for指令也可以對(duì)對(duì)象的屬性進(jìn)行遍歷，使用(

value,key,index)in

student的形式來(lái)遍歷數(shù)組元素。【基本語(yǔ)法】<ul>

<liv-for="(value,key,index)instudent">{{index}}-{{key}}-{{value}}</li> </ul>【語(yǔ)法說(shuō)明】student是一個(gè)對(duì)象，它有3個(gè)屬性，分別為name、class、age。采用v-for指令分別遍歷對(duì)象的每一個(gè)屬性。3個(gè)參