Vue.js 3.x前端开发技术与实战 课件全套 第1-13章 Vue.js概述；Vue.js基础 -Vue3+Element Plus实战

教学目标理解Vue.js指令的定义与分类。掌握条件渲染指令的使用与注意事项。掌握列表渲染指令v-for的多种定义方法及与key属性配合使用的方法。掌握数据绑定的多种方式。掌握事件处理指令及事件修饰符的使用方法。掌握其它内置指令的作用与使用方法。掌握Vue自定义指令定义与注册的方法。1第3章

Vue.js指令（6学时）教学目标第1章

Vue.js发展概述（1课时）1.掌握常用的Vue.js开发工具。2.掌握Vue.js页面的基本组成。3.学会使用Vue.js3.x编写简易的单页面应用。4.掌握ECMAScript基础语法(重点)。1.1Vue.js简介

Vue.js是一套用于构建用户界面的渐进式框架。Vue.js被设计为可以自底向上逐层应用。Vue.js的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

当与现代化的工具链以及各种支持类库结合使用时，Vue.js可以开发复杂的SPA(SinglePageApplication)单页应用项目。

尤雨溪(EvanYou)现任职于纽约GoogleCreativeLab。尤雨溪是Vue.js框架的作者，HTML5版Clear(移动应用)的打造人。

理想：从想让自己的工作更有效率，到想自己写一个框架。从提供一个十分简单专注的工具到将一些DOM和JS对象同步，再到开始扩充范围以及将更多的模块加入到生态系统，最终形成一个框架。思政理想还是要有的，万一实现呢？三大前端框架：React、Angular、Vue.js（Github中star最多）三大移动端框架：Flutter、Weex、ReactNativeVue.js发展史和特点易用已经会了HTML、CSS、JavaScript即可阅读指南开始构建应用灵活不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。高效20kbmin+gzip的运行大小。超快虚拟DOM，最省心的优化。Vue1.0,2014.2-2015.10.27Vue2.0,2016.4.27Vue2.6.x，2019.02.05V3.0,2020.9.18Vue发展简史Vue特点起源于2013年12月自己的实验项目1.2Vue.js生产环境配置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环境配置

环境配置主要是为npm配置全局模块安装的路径和缓存cache的路径。默认情况下执行：npminstall*-g。

模块安装到“C:\Users\用户名\AppData\Roaming\npm”（会占用C盘资源）。

为了减轻C盘资源的压力，建议使用以下方法进行优化环境配置。步骤如下：

（1）在指定盘符（设为F:\nodejs）下新建文件夹node_global和node_cache，用作存放安装的全局模块及缓存cache，

（2）在命令行执行下列配置设置命令。npmconfigsetprefix"F:\nodejs\node_global“

npmconfigsetcache"F:\nodejs\node_cache“

安装node.js（v16.14.x以上）71.2.3环境配置示意图(3)设置环境变量。右击“计算机”,依次选择“属性→高级系统设置→高级→环境变量”。在系统变量域中，单击“新建”按钮，在“编辑系统变量”对话框中设置变量名为NODE_PATH、变量值为F:\nodejs\node_global\node_modules。

在“Administrator的用户变量”域中，选择变量Path后，单击“编辑”按钮，将变量值中的C:\Users\Administrator\AppData\Roaming\npm修改为F:\nodejs\node_global。81.2.4创建第一个Vue单页程序(1)Vuev2.X<divid="app"><p>{{message}}--{counter}}</p></div><!--JS部分-->

<script>var

vm=newVue({//创建Vue实例

el:"#app",//定义挂载元素

template:"",//定义模板内容选项

data:{//定义数据选项

message:"HelloVue!",

counter:0,

},

methods:{//定义方法（函数）

},

});</script>

(2)VueV3.x<divid="app"><p>{{message}}</p><p>计数器Counter={{counter}}</p><button@click="add">计数器增1</button></div><script>//第1种方法const{createApp}=Vue;//解构赋值constApp={//定义JS对象-App组件data(){//data选项为函数,return返回变量

return{

message:"HelloVue!",

counter:0,

}; }, methods:{//定义组件中的方法 },};//创建Vue实例,并挂载到DOM上

createApp(App).mount("#app");//也可以创建一个Vue实例，获取data中数据constinstance=app.mount('#app');案例演示：【例1-1、1-2】1.3Vue.js开发工具开发工具VisualStudioCode(VSCode)HBuilderXWebStorm浏览器工具MSEdge(devtools）Mozilla

Firefox（devtools）GoogleChromeVue调试工具DevTools问：掌握这些工具就能够很好地就业吗？答：我们还得了解一下目前企业需求是什么?101.4ECMAScript6.0基础ECMAScript6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。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);

//可以执行console.log(numberArr);

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

//报错，不能重新赋值

注意：ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。常量不能重新赋值、不能重复声明、不会被预解析。常量属于块级作用域。对象常量属性可以修改，但对象的引用不能修改。否则会报错。111.4.2解构赋值ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值。解构不成功，变量的值就等于undefined。(1)数组的解构赋值let

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

左右两边结构必须一样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,不完全解构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基础(2)对象的解构赋值let

{bar,foo}={foo:'aaa',bar:'bbb'}//bar='bbb',foo='aaa',变量必须与属性同名才能成功赋值let

{baz}={foo:'aaa',bar:'bbb'}//baz=undefined，解构不成功。

(3)解构赋允许指定默认值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基础1.4.3箭头函数

（参数）=>{//函数体,return表达式}ES6中，箭头函数就是函数的一种简写形式，使用括号包裹参数，跟随一个“=>”，紧接着是函数体。当箭头函数没有参数或者有多个参数，要用()括起来。当箭头函数函数体有多行语句，用{}包裹起来，表示代码块，当只有一行语句，并且需要返回结果时，可以省略{},结果会自动返回。当箭头函数要返回对象的时候，为了区分于代码块，要用()将对象包裹起来。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){

//普通函数console.log(this)//指向Window对象

return

num1+num2

}

Console.log(sum(100,200));//显示300varfun=(id,name)=>({id:id,name:name});//返回对象时，使用()包裹对象注意:箭头函数里面没有this对象，此时的this是外层的this对象，即Window。普通函数中的this指向Window对象。箭头函数中的this指的是函数定义位置的上下文。箭头函数体中的this对象，是定义函数时的对象，而不是使用函数时的对象。131.4.4展开运算符

展开运算符（...）用于取出参数对象所有可遍历属性，然后拷贝到当前对象。//拷贝对象（深拷贝）

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模板字符串

模板字符串相当于加强版的字符串，用反引号“`”,除了作为普通字符串，还可以用来定义多行字符串，也可以在字符串中加入变量和表达式。1.4ECMAScript6.0基础多行字符串

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.

字符串中调用函数function

fun(){

return

"ChuJiuLiang!"

}

let

string2

=

`Welcomto${fun()}`

console.log(string2);

//

WelcomtoChuJiuLiang!

Vue.js开发就业前景Web前端开发人才需求量大，供不应求，薪酬高，待遇好，就业前景宽广！

这么好的机会，还等啥？努力学习吧！本章小结本章主要介绍了Vue.js由来及如何配置Vue.js生产环境的方法。对Vue3.x新特性进行讲解。详细讲解了Vue.js引入方法及devtools调试工具的使用方法。结合2个Vue版本，详细介绍Vue实例创建方法、App组件定义及组件内的el、data、methods等常用的选项。对常用的Vue.js开发工具进行了介绍，主要对业界主流的VSCode、HBuilderX进行介绍，在实际开发过程中，可以根据实际工程的需要和个人喜爱去选择合适的开发工具。最后介绍ECMAScript6的一些基础知识。主要包括let和const、解构赋值、箭头函数、展开运算符和模板字符串等方面的基础知识，为后期项目的开发提供基础条件。思考与拓展总结与提高教学目标第2章

Vue.js基础（5课时）1.理解MVVM模式的工作机制2.掌握多种类型数据绑定的方法3.掌握计算属性与方法在使用上的区别（重点）4.学会使用侦听属性处理数据变化的相关事务5.理解生命周期钩子函数在使用上的差异性6.学会定义及使用数据对象7.掌握数据中数组对象的变异与非变异方法(难点)2.1MVVM模式

MVVM是Model-View-ViewModel的简写，它是一种基于前端开发的架构模式，其核心是提供对View和ViewModel的双向数据绑定，这使得ViewModel的状态改变可以自动传递给View，即所谓的数据双向绑定。Angular、React、Vue.js三大主流MVVM框架

在MVVM架构下，View和Model之间并没有直接的联系，而是通过ViewModel进行交互，Model和ViewModel之间的交互是双向的，因此View数据的变化会同步到Model中，而Model数据的变化也会立即反映到View上。ViewModel通过双向数据绑定把View层和Model层连接了起来，而View和Model之间的同步工作完全是自动的，无需人为干涉。

因此开发者只需关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由MVVM来统一管理。

2.1.2MVVM模式的前端框架发展趋势从/@angular/core-vs-angular-vs-react-vs-vue网站上可以查看下载量和使用状态等数据，其下载量和状态对比结果如下图所示。2.1.3MVVM模式的应用(1)

<!--定义View

-->

<div

id="app">

<h3>教材列表</h3>

<ol>

<li

v-for="book

in

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

</ol>

</div>

案例演示：【例2-1】MVVM模式的应用

<script>

//定义JS数组对象Model,并作为组件内data选项中的books的引用值

var

myModel

=

[

{

bookName:

"Web前端开发技术"

},

{

bookName:

"JSP程序设计"

},

{

bookName:

"计算机网络"

},

];

//

创建Vue实例app,也称为ViewModel,用来连接View与Model

const

app

=

Vue.createApp({

//

定义data选项

data()

{

return

{

books:

myModel,

//

引用JS数组对象

};

},

});

app.mount("#app");

//

挂载到DOM上

</script>

2.1.3MVVM模式的应用(2)案例演示：【例2-2】数据双向绑定与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前端框架技术与实战',

//给定初始值,视图同步变化

press:

'',

//为空串

price:

0.0

//为0

}

}

});

app.mount('#app');

//

挂载到DOM上

</script>

2.2数据绑定与插值Vue.js中插值分为文本、HTML代码、属性、JavaScript表达式等多种形式。文本插值：<p>我的姓名是{{myName}}。</p>HTML代码：

<p>v-html指令：<spanv-html="htmlCode"></span></p>属性插值：<av-bind:href="url"v-bind:title="title">中国教育和科研计算机网</a>JavaScript表达式插值：<标记名称>{{JS合法表达式}}</标记名称><标记名称>{{5+5*3}}</标记名称><标记名称>{{Math.pow(x,2)+5}}</标记名称><标记名称>{{yesNo?'确定':'取消'}}</标记名称><标记名称>{{message.split('').reverse().join('')}}</标记名称>数据绑定最常见的形式就是使用“Mustache”语法:{{}}。案例演示：【例2-3】插值的综合应用2.3计算属性与方法问题导入：当模板中插入过多的业务逻辑，会使模板过重且后期难以维护。<divid='app'>{{information}}--{{information.split('').reverse().join('')}}</div>基本语法//在Vue实例vm中定义选项computedcomputed:{

businessHandler(){//业务逻辑处理代码returninformation.split('').reverse().join('');

}

【例2-4】计算属性的应用场景(

vue-2-4.html)。

要求：使用计算属性定义maxNumber、minNumber等函数实现从给定数组中找出最大数和最小数。2.3.1计算属性基础应用解决方案：采用计算属性（computed）来处理一些复杂逻辑时非常有用。计算属性定义为函数形式，在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，最终返回一个结果就可以。2.3.1计算属性基础应用

设计要求：(1)使用计算属性定义maxNumber函数，找出数组中最大数；(2)使用方法定义minNumber函数，找出数组中最小数。比较计算属性和方法的差异性。Methods配置选项：

methods:{

findMaxNumber(){

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

}

},计算属性缓存与方法比较计算属性和方法区别：(1)可以将同一函数定义为一个方法（而不是计算属性）。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。computed是局部渲染，而methods是全部渲染。(2)methods必须需要一定的条件去触发，而computed则不需要,实时响应。(3)computed依赖缓存，如果不需要经常变动时，可使用computed；需要经常变动时，可使用methods。如果需要传参数，就用methods。252.3.2计算属性的setter和gettercomputed属性默认只有getter，但Vue允许设计人员在需要时可以为其提供一个setter。

在computed选项下设置setter，页面信息会立即渲染，并完成更新工作。如果使用methods选项，并为其定义相同的方法set()，只有调用时才能完成更新工作。//在Vue实例vm对象中定义

computed:{

myObject:{//myObject定义为对象

set:function(newValue){//对新值进行相关业务逻辑处理 },

get:function(){return相关参数(表达式);}}}定义setter时，需要定义成带参数的set，参数为newValue，其值为字符串，渲染时可从中提取相关信息即可。必须在computed属性下，必须定义一个对象，如myObject，用于包裹set和get函数。然后通过赋值语句(或在调试状态下)给myObject赋值，实现数据的变化。案例演示：【例2-5】计算属性的setter和getter属性应用实战-更新图书/定价信息26更新图书/定价信息<div

id="app">

<p

v-once>初始信息：图书名称/定价：{{bookName}}/{{price}}元</p>

<h4>computed设置后立即更新：</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前端开发技术",

price:

59.5,

};

},

computed:

{

myBooks:

{

set:

function

(newValue)

{

//

重新设置

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前端框架技术与实战";

this.price

=

69.8;

},

},

};

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

</script>

2.4侦听属性watch-1问题导入：有时需要在数据发生变化时，执行一些特定的指令操作，该如何处理呢？解决方案：Vue提供更通用的方法，通过watch选项来响应数据的变化。watch可以为实例添加被观察的对象，并在对象被修改时调用设计人员自定义的方法。watch可以观察简单变量、数组和对象变化，但使用方法略有不同。2.4.1watch属性基本用法

在watch选项中，需要将变量changeValue定义为函数变量，参数分别为newValue、oldValue。其中newValue是变化后的值，oldValue为变化之前的值。//HTML部分<p>需要侦听的绑定数据变量：{{changeValue}}</p>//在JS部分，Vue组件中定义

watch:{changeValue(newValue,

oldValue){//侦听数据变化需要处理的业务逻辑代码} }//通过实例修改data中的数据constinstance=Vue.createApp(App).mount("#app");instance.changeValue=5000;//立即触发侦听案例演示：【例2-6】微信零钱变更动项目实战28【例2-6】微信零钱变更动项目实战

<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

+

"

变为

"

+

newValue

+

"元!");

//

告警输出前后值

},

},

methods:

{

changeMoney()

{

this.loop

=

this.loop

+

1;

//

统计次数

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;//立即触发侦听

</script>2.4.2watch属性高级用法

通常情况下，watch属性并不关心第一次绑定的数据，也不会执行监听函数。只有数据发生改变才会执行。

如果需要在最初绑定值时就能执行函数，则就需要使用handler方法和immediate属性，并将immediate:true。如果还需要尝试侦听数据的变化，还需要设置deep:true。deep：

false(默认值)，表示不进行深度监听；true时，表深度侦听。任何修改changeValue里面任何一个属性都会触发这个监听器里的handler。

注意：watch深度监听对象或数组的变化，在变更(不是替换)对象或数组时，旧值将与新值相同。//HTML部分<p>需要侦听的绑定数据变量：{{changeValue}}</p>//在JS部分//Vue实例watch选项中定义

watch:{changeValue:{handler(newValue,oldValue){//处理代码},deep:true,//深度侦听

immediate:true//立即先去执行handler方法}}constinstance=Vue.createApp(App).mount("#app");//定义实例instance.tuition=5000;//基础数据类型-数值="张晓娟";//基础数据类型-字符串//控制台修改方法instance.$data.tuition=4500案例演示：【例2-7】watch属性的高级应用2.5生命周期钩子函数2.5.1生命周期钩子函数作用

//在Vue实例中定义以下选项beforeCreate:function(){}created:function(){}beforeMount:function(){}mounted:function(){}beforeUpdate:function(){}updated:function(){}beforeUnmount:function(){}unmounted:function(){}renderTriggered(event){}//虚拟DOM被触发渲染时调用renderTracked(event){}//虚拟DOM重新渲染时调用

2.5.1-Vue生命周期流程图-2-5.png案例演示：【例2-8】生命周期钩子函数综合应用

beforeCreate()

{

console.log("子组件创建前...");

},

created()

{

console.log("子组件创建啦!");

},

beforeMount()

{console.log("子组件挂载前...");

},

mounted()

{

console.log("子组件挂载啦!");

},

beforeUpdate()

{

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

},

updated()

{

console.log("子组件挂载啦!");

},

beforeUnmount(){

console.log("子组件卸载前...");

},

unmounted(){

console.log("子组件卸载啦!");

},

2.6Vue中数组变动更新问题导入：当数组元素发生变化时，需要及时渲染到页面上去，但不是所有方法都能够触发视图更新的。constinstance=Vue.createApp(App).mount('#app');instance.items[indexOfItem]=newValue//利用索引赋值instance.items.length=newLength//直接修改数组的长度Vue.js针对这两个问题给出了相应的解决办法，使用这些方法，可以触发状态更新。使用Vue全局方法Vue.set()或者使用instance.$set()实例方法。参见“2.7.2Vue实例属性与方法”小节。使用数组变异方法。例如push()、unshift()、splice()、pop()、shift()、sort()、reverse()。使用非变异方法。例如filter()、concat()、slice()。constinstance=Vue.createApp(App).mount('#app'); letnewItems=instance.items.slice(1,3)案例演示：【例2-9】数组元素更新方法的应用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方法类似，会在控制台输出调试信息。但是，默认情况下，console.debug输出的信息不会显示，只有在打开显示级别在“verbose”的情况才会显示。console.warn()：显示警告提示；console.error()：显示错误提示。单击“控制台方法的应用”按钮后，控制台会显示如左图所示。2.7控制台console对象2.7.2占位符

占位符//data中定义number:13.343434,student:{name:"",age:25}//在js相关方法中定义console.log("%d年%d月%d日",2011,3,26);console.log("圆周率是%f",Math.PI);console.log("数值为%f",this.number);console.log("学生信息为%o",this.student);console.log("学生姓名:%c"+,'color:red');//CSS样式%cconsole对象显示信息的5种方法，均可以使用printf风格的占位符。不过，占位符的种类比较少，只支持字符(%s)、整数(%d或%i)、浮点数(%f)、对象(%o)和CSS样式(%c)5种。2.7控制台console对象2.7.3分组显示console.group() 分组显示console.group()console.group("学习第1小组");console.log("第1组-张小东");console.log("第1组-李大为");console.groupEnd(); console.group("学习第2组");console.log("第2组-储久凤");console.log("第2组-王祥云");console.groupEnd();【语法说明】console.group()表示分组开始，后面跟随若干console.log()。console.groupEnd()表示分组结束。执行效果如图2-22所示。当点击组标题，该组信息会折叠或展开，如下图所示。2.7控制台console对象2.7.4查看对象的信息console.dir()console.dir(this.student)案例演示：【例2-10】console对象的方法综合应用const

App

=

{

data()

{

return

{

information:

"console方法的使用",

number:

13.23455,

score:

0,

student:

{

name:

"储远大",

age:

21,

study:

function

()

{

console.log("Vue.js渐进式框架!");

},

},

};

},

本章小结

本章主要介绍了MVVM模式的工作机制；以及使用数据绑定来编写Vue.js的简单的单页应用程序。同时介绍下常用的插值与数据绑定的方法。

重点讲解computed计算属性、watch侦听属性及生命周期钩子函数的应用场景及基础编程方法。特别要注意，在computed和methods选项中定义方法时，执行的过程是不同的。在watch选项下可以定义数据发生变化的业务逻辑，完成相关事务的处理。在watch属性的高级用法中，会定义handler()方法，并根据业务需要设置immediate和deep属性，其值为true时,可以进行立即绑定数据和深度观察数据的变化。思考与拓展总结与提高本章小结

对Vue的数据选项中数组方法的应用进行重点阐述。数组操作方法分为变异方法和非变异方法。所谓变异方法就是实质性改变数组元素，并且能够触发视图更新。所谓非变异方法就是基于原数组产生新的数组，但原数组的元素并没有发生变化，即未被修改，所以不会触发视图更新，但新生成的数组还是会触发视图更新的。

最后对console对象常用的方法进行简单地介绍。思考与拓展总结与提高38思政案例教学目标理解Vue.js指令的定义与分类。掌握条件渲染指令的使用与注意事项。掌握列表渲染指令v-for的多种定义方法及与key属性配合使用的方法。掌握数据绑定的多种方式。掌握事件处理指令及事件修饰符的使用方法。掌握其它内置指令的作用与使用方法。掌握Vue自定义指令定义与注册的方法。39第3章

Vue.js指令（6学时）40Vue.js指令概述解决方案：Vue.js中的指令是以带前缀（v-）的HTML属性(attribute)的形式出现。指令是Vue对HTML标记新增的、拓展的属性，这些属性不属于标准的HTML属性。只有Vue.js认为是有效的，能够处理它。问题导入：Vue给HTML标记增加很多额外的属性（如v-if），但是浏览器并不能正确解析？那么如何才能让JS引擎去理解并解析它们呢？（例如需要有条件渲染某一标记/元素，该如何处理呢？）指令指令(directive)本质是模板中出现的特殊符号，让处理模板的JS库能够知道对相关的DOM元素进行一些相应的处理。指令的作用：是当表达式的值改变时，将其产生的连带影响，响应式(Reactive)地作用于DOM上，也就是双向数据绑定。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等。【基础语法】<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：标记名称；prefix-directiveId：通用的指令格式，如v-if，v是前缀，if是指令ID。expressions表示表达式。一些指令能够接收一个argument(参数)，在指令名称之后以冒号表示。指令的值是表达式，指令的值和在文本插值表达式{{}}的写法是一样的。指令既可以用于普通标记，也可以用在<template></template>标记上。3.1条件渲染v-if：用于条件性地渲染一块内容。当指令的表达式的值为true时，内容被渲染。v-else：必须搭配v-if使用，需要紧跟在v-if或者v-else-if后面，否则不起作用。可以用v-else指令给v-if添加一个“else”块。v-else-if：充当v-if的else-if块，可以链式的使用多次，以实现switch语句的功效。【基本语法】<!--以下v-if、v-else指令的示例--><标记名称

v-if="flag">v-if指令：当flag为真时，我闪亮登场！</标记名称><标记名称v-else>v-else指令：当flag为假时，哎呀！我暴露！</标记名称><!--以下v-if、v-else-if、v-else指令的示例，替代switch结构--><标记名称

v-if="expressionA">成绩等级为优秀！</标记名称><标记名称

v-else-if="expressionB">成绩等级为良好！</标记名称><标记名称

v-else>成绩等级为不合格！</标记名称>条件渲染综合应用案例演示：【例3-1】条件渲染综合应用<div

id="app">

<div><fieldset>

<legend>使用v-if、v-else指令综合应用</legend>

<button

type="button"

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

<h3

v-if="flag">v-if指令：当flag为{{flag}}时，我被渲染啦！</h3>

<h3

v-else>v-else指令：当flag为{{flag}}时，这回该轮到我被渲染啦！</h3>

<template

v-if="flag">

<h4>template模板内容</h4>

<p>渐进式前端框架Vue.js简单易学！</p>

</template></fieldset>

</div>

<div>

<fieldset>

<legend>v-if、v-else-if、v-else指令综合应用</legend>

<label

for="">

政府采购评审专家考试成绩：</label>

<input

type="text"

v-model="score"

/>

<h3

v-if="score>=90">结果：优秀！</h3>

<h3

v-else-if="score>=80">结果：合格！</h3>

<h3

v-else>结果：不合格！，请补考！！</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值的应用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值应该绑定在<template>上而不是它的子元素。格式如下：<!--Vue3.x--><templatev-for="iteminlist":key="item.id"><div>...</div><span>...</span></template>问题导入：由于Vue通常会复用已有元素而不是从头开始渲染。解决方案：在v-if/v-else/v-else-if中，key值绑定不再是必须的，因为Vue3.x会自动生成对应的唯一key值。若在Vue3.x中（如v-if）手动绑定key值，那么其他对应指令中（如v-else）也必须手动绑定key值。<templatev-for>中的key值应该绑定在<template>中而不再绑定在它的子元素中。3.1.2Vue3.x中key值的应用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属性管理可复用的元素3.1.3v-show指令v-show指令用于根据条件展示元素，从而实现元素的隐藏与显示。有v-show的元素始终会被渲染并保留在DOM中。v-show是简单地切换元素的CSS属性display。【基本语法】<标记名称v-show="true|false">标记的内容</标记名称><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节点是否要显示。不同点：(1)实现方式不同（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指令基于一个数组来渲染一个列表。v-for指令可以使用shoppingin|ofshoppings形式的特殊语法，其中shoppings是源数据数组(可以是普通数组或对象数组)，而shopping则是被迭代的数组元素的别名。v-for指令的值中可以使用关键字in或of。“|”表示或者的意思。1.使用单一参数的v-for指令循环遍历对象数组<ul><liv-for="shoppinginshoppings">或<liv-for="shoppingofshoppings"> {{shopping}}</li> </ul>【语法说明】

定义的数组类型的数据shoppings，数组中每个元素有3个属性，分别是bookName、issn、author，用v-for对li标记循环渲染，效果如下图所示。【基本语法】<divid="vue34"<ul>

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

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

</li>

</ul></div>【语法说明】v-for属性值中支持第二个参数index，作为当前项的索引。不可以放在第一个参数位置上，否则渲染后不会出结果。多个参数必须使用括号包裹，并使用逗号分隔参数。依次访问数组中对象的属性shopping.bookName、shopping.issn、shopping.author。渲染结果如图所示。2.使用两个参数的v-for指令循环遍历对象数组3.2列表渲染（v-for指令）3.使用三个参数的v-for指令循环遍历对象的属性v-for指令也可以对对象的属性进行遍历，使用(

value,key,index)in

student的形式来遍历数组元素。【基本语法】<ul>

<liv-for="(value,key,index)instudent">{{index}}-{{key}}-{{value}}</li> </ul>【语法说明】student是一个对象，它有3个属性，分别为name、class、age。采用v-for指令分别遍历对象的每一个属性。3个参