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

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

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

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

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

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

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

理想：從想讓自己的工作更有效率，到想自己寫一個框架。從提供一個十分簡單專注的工具到將一些DOM和JS對象同步，再到開始擴充范圍以及將更多的模塊加入到生態(tài)系統(tǒng)，最終形成一個框架。思政理想還是要有的，萬一實現(xiàn)呢？三大前端框架：React、Angular、Vue.js（Github中star最多）三大移動端框架：Flutter、Weex、ReactNativeVue.js發(fā)展史和特點易用已經(jīng)會了HTML、CSS、JavaScript即可閱讀指南開始構(gòu)建應(yīng)用靈活不斷繁榮的生態(tài)系統(tǒng)，可以在一個庫和一套完整框架之間自如伸縮。高效20kbmin+gzip的運行大小。超快虛擬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特點起源于2013年12月自己的實驗項目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擴展程序（選擇shells/chrome文件夾）Firefox和Edge可以直接瀏覽器安裝devtools拓展程序1.2.1Vue.js引入方法61.2.3Node.js環(huán)境配置

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

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

為了減輕C盤資源的壓力，建議使用以下方法進行優(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)境變量。右擊“計算機”,依次選擇“屬性→高級系統(tǒng)設(shè)置→高級→環(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)建第一個Vue單頁程序(1)Vuev2.X<divid="app"><p>{{message}}--{counter}}</p></div><!--JS部分-->

<script>var

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

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

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

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

message:"HelloVue!",

counter:0,

},

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

},

});</script>

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

return{

message:"HelloVue!",

counter:0,

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

createApp(App).mount("#app");//也可以創(chuàng)建一個Vue實例，獲取data中數(shù)據(jù)constinstance=app.mount('#app');案例演示：【例1-1、1-2】1.3Vue.js開發(fā)工具開發(fā)工具VisualStudioCode(VSCode)HBuilderXWebStorm瀏覽器工具MSEdge(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è)級開發(fā)語言。1.4.1let和const//var的情況

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

var

chu

=

2022;

//let的情況

console.log(bar);//報錯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]

//報錯，不能重新賦值

注意：ES6新增了let命令，用來聲明變量。它的用法類似于var，但是所聲明的變量，只在let命令所在的代碼塊內(nèi)有效。常量不能重新賦值、不能重復(fù)聲明、不會被預(yù)解析。常量屬于塊級作用域。對象常量屬性可以修改，但對象的引用不能修改。否則會報錯。111.4.2解構(gòu)賦值ES6允許按照一定模式，從數(shù)組和對象中提取值，對變量進行賦值。解構(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)賦允許指定默認值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表達式}ES6中，箭頭函數(shù)就是函數(shù)的一種簡寫形式，使用括號包裹參數(shù)，跟隨一個“=>”，緊接著是函數(shù)體。當(dāng)箭頭函數(shù)沒有參數(shù)或者有多個參數(shù)，要用()括起來。當(dāng)箭頭函數(shù)函數(shù)體有多行語句，用{}包裹起來，表示代碼塊，當(dāng)只有一行語句，并且需要返回結(jié)果時，可以省略{},結(jié)果會自動返回。當(dāng)箭頭函數(shù)要返回對象的時候，為了區(qū)分于代碼塊，要用()將對象包裹起來。var

fun=num=>num;

//與第2～4行等價var

fun=function(num){

return

num;

}

var

fn=()=>5

//與第6行等價var

fn=function(){return

5}

var

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

//與第8～11行等價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ù)里面沒有this對象，此時的this是外層的this對象，即Window。普通函數(shù)中的this指向Window對象。箭頭函數(shù)中的this指的是函數(shù)定義位置的上下文。箭頭函數(shù)體中的this對象，是定義函數(shù)時的對象，而不是使用函數(shù)時的對象。131.4.4展開運算符

展開運算符（...）用于取出參數(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屬性會被覆蓋

1.4.5模板字符串

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

let

string1

=

`Vue.js,

isveryeasytolearn!`

console.log(string1)//

Vue.

js,

//

isveryeasytolearn!字符串插入變量和表達式。變量名寫在${}中，${}中可以放入JavaScript表達式。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è)前景寬廣！

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

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

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

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

因此開發(fā)者只需關(guān)注業(yè)務(wù)邏輯，不需要手動操作DOM，不需要關(guān)注數(shù)據(jù)狀態(tài)的同步問題，復(fù)雜的數(shù)據(jù)狀態(tài)維護完全由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選項中的books的引用值

var

myModel

=

[

{

bookName:

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

},

{

bookName:

"JSP程序設(shè)計"

},

{

bookName:

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

},

];

//

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

const

app

=

Vue.createApp({

//

定義data選項

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

/>

定價：<input

type="number"

v-model="price"

placeholder="輸入定價"><br

/><br

/>

<input

type="submit"

value="提交">

<input

type="reset"

value="重置">

<p>圖書名稱：{{bookName}}、出版社：{{press}}、定價：{{price}}</p>

</div>

<script

type="text/javascript">

const

app

=

Vue.createApp({

//

Vue實例app

data()

{

return

{

bookName:

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

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

press:

'',

//為空串

price:

0.0

//為0

}

}

});

app.mount('#app');

//

掛載到DOM上

</script>

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

<p>v-html指令：<spanv-html="htmlCode"></span></p>屬性插值：<av-bind:href="url"v-bind:title="title">中國教育和科研計算機網(wǎng)</a>JavaScript表達式插值：<標(biāo)記名稱>{{JS合法表達式}}</標(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計算屬性與方法問題導(dǎo)入：當(dāng)模板中插入過多的業(yè)務(wù)邏輯，會使模板過重且后期難以維護。<divid='app'>{{information}}--{{information.split('').reverse().join('')}}</div>基本語法//在Vue實例vm中定義選項computedcomputed:{

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

}

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

vue-2-4.html)。

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

設(shè)計要求：(1)使用計算屬性定義maxNumber函數(shù)，找出數(shù)組中最大數(shù)；(2)使用方法定義minNumber函數(shù)，找出數(shù)組中最小數(shù)。比較計算屬性和方法的差異性。Methods配置選項：

methods:{

findMaxNumber(){

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

}

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

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

computed:{

myObject:{//myObject定義為對象

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

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

id="app">

<p

v-once>初始信息：圖書名稱/定價：{{bookName}}/{{price}}元</p>

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

<p>圖書名稱/定價：{{bookName}}/{{price}}元</p>

<button

type="button"

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

<p>圖書名稱/定價：{{bookName}}/{{price}}元</p>

<p

v-once>初始圖書名稱/定價：{{myBooks}}元</p>

<p>更新后圖書名稱/定價：{{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ù)與實戰(zhàn)";

this.price

=

69.8;

},

},

};

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

</script>

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

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

watch:{changeValue(newValue,

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

<div

id="app">

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

<p>微信帳號：202208200111199</p>

<p

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

消費支付：<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"

/>消費后零錢：{{change}}元

</p>

<h3>以下是消費明細帳</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)計次數(shù)

this.change

=

this.change

-

this.money;

//

變更零錢

this.writeDetail();

//

計入明細帳

},

getElemet(id)

{

return

document.getElementById(id);

//

返回指定id的元素

},

writeDetail()

{

this.getElemet("detail").innerHTML

+=

"<p>第"

+

this.loop

+"次,

消費"

+

this.money

+

"元，零錢為￥："

+

this.change

+

"元</p>";

//

生成明細帳

},

},

};

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

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

</script>2.4.2watch屬性高級用法

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

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

false(默認值)，表示不進行深度監(jiān)聽；true時，表深度偵聽。任何修改changeValue里面任何一個屬性都會觸發(fā)這個監(jiān)聽器里的handler。

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

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

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

//在Vue實例中定義以下選項beforeCreate:function(){}created:function(){}beforeMount:function(){}mounted:function(){}beforeUpdate:function(){}updated:function(){}beforeUnmount:function(){}unmounted:function(){}renderTriggered(event){}//虛擬DOM被觸發(fā)渲染時調(diào)用renderTracked(event){}//虛擬DOM重新渲染時調(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ǎo)入：當(dāng)數(shù)組元素發(fā)生變化時，需要及時渲染到頁面上去，但不是所有方法都能夠觸發(fā)視圖更新的。constinstance=Vue.createApp(App).mount('#app');instance.items[indexOfItem]=newValue//利用索引賦值instance.items.length=newLength//直接修改數(shù)組的長度Vue.js針對這兩個問題給出了相應(yīng)的解決辦法，使用這些方法，可以觸發(fā)狀態(tài)更新。使用Vue全局方法Vue.set()或者使用instance.$set()實例方法。參見“2.7.2Vue實例屬性與方法”小節(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控制臺console對象2.7.1顯示信息的命令

顯示信息的命令console.log("HelloWorld");("這是info");console.debug("這是debug");//只有顯示級別為verbose時才顯示信息console.warn("這是warn");console.error("這是error");【語法說明】console.log()：用來顯示信息。()：顯示一般信息；console.debug()：與console.log方法類似，會在控制臺輸出調(diào)試信息。但是，默認情況下，console.debug輸出的信息不會顯示，只有在打開顯示級別在“verbose”的情況才會顯示。console.warn()：顯示警告提示；console.error()：顯示錯誤提示。單擊“控制臺方法的應(yīng)用”按鈕后，控制臺會顯示如左圖所示。2.7控制臺console對象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對象顯示信息的5種方法，均可以使用printf風(fēng)格的占位符。不過，占位符的種類比較少，只支持字符(%s)、整數(shù)(%d或%i)、浮點數(shù)(%f)、對象(%o)和CSS樣式(%c)5種。2.7控制臺console對象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組-儲久鳳");console.log("第2組-王祥云");console.groupEnd();【語法說明】console.group()表示分組開始，后面跟隨若干console.log()。console.groupEnd()表示分組結(jié)束。執(zhí)行效果如圖2-22所示。當(dāng)點擊組標(biāo)題，該組信息會折疊或展開，如下圖所示。2.7控制臺console對象2.7.4查看對象的信息console.dir()console.dir(this.student)案例演示：【例2-10】console對象的方法綜合應(yīng)用const

App

=

{

data()

{

return

{

information:

"console方法的使用",

number:

13.23455,

score:

0,

student:

{

name:

"儲遠大",

age:

21,

study:

function

()

{

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

},

},

};

},

本章小結(jié)

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

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

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

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

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

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

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

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

v-else>成績等級為不合格！</標(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}}時，我被渲染啦！</h3>

<h3

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

<template

v-if="flag">

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

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

</template></fieldset>

</div>

<div>

<fieldset>

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

<label

for="">

政府采購評審專家考試成績：</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é)果：不合格！，請補考！！</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手動綁定key值時，每一分支均需要綁定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>問題導(dǎo)入：由于Vue通常會復(fù)用已有元素而不是從頭開始渲染。解決方案：在v-if/v-else/v-else-if中，key值綁定不再是必須的，因為Vue3.x會自動生成對應(yīng)的唯一key值。若在Vue3.x中（如v-if）手動綁定key值，那么其他對應(yīng)指令中（如v-else）也必須手動綁定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ù)條件展示元素，從而實現(xiàn)元素的隱藏與顯示。有v-show的元素始終會被渲染并保留在DOM中。v-show是簡單地切換元素的CSS屬性display?！净菊Z法】<標(biāo)記名稱v-show="true|false">標(biāo)記的內(nèi)容</標(biāo)記名稱><h1v-show="ok">Hello!</h1>【語法說明】v-show屬性的值是邏輯值。true：時渲染到頁面上；false：不渲染到頁面上。

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

注意：v-show

不支持

<template>

</template>

元素，也不支持

v-else。

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

<div

id="app">

<h3

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

<h3

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

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

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

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

</li>

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

value,key,index)in

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

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