
第3章

Vue基础语法




Vue使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据，因此对于大多数开发者来讲上手是非常容易的。在Vue的分层设计思想中，模板属于视图层，有了模板功能，开发者可以方便地将项目组件化，也可以方便地封装定制化的通用组件。在编写组件时，模板的作用是让开发者将重心放在页面布局渲染上，而不需要关心数据逻辑。同样，在Vue组件内部编写数据逻辑代码时，也无须关心视图的渲染。

3.1ES6新特性

当前版本的ES6是在2015年6月正式发布的，所以又称为ECMAScript 2015。它的目标是使JavaScript语言可以用来编写复杂的程序，成为企业级脚本语言。

3.1.1ES6简介

1997年，为了统一各种不同的Script脚本语言，ECMA(欧洲计算机制造商协会)以JavaScript为基础制定了ECMAScript标准规范，也就是ECMAScript 1.0。JavaScript和JScript都是ECMAScript的标准实现者，随后各大浏览器厂商纷纷实现了ECMAScript标准。

由此可知，ECMAScript是浏览器脚本语言的规范，而我们熟知的JavaScript则是规范的具体实现。

ECMAScript发布的历史版本见表31。


表31ECMAScript的历史版本





版本
年份
描述
第1版
1997年
制定了语言的基本语法
第2版
1998年
较小改动
第3版
1999年
引入了正则、异常处理、格式化输出等。IE开始支持
第4版
2007年
过于激进，对ES3做了彻底升级，未发布 
第5版
2009年
引入了严格模式、JSON，扩展对象、数组、原型、字符串、日期方法 
第6版
2015年
模块化、面向对象语法、Promise、箭头函数、let、const、数组解构赋值等



ES6提供了许多新特性，但并不是所有的浏览器都能够完美支持。好在目前各大浏览器自身也加快速度兼容ES6的新特性，其中对ES6新特性支持最友好的是Chrome和Firefox浏览器。

为什么要学习ES6？

(1) ES6的版本变动内容最多，具有里程碑意义。

(2) ES6加入许多新的语法特性，编程实现更简单、高效。

(3) ES6是前端发展趋势，是就业的必备技能。


3.1.2let和const
1. 基本用法

ES6新增了let和const命令，用于声明变量。

在ES5之前，JavaScript定义变量常用的关键字是var，var有一个问题，就是定义的变量有时会莫名其妙地成为全局变量，示例代码如下： 


{

var b = 1;

let a = 10;

}

console.log(b); //1

console.log(a);   //a is not defined




在上面的示例代码中，分别用var和let声明了变量，然后在代码块之外调用这两个变量，结果let声明的变量报错，而var声明的变量返回了正确值。这表明，let声明的变量只在它所在的代码块有效，而var在全局变量中都有效。

在for循环的计数器中，var和let的区别更加明显，示例代码如下： 


for (var i = 0; i < 5; i++) {

  console.log("for循环(内)部：" + i)

}

console.log("for循环(外)部：" + i);




输出的结果如图31所示。



图31计数器中使用var声明变量


在上面的代码中，变量i是在for循环的内部声明的，而循环体的外部也能访问，其值为5，证明i是全局变量。

let所声明的变量，只在let命令所在的代码块内有效。把上例中的var改为let，代码如下： 


for (let i = 0; i < 5; i++) {

  console.log("for循环(内)部：" + i)

}

console.log("for循环(外)部：" + i);




输出的结果如图32所示。



图32计数器中使用let声明变量


在上面的代码中，变量i只在for循环体内有效，如果在循环体外引用就会报错。

const声明的变量是常量，不能被修改。

常量指的是无法在程序正常运行的过程中修改值。一方面无法通过重新赋值进行修改，另一方面也无法进行重新声明。在JavaScript中，常量通过关键字const声明，示例代码如下： 


const number = 66;

console.log(number)

number++;

console.log(number)




输出的结果如图33所示。



图33const声明的常量不能被修改


const实际上保证的并不是常量的值不得改动，而是常量指向的那个内存地址所保存的数据不得改动。


2. 不允许重复声明

let不允许在相同作用域内重复声明同一个变量，代码如下： 


//报错

function f() {

let a = 10;

var a = 1;

}



//报错

function f() {

let name = 'admin';

let name = 'beixi';

}




3. ES5的块级作用域 

ES5只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。如下面的实例，内层变量可能会覆盖外层变量，代码如下： 


var tmp = new Date();

function f() {

console.log(tmp);

if (false) {

var tmp = 'hello world';

}

}



f(); //输出： undefined




上面代码的原意是，if代码块的外部使用外层的tmp变量，内部使用内层的tmp变量，但是，函数f执行后，输出结果为undefined，原因在于变量提升，从而导致内层的tmp变量覆盖了外层的tmp变量。

let命令实际上为JavaScript新增了块级作用域，代码如下： 


function f() {

let age = 18;

if (true) {

let age = 66;

}

console.log(age); 

}

f(); //输出： 18




在上面的示例代码中声明了两个age变量，运行后输出18。这表示外层代码块不受内层代码块的影响。

3.1.3变量的解构赋值

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。本节主要讲解数组的解构赋值、对象的解构赋值、字符串的解构赋值、数值和布尔值的解构赋值及函数参数的解构赋值等。

1. 数组的解构赋值

在ES6之前想要为变量赋值，只能指定其值，代码如下： 


let a = 1;

let b = 2




而在ES6中可以写成这样，代码如下： 


let ［a,b］ = ［1,2］

//a = 1, b = 2




如此，只要等号两边的模式一样，就可以成功地解构赋值。如果两边的模式相同，但是右边少值，就会解构不成功，导致左边的变量值为undefined，代码如下： 


let ［a,b,c］ = ［1,2］

a = 1, b = 2, c = undefined




注意： 只有左右两边的格式一定要对等，数量可以不对等。

还有一种情况，等号左边为数组，但是等号右边为其他值，这将会报错，代码如下： 


let ［a］ = 1;

let ［a］ = false;

let ［a］ = NaN;

let ［a］ = undefined;

let ［a］ = null;

let ［a］ = {};



//以上都会报错




在数组解构赋值中允许指定默认值。当一个位置没有值时，也就是当模式相同，但是右边没有值时可以指定默认值，代码如下： 


let ［a,b=4,c］ = ［1, , 3］;

console.log(a); //输出： 1

console.log(b); //输出： 4

console.log(c); //输出： 3




2. 对象的解构赋值

变量的解构赋值和数组的解构赋值不太一样，数组的元素必须和赋值的元素的位置一致，这样才能正确地赋值，而对象的解构赋值则是等号两边的变量和属性同名即可取到正确的值，否则值为undefined，代码如下： 


let {a,b} = {a:'23',b:'3'}

let {a,b} = {b:'3',a:'23'}



//上面两个的值都是 a: 23 b: 3



let {a,b} = {a:'3',c:'d'}

//a: 3 b: undefined




如果等号左边的变量名不能和等号右边的对象的属性名一致，则必须写成如下格式： 


let {a:b} = {a:'ss'} //b：ss

//a是属性名，b才是实际赋值的变量名




对象的解构也可以指定默认值，代码如下： 


let {x = 3} = {}

//x: 3

let {x,y = 5} = {x : 1}

//x: 1, y: 5

let {x: y = 5} = {}

//y = 5

let {x: y = 5} = {x : 4}

//y = 4

let {x: y = 'hhhh'} = {}

//y = 'hhhh'




3. 字符串的解构赋值

如果赋值的对象是字符串，则字符串将被分割为数组的格式，一一对应赋值，代码如下： 


let ［a, b, c, d, e, f］ = 'string';

console.log(a); //输出： s

console.log(b); //输出： t

console.log(c); //输出： r

console.log(d); //输出： i

console.log(e); //输出： n

console.log(f); //输出： g




因为字符串具有length这个属性，因此还可以对该属性进行解构赋值，代码如下： 


let { length: len } = 'string';

console.log(len); //输出： 6




4. 数值和布尔的解构赋值

数值和布尔值也能进行解构赋值，此时它们都会被转换为对象，代码如下： 


let { toString: tos1 } = 456;

let { toString: tos2 } = false;







console.log(tos1 === Number.prototype.toString); //输出： true

console.log(tos2 === Boolean.prototype.toString); //输出： true




5. 函数的解构赋值

函数的参数也可以进行解构赋值，这是一个解构赋值运用比较多的场景，其实就是对之前所讲的数组、对象、布尔值、数值解构赋值的一种实际使用，代码如下： 


function add(［a, b］) {

return a + b;

}

console.log(add(［2, 3］)); //输出： 5




6. 用途

变量的解构赋值使用场景很多。

1) 场景1： 交换变量的值

示例代码如下： 


let x = 1;

let y = 2;

［x,y］ = ［y,x］;

//x = 2,y = 1;




上面代码交换了x和y的值，这样的写法不仅简洁，而且易读，语义非常清晰。

2) 场景2： 从函数返回多个值

函数只能返回一个值，如果要返回多个值，则只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便了，代码如下： 


//返回一个数组

function example() {

return ［1, 2, 3］;

}

let ［a, b, c］ = example();



//返回一个对象

function example() {

return {

foo: 1,

bar: 2

};

}

let { foo, bar } = example();




3) 场景3： 函数参数的定义

解构赋值可以方便地将一组参数与变量名对应起来，代码如下： 


//参数是一组有次序的值

function f(［x, y, z］) { ... }

f(［1, 2, 3］);



//参数是一组无次序的值

function f({x, y, z}) { ... }

f({z: 3, y: 2, x: 1});




4) 场景4： 提取JSON数据

解构赋值对提取JSON对象中的数据尤其有用，代码如下： 


let jsonData = {

id: 42,

status: "OK",

data: ［867, 5309］

};



let { id, status, data: number } = jsonData;



console.log(id, status, number);

//42, "OK", ［867, 5309］




上面的代码可以快速提取 JSON 数据的值。

3.1.4模板字符串

模板字符串替换+操作符来拼接字符串，并且支持换行。

先来看一段传统字符串写法，代码如下： 


let name = "Tom";

let occupation = "doctor";

//传统字符串拼接

let str = "He is "+ name +",he is a "+ occupation;




而用ES6简洁的字符串拼接，可以写成这样： 


let name = "Tom";

let occupation = "doctor";

//模板字符串拼接

let str = `He is ${name},he is a ${occupation}`;




对比两段拼接的代码，模板字符串使我们不再需要反复使用双引号(或者单引号)了，而是改用反引号标识符(`)，插入变量时也不需要再使用加号(+)了，而是把变量放入${}即可。

模板字符串是增强版的字符串，提示以下两点。 

1. 可以定义多行字符串

传统的多行字符串，写法如下： 


let str = "write once ," +

"run anywhere";




模板字符串的写法如下： 


let str = `write once ,

run anywhere`;




直接换行即可，但是需要注意的是模板字符串中所有的空格和缩进都会被保留在输出中。也就是如果控制台输出字符串str，代码上换了行，则控制台输出的内容也会换行。

2. ${}中可以放任意的JavaScript表达式

花括号内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性或函数调用。

(1) ${}中可以是运算表达式，代码如下： 


var a = 1;

var b = 2;

var str = `the result is ${a+b}`;

//进行加法运算,结果：the result is 3




(2) ${}中可以是对象的属性，代码如下： 


var obj = {"a":1,"b":2};

var str = `the result is ${obj.a+obj.b}`;

//对象obj的属性

//结果：the result is 3.




(3) ${}中可以是函数的调用，代码如下： 


function fn() {

return 3;

}

var str = `the result is ${ fn() }`;

//函数fn的调用，结果：the result is 3




3.1.5标签模板

标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的就是函数，是一个专门处理模板字符串的函数，紧跟在后面的模板字符串就是它的参数，示例代码如下： 


var name = "张三";

var height  = 1.8;



fn`他叫${name},身高${height}米。`;

//标签+模板字符串



//定义一个函数，作为标签








function fn(arr,v1,v2){

console.log(arr); 

//结果：［ "他叫","，身高","米。" ］

console.log(v1); 

//结果：张三

console.log(v2); 

//结果：1.8

}




以上代码有两处大家要注意，首先是fn函数，这是一个自定义的函数，它有3个参数，分别是arr、v1、v2。函数fn()的调用方式跟以往的调用方式不太一样，以往使用括号()表示函数调用执行，这一次在函数名后面直接加上一个模板字符串，代码如下： 


fn`他叫${name},身高${height}米。`;




这样就是标签模板，可以理解为标签函数+模板字符串，这是一种新的语法规范。

接下来看函数的3个参数，从代码的打印结果可以看到它们运行后对应的结果，arr的值是一个数组： ［ "他叫","，身高","米。"］，而v1的值是变量name的值： “张三”，v2的值是变量height的值： 1.8。

观察结果可以发现： 第1个参数arr是数组类型，它的内容是模板字符串中除了${}以外的其他字符，按顺序组成了数组的内容，所以arr的值是［"他叫","，身高","米。"］；  第2个和第3个参数则是模板字符串中对应次序的变量name和height的值。

标签模板是ES6带来的一种新语法，掌握了标签模板的用法后，可以利用这一特性更好、更快捷地实现各种功能。

3.1.6字符串新增方法
1. raw()转义

String.raw()是一个模板字符串的标签函数，往往用于模板字符串的处理方法，返回值是自动转义的字符串，代码如下： 


//常用形式

let name = "Bob";

String.raw `Hi＼n${name}!`;

//"Hi＼nBob!"



//正常函数形式

//`foo${1 + 2}bar`

//等同于

String.raw({ raw: ［'foo', 'bar'］ }, 1 + 2)//"foo3bar"




2. includes()、startsWidth()、endsWidth()包含

之前由indexOf方法判断一个字符串是否包含在另一个字符串中，ES6 又提供了3种新方法。

(1) includes(searchStr［, position］)： 返回布尔值，判断字符串中是否含有指定的子字符串，如果返回值为true，则表示含有，如果返回值为false，则表示未含有。第2个参数选填，表示开始搜索的位置。

(2) startsWith(searchStr［, position］)： 返回布尔值，判断指定的子字符串是否出现在目标字符串的开头位置，第2个参数选填，表示开始搜索的位置。

(3) endsWith(searchStr［, length］)： 返回布尔值，判断子字符串是否出现在目标字符串的尾部位置，第2个参数选填，表示针对前n个字符。

示例代码如下： 


let s = 'Hello world!';



s.startsWith('Hello')//true

s.endsWith('!')//true

s.includes('o')//true



s.startsWith('world', 6)//true 从index为n开始

s.endsWith('Hello', 5)//true 前n个字符

s.includes('Hello', 6)//false 从index为n开始




上面代码表示，使用第2个参数n时，endsWith的行为与其他两种方法有所不同。它针对前n个字符，而其他两种方法针对从第n个位置直到字符串结束。

3. repeat()重复

repeat()方法返回一个新字符串，表示将原字符串重复n次，代码如下： 


'x'.repeat(3)//"xxx"

'hello'.repeat(2)//"hellohello"

'na'.repeat(0)//""

'na'.repeat(NaN)//"" 参数NaN等同于 0




注意： 如果参数是小数，则会被取整。如果repeat的参数是负数或者Infinity，则会报错。

4. padStart()、padEnd()补全

如果某个字符串不够指定长度，则会在头部或尾部补全。padStart()用于头部补全，而padEnd()用于尾部补全。

(1) str.padStart(targetLength ［, padString］)用另一个字符串填充当前字符串(如果需要，则重复填充)，以便产生的字符串达到给定的长度。从当前字符串的首部(左侧)开始填充。

(2) str.padEnd(targetLength ［, padString］)用一个字符串填充当前字符串(如果需要，则重复填充)，返回填充后达到指定长度的字符串。从当前字符串的末尾(右侧)开始填充。

示例代码如下： 


'x'.padStart(5, 'ab')//'ababx'

'x'.padStart(4, 'ab')//'abax'



'x'.padEnd(5, 'ab')//'xabab'

'x'.padEnd(4, 'ab')//'xaba'




在上面的代码中，padStart()和padEnd()一共接受两个参数，第1个参数是字符串补全生效的最大长度，第2个参数是用来补全的字符串。

如果省略第2个参数，则默认使用空格补全长度，代码如下： 


'x'.padStart(4)//'   x'

'x'.padEnd(4)//'x   '




5. trim()、trimRight()(trimEnd())、trimLeft()(trimStart())去空

trimLeft()是trimStart()的别名，trimRight()是trimEnd()的别名。

(1) trim()方法会从一个字符串的两端删除空白字符。在这个上下文中空白字符是所有的空白字符(Space、Tab、nobreak Space等)及所有行终止符字符(如LF、CR)。

(2) trimRight()方法从一个字符串的右端移除空白字符，又称trimEnd。

(3) trimLeft()方法从一个字符串的左端移除空白字符，又称trimStart。

示例代码如下： 


const h = ' hello world! ';



h.trim();   //'hello world!'



h.trimLeft(); //'hello world! '

h.trimStart(); //'hello world! '



h.trimEnd(); //' hello world!'

h.trimRight(); //' hello world!'




除了空格键，对字符串头部(或尾部)的Tab键、换行符等不可见的空白符号也有效。

6. substring()和slice()截取

substring()方法返回一个字符串在开始索引到结束索引之间的一个子集，或从开始索引直到字符串的末尾的一个子集。返回新的字符串，不改变原来的字符串。

(1) str.substring(indexStart［, indexEnd］)： indexStart需要截取的第1个字符的索引，该字符作为返回的字符串的首字母。［，indexEnd］可选，一个0到字符串长度之间的整数，以该数字为索引的字符不包含在截取的字符串内(左闭右开)。

示例代码如下： 


const h = 'helloworld!';

//如果省略 indexEnd，则substring 提取字符,一直到字符串末尾

h.substring(5)//'world!'

//如果任一参数小于 0 或为 NaN，则被当作 0







h.substring(0,5)//'hello'

h.substring(-1,5)//'hello'

//如果 indexStart 等于 indexEnd，则substring 返回一个空字符串

h.substring(5,5)//''

//如果任一参数大于 stringName.length，则被当作 stringName.length

h.substring(0,100)//'helloworld!'

//如果 indexStart 大于 indexEnd，则 substring 的执行效果就像两个参数调换了一样

h.substring(-5,5);//'hello';

h.substring(5,-5);//'hello';




slice()方法用于提取某个字符串的一部分，并返回一个新的字符串，并且不会改动原字符串。

(2) str.slice(beginIndex［, endIndex］)参数和substring一样，只不过有差异。

和上面的示例作对比，代码如下： 


const h = 'helloworld!';

h.slice(5);//'world!' 同substring

h.slice(0,5); //"hello" 同substring



h.slice(-1,5); //'' 不同substring



h.slice(5,5); //'' 同substring



h.slice(0,100); //"helloworld!" 同substring



h.slice(-5,5); //'' 不同substring



h.slice(5,-5); //'w' 不同substring



h.slice(-6); //"world!"




可见slice方式的索引是可以倒数的，强烈推荐使用slice方式截取字符串，更好理解，不易出错。

3.1.7函数的扩展
1. 参数的默认值

在开发中，经常需要给函数的参数指定默认值，ES6之前给函数设置默认参数是这样实现的，示例代码如下： 


function person(n,a){

var name = n || 'admin';

var age = a || 18;

console.log(name,age);

}

person('beixi');   //输出：beixi 18

person(false,0);   //输出：admin 18




或运算符左侧为true，右侧为false。传入实参，直接返回左侧的值，否则返回右侧的值。如在person函数内，如果参数n没有传参，则变量name得到的值就是admin，如果传参了，变量name的值就为参数n的值。

但是，前提是参数对应的布尔值不能为false(数字0，空字符串等转换成布尔值也是false)，这就使这种方式存在一定的不足和缺陷。如在上面的示例中person(false,0)，在调用函数时传入实参false，结果都为或运算符的右侧值。

在 ES6 中允许直接在函数的参数后面设置默认值，示例代码如下： 


function person(name = 'admin',age = 18){

console.log(name,age);

}

person(); //输出：admin 18

person(false,20);   //输出：false 20




这样就不必再担心函数的实际传参与预期不相符了。

如果函数中有多个参数，有需要指定默认值的，有不需要指定默认值，则必须把设定默认值的参数放在后面，示例代码如下： 


//错误写法

function person(age = 18,name){

console.log(name,age);

}



//正确写法 

function person(name,age = 18){

console.log(name,age);

}




另外还有一点需要注意，由于参数变量是默认声明的，所以在函数体内不能再使用 let 或者 const 再次声明，示例代码如下： 


function person(age=18) {

let age = 20; //错误

}

person();




上面的示例代码，在函数被调用后就会报错，提示age已经被声明过了，如图34所示。



图34age及被声明的错误信息


2. 与解构赋值默认值结合使用

参数默认值可以与解构赋值的默认值结合起来使用，代码如下： 


function fn({a,b=2}){

console.log(a,b);

}

fn({})//输出：undefined 2

fn({a:1})//输出：1 2

fn({a:1,b:3})//输出：1 3




3. rest参数

rest参数是一个新的概念，中文意思是剩下的部分。

ES6之前，如果要获取函数中传入的多余参数，则可使用arguments，代码如下： 


function fn(a) {

console.log(a);  

for(var i = 0; i < arguments.length; i ++){

console.log(arguments［i］);

}

}

fn(1, 2, 3);//输出：1 1 2 3




从输出结果看，arguments对象其实包含的是所有参数，并不是多余参数。因为在调用函数时，给a变量赋值1，多余的参数是2和3，所有输出结果应为1 2 3才符合预期。

ES6中，新增了rest参数，可以用来获取多余的参数。语法为“…变量名”，代码如下： 


function fn(a,...values) {

values.forEach(function (item) {

console.log(item);

});

}

fn(1, 2, 3); //输出： 2 3




示例中，values 变量就是一个数组，包含传入的两个多余的参数 2、3。

这里需要注意一点，rest参数只能放在最后面，否则会报错，代码如下： 


//错误写法

function sum(a, ...values, b){



}

//正确的写法

function sum(a, b, ...values){



}




4. 箭头函数

ES6介绍了一种全新的定义函数的方式，也就是用箭头符号()来定义函数，故得名箭头函数。这里定义一个最简单的函数，代码如下： 


//传统写法

function sayHi() {

alert('hi');

}

//箭头函数写法

var sayHi = () => {

alert('hi');

}




如果需要传参，则可把参数写在圆括号里，代码如下： 


//传统写法

function sayHi(a,b) {

console.log(a+b);

}

//箭头函数写法

var sayHi = (a,b) => {

console.log(a+b);

}

sayHi(10,20); //输出：30




箭头函数的最大作用就是简化函数的实现，大大地减少了代码。如果只有一个参数，则可以不使用圆括号，如果只有一条语句，则花括号也可以省略，代码如下： 


//箭头函数写法

var sayHi = a => console.log(a);

sayHi(10); //输出：10




由于花括号被解释为代码块，所以如果箭头函数返回的是一个对象，则必须在对象外面加上括号，否则会报错，示例代码如下： 


//错误写法

var fn = () => {username: 'tom', age: 24};  



//正确写法

var fn = () => ({username: 'tom', age: 24});




箭头函数有以下几个注意点： 

(1) 箭头函数this为父作用域的this，不是调用时的this。

箭头函数的this永远指向其父作用域，任何方法都改变不了，代码如下： 


var name = 'admin';

var teacher = {

name: 'zhangsan',

showName: function () {

let showTest = ()=>alert(this.name);

showTest();







}

};

teacher.showName();   //弹出：zhangsan




箭头函数中的this其实是父级作用域中的this。箭头函数引用了父级的变量词法作用域，也就是一个变量的作用在定义时就已经被定义好了，当在本作用域中找不到变量时就会一直向父作用域中查找，直到找到为止，代码如下： 


var name = 'admin';

var teacher = {

name: 'zhangsan',

showName: ()=> {

let showTest = ()=>alert(this.name);

showTest();

}

};

teacher.showName();   //弹出：admin




上例中，showName也为箭头函数，其内部的this为全局window，showTest的this也就是showName函数的this，也是window，得到的this.name就为admin。

(2) 箭头函数不能作为构造函数，不能使用new，代码如下： 


//构造函数如下

function Person(p){

this.name = p.name;

}

//如果用箭头函数作为构造函数，则代码如下

var Person = (p) => {

this.name = p.name;

}




由于this必须是对象实例，而箭头函数是没有实例的，所以此处的this指向别处，不能产生Person实例，自相矛盾。

(3) 箭头函数没有原型属性，代码如下： 


var a = ()=>{

return 1;

}



function b(){

return 2;

}



console.log(a.prototype);  //undefined

console.log(b.prototype);   //{constructor: �瘙楋}





(4) 多重箭头函数就是一个高阶函数，相当于内嵌函数，代码如下： 


const add = x => y => y + x;

//相当于

function add(x){

return function(y){

return y + x;

};

}




3.2模板语法

由于所有的Vue.js的模板都是合法的HTML，所以能被遵循规范的浏览器和HTML解析器解析。在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应系统，Vue能够智能地计算出最少需要重新渲染多少组件，并把DOM操作次数减到最少。

简单地说，Vue模板语法采用的是前端渲染，前端渲染即是把数据填充到HTML标签中： 数据(来自服务器)+模板(HTML标签)=前端渲染(产物是静态HTML内容)。

3.2.1插值

插值就是将数据插入HTML文档中，包含文本、HTML元素、元素属性、JavaScript表达式等。

1. 文本插值

文本插值中用得最多的就是用双花括号的形式，如例31所示。

【例31】文本插值方式


//第3章/文本插值.html

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<!-- 引入Vue 3.x文件 -->

<script src="https://unpkg.com/vue@next"></script>

</head>

<body>

<div id="app">

<!-- 会与实例中data的属性绑定在一起，并且数据实现同步-->

<h1>{{message}}</h1>

</div></body>

<script>

//创建一个程序实例

const vm=Vue.createApp({

//data模型数据，值是一个对象







data(){

return{

message: "I LOVE YOU"

}

}

}).mount("#app");  

</script>

</body>

</html>




在浏览器中的显示效果如图35所示。



图35文本插值


无论何时，绑定的数据对象上的message属性发生了改变，插值处的内容都会更新，如图36所示。在Chrome浏览器中按F12键打开控制台并切换到Elements选项，更改message的值，然后查看渲染的结果。



图36数据的双向性


在上面的代码中当data中的值更新之后我们不需要操作html，页面中会自动更新数据。

也可以通过vonce指令让数据只绑定一次，当数据改变时，插值处的内容不会更新，如例32所示。

【例32】使用vonce指令插值


//第3章/使用v-once指令插值.html

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<script src="https://unpkg.com/vue@next"></script>

</head>

<body>

<div id="app">

<!-- v-once只编译一次。显示内容之后不再具有响应式功能。 -->

<h1 v-once>不可改变：{{message}}</h1>

<h1 >可改变：{{message}}</h1>

<input type="text" v-model="message">

</div>

<script>

const vm=Vue.createApp({

data(){

return{

message: 'I LOVE YOU'

}

}

}).mount("#app");  

</script>

</body>

</html>




在Chrome浏览器中运行程序，然后在输入框中输入“我爱你”，可以看到添加vonce指令表情内容不发生改变，效果如图37所示。



图37vonce指令应用


2. html插值

双花括号会将数据解释为普通文本，而非HTML代码。为了输出真正的HTML，需要使用 vhtml指令，如例33所示。

【例33】使用vhtml指令将数据解释成HTML代码


//第3章/v-html指令.html

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<script src="https://unpkg.com/vue@next"></script>

</head>

<body>

<div id="app">

<!-- 内容按普通 HTML 插入, 不会作为Vue 模板进行编译，在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击 -->

<h1 v-html="msg"></h1>

</div>

</body>

<script>

const vm=Vue.createApp({

data(){

return{

/*可以使用v-html指令展示HTML代码*/

msg: "<span style='color:blue'>BLUE</span>"

}

}

}).mount("#app");  

</script>

</html>




上面的代码将msg属性值以<span>标签插入<h1>标签中。

3. 属性插值

在开发时，有时属性不是写死的，有可能是根据一些数据动态地决定的，例如图片标签(<img>)的src属性，可能从后端请求了一个包含图片地址的数组，需要将地址动态地绑定到src上面，这时就不能简单地将src写死。或如a标签的href属性。这时可以使用vbind： 指令来解决这种问题(vbind： 可以缩写成： )，如例34所示。

【例34】使用vbind： 指令绑定属性


//第3章/使用v-bind指令.html

<!DOCTYPE html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<script src="https://unpkg.com/vue@next"></script>

</head>








<body>

<div id="app">

<img v-bind:src="imgUrl" alt=""/>

<a  :href="searchUrl">百度一下</a>

</div>

</body>

<script>

const vm=Vue.createApp({

data(){

return{

imgUrl:'images/1.jpg',

searchUrl:'http://www.baidu.com'

}

}

}).mount("#app");  

</script>

</html>




从服务器请求来的数据，一般会在data中中转，中转后再把需要的变量绑定到对应的属性上面。

vbind除了在开发中用在有特殊意义的属性(src、href等)外，也可以绑定其他一些属性，如Class与Style绑定，如例35和例36所示。

【例35】vbind动态绑定属性class


//第3章/v-bind动态绑定属性.html

<!DOCTYPE html>

<head>

<meta charset="UTF-8">

<title>v-bind动态绑定属性class</title>

<script src="https://unpkg.com/vue@next"></script>

</head>

<body>

<div id="app">

<p:class="{fontCol:isName,setBack:!isAge}"

class="weight">{{name}}</p>

<i :class="addClass">{{name}}真好看!</i>

</div>

<script>

const vm=Vue.createApp({

data(){

return{

isName:true,

isAge:false,

name:"功守道"

}

},

/*当v-bind：class的表达式过长或者逻辑复杂(一般当条件多于两个时)，

可以考虑采用计算属性，返回一个对象*/

computed:{







addClass:function(){

return {

checked:this.isName&&!this.isAge

}

}

}

}).mount("#app");  

</script>

</body>

</html>




既然是一个对象，那么该对象内的属性可能不唯一，但总是每项为真时，对应的类名就会存在。通过vbind更新的类名和元素本身存在的类名不冲突，可以优雅地共存，如图38所示。



图38vbind动态绑定属性class


【例36 】vbind动态绑定属性style


//第3章/v-bind动态绑定属性style.html

<!DOCTYPE html>

<head>

<meta charset="UTF-8">

<title>v-bind动态绑定属性style</title>

<script src="https://unpkg.com/vue@next"></script>

</head>

<body>

<div id="app">

<div :style="{'color': color,'fontSize':fontSize + 'px'}">修饰文本</div>

</div>

<script>








const vm=Vue.createApp({

data(){

return{

color: 'red',

fontSize: 24

}

}

}).mount("#app");  

</script>

</body>

</html>




在大多数情况下，由于标签中直接写一长串的样式不便于阅读和维护，所以一般写在dada或computed里，代码如下： 


<div id="app">

<div :style="styles">修饰文本</div>

</div>

<script>

const vm=Vue.createApp({

data(){

return{

styles:{

color: 'red',

fontSize: 24 + 'px'

}

}

}

}).mount("#app");  

</script>




当应用多个样式对象时，可以使用数组语法，如例37所示。

【例37】vbind绑定多个style属性


//第3章/v-bind绑定多个style属性.html

<!DOCTYPE html>

<head>

<meta charset="UTF-8">

<title>v-bind动态绑定属性style</title>

<script src="https://unpkg.com/vue@next"></script>

</head>

<body>

<div id="app">

<div :style="［styleA,styleB］">文本</div>

</div>

<script>

const vm=Vue.createApp({

data(){

return{







styleA:{

color: 'red',

fontSize: 24 + 'px'

},

styleB: {

width: 100 + 'px',

border: 1 + 'px ' + 'black ' + 'solid'

}

}

}

}).mount("#app");  

</script>

</body>

</html>




4. 插值中使用JavaScript表达式

迄今为止，在我们的模板中，我们一直都只绑定简单的 property 键值，但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持，如例38所示。部分表达式格式的代码如下： 


{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>




这些表达式会在所属Vue实例的数据作用域下作为JavaScript被解析。有个限制，也就是每个绑定都只能包含单个表达式，所以下面的表达式都不会生效，代码如下： 


<!-- 这是语句，不是表达式 -->

{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->

{{ if (ok) { return message } }}




【例38】使用JavaScript表达式


//第3章/使用JavaScript表达式.html

<!DOCTYPE html>

<head>

<meta charset="UTF-8">

<title></title>

<script src="https://unpkg.com/vue@next"></script>

</head>

<body>

<div id="app">

<p>{{ number + 1 }}</p>

<hr>

<p>{{msg + '~~~~~'}}</p>

<hr>







<p>{{flag ? '条件为真' : '条件为假'}}</p>

<hr>

</div>

<script>

const vm=Vue.createApp({

data(){

return{

msg:'Hello beixi!',

flag:true,

number:2

}

}

}).mount("#app");  

</script>

</body>

</html>




在浏览器中的显示效果如图39所示。



图39使用JavaScript表达式效果图


3.2.2指令

指令是带有 “v” 前缀的特殊属性，如前面使用的vbind、vonce等指令。指令属性的值预期是单个JavaScript 表达式(除了vfor)。指令的职责就是当其表达式的值改变时相应地将某些行为应用到DOM上。

1. 参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。如vbind指令可以用于响应式地更新HTML特性，代码如下： 


<a v-bind:href="url">...</a>




在这里href是参数，告知vbind指令将该元素的href属性与表达式url的值绑定。

von指令用于监听DOM事件，代码如下： 


<a v-on:click="test">...</a>




其中，参数click是监听的事件。

2. 动态参数

从Vue 2.6.0开始，可以用方括号括起来的JavaScript表达式作为一个指令的参数，响应式使Vue更加灵活多变，其动态参数也有其含义，代码如下： 


<a v-bind:［attributeName］ = 'url'>...</a>




这里的attributeName会被作为一个JavaScript表达式进行动态求值，求得的值将作为最终的参数来使用。例如，如果你的Vue实例有一个data属性attributeName，其值为'href'，则这个绑定将等价于vbind:href。

同样地，可以使用动态参数作为一个动态的事件名绑定处理函数，格式代码如下： 


<a v-on:［eventName］ = 'doSomething'>...</a>




同样地，当eventName的值为'focus'时，von:［eventName］将等价于von:focus。

【例39】动态参数


//第3章/动态参数.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>动态参数</title>

<script src="https://unpkg.com/vue@next"></script>

</head>

<body>

<div id="app">

<p><a v-bind:［attr］="url">百度链接</a></p>

<p><button v-on:［things］="doSomething">单击事件</button></p>

</div>

<script>

 const vm=Vue.createApp({

data(){

return{

 attr: 'href',

 things:'click',

 url:'http://baidu.com'

}

},//在选项对象的methods属性中定义方法

methods:{

 doSomething :function(){

alert("触发了单击事件")

 } 

}

}).mount("#app"); 

</script>

</body>

</html>




在浏览器中运行程序，在页面中单击“单击事件”按钮，结果如图310所示。



图310动态参数


当然动态参数的值也是有约束的，动态参数预期会求出一个字符串，异常情况下值为null。这个特殊的null值可以被显式地用于移出绑定。任何其他非字符串类型的值都将会触发一个警告。

3. 修饰符

修饰符(Modifiers)是以半角句号“.”指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent修饰符告诉von指令对于触发的事件调用event.preventDefault()，代码如下： 


<form v-on:submit.prevent="onSubmit">...</form>




在后面章节对von和vfor等功能的探索中，可以看到修饰符的其他例子。

3.3实例及选项

在一个使用Vue框架的页面应用程序中，最终都会创建一个应用程序的实例对象并挂载到指定的DOM上。这个实例将提供应用程序上下文，应用程序实例装载的整个组件树将共享相同的上下文。

创建应用程序的实例后，可以调用实例的mount()方法制定一个DOM元素，在该DOM元素上装载应用程序的根组件，这样这个DOM元素中的所有数据变化都会被Vue框架所监控，从而实现数据的双向绑定。


Vue.createApp().mount("#app");




3.3.1数据选项

组件的data选项是一个函数。Vue在创建新组件实例的过程中会自动调用此函数。data选项通常返回一个对象，然后Vue会通过响应性系统将其包裹起来，并以$data的形式存储在组件实例中。

为了方便起见，作为语法糖，该对象的任何顶级属性也可以通过组件实例直接调用，示例代码如下： 


<div id="app">



</div>

<script>

const vm = Vue.createApp({

data() {

 return { count: 4 }

}

}).mount('#app')



console.log(vm.$data.count) //=> 4

console.log(vm.count)  //=> 4



//修改 vm.count 的值也会更新 $data.count

vm.count = 5

console.log(vm.$data.count) //=> 5



//反之亦然

vm.$data.count = 6

console.log(vm.count) //=> 6

</script>




由于这些实例属性仅在实例首次创建时被自动添加，所以大家需要确保它们都在data函数返回的对象中。必要时，要对尚未提供所需值的属性使用null、undefined或其他占位的值。

在Vue实例被初始化后，再往data中手动添加新属性虽然是可以操作的，但该新属性不具备响应式功能，只是个傻瓜属性。

Vue使用“$”前缀通过组件实例暴露自己的内置API。Vue还为内部属性保留“_”前缀。也就是说，给自定义的变量命名一定不能用这两个符号开头。

3.3.2方法选项

Vue通过methods选项为组件实例添加方法，我们在实现组件的方法时，可以放心地在其中使用this关键字，Vue会自动将其绑定到当前组件实例本身。

1. 方法的调用方式

1) 使用插值{{}}方式

【例310】使用插值方式


//第3章/使用插值方式.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="https://unpkg.com/vue@next"></script>







</head>

<body>

<div id="app">

输入内容：<input type="text" v-model="message"><br>

反转内容：{{ reversedMessage()}}

</div>

<script>

const vm = Vue.createApp({

data() {

 return { message: '' }

},

methods: {

reversedMessage() {

//`this` 指向该组件实例

return this.message.split('').reverse().join('')

}

}

}).mount('#app')

</script> 

</body>

</html>




在浏览器中的显示效果如图311所示。



图311使用插值方式


2) 使用事件调用

例如使用von指令来监听DOM事件，使用事件来调用方法，如例311所示。

【例311】事件调用方法


//第3章/事件调用方法.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>事件调用方法</title>

<script src="https://unpkg.com/vue@next"></script>

</head>

<body>

<div id="app">

<button v-on:click="test">点我</button>

</div>

<!-- 测试组件 -->

<script>








const vm = Vue.createApp({

methods:{

/*定义了一个test函数*/

test: function () {

console.log(new Date().toLocaleTimeString());

}

}

}).mount('#app')

</script>

</body>

</html>




在浏览器中的显示效果如图312所示。



图312事件调用方法


2. 传递参数

传递参数和正常的JavaScript传递参数的方法一样，如例312所示。

【例312】传递参数


<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>传递参数</title>

<script src="https://unpkg.com/vue@next"></script>

</head>

<body>

<div id="app">

{{num}} <br>

<button v-on:click="add(2)">增加</button>

</div>

<script>







const vm = Vue.createApp({

data(){

return{

num:1

}

},

methods:{

add: function (a) {

 this.num+=a

}

}

}).mount('#app')

</script>

</body>

</html>




在浏览器中运行程序，单击1次“增加”按钮，可以发现num值自增2，显示效果如图313所示。



图313传递参数


3.3.3计算属性和侦听器

在大多数情况下可以将Vue组件中定义的属性数据直接渲染到HTML元素上，但是有些场景下，属性的数据并不适合直接渲染，需要处理后再进行渲染。在Vue中，通常使用计算属性或侦听器实现这种逻辑。

有时可能需要先在{{}}里进行一些计算，然后展示出来数据，如例313所示。

【例313】在页面中展示学生的成绩、总分和平均分


//第3章/学生成绩信息.html

<!DOCTYPE html>

<head>

<title></title>

<meta charset="utf-8"/>

<script src="https://unpkg.com/vue@next"></script>

</head>

<body>

<div id="app">

<table border="1">

<thead>

<th>学科</th>







<th>分数</th>

</thead>

<tbody>

<tr>

<td>数学</td>

<td><input type="text" v-model="math"></td>

</tr>

<tr>

<td>英语</td>

<td><input type="text" v-model="english"></td>

</tr>

<tr>

<td>语文</td>

<td><input type="text" v-model="chinese"></td>

</tr>

<tr>

<td>总分</td>

<td>{{math + english + chinese}}</td>

</tr>

<tr>

<td>平均分</td>

<td>{{(math + english + chinese)/3}}</td>

</tr>

</tbody>

</table>

</div>

<script>

const vm = Vue.createApp({

data(){

return{

math:66,

english :77,

chinese:88

}

}

}).mount('#app')

</script>

</body>

</html>









图314学生成绩、总分和
平均分的展示


在浏览器中的运行效果如图314所示。

虽然通过{{}}运算可以满足我们的需求，但是代码结构不清晰，特别是当运算比较复杂时，不能复用功能代码。这时，大家不难想到使用methods来封装功能代码，但事实上，Vue向我们提供了一个更好的解决方案，即计算属性。计算属性是Vue实例中的一个配置选项： computed，通常是计算相关的函数，返回最后计算出来的值。也就是可以把这些计算的过程写到一个计算属性中去，然后让它动态地计算，如例314所示。


【例314】使用计算属性展示学生的成绩、总分和平均分


//第3章/使用计算属性展示学生的成绩、总分和平均分.html

<!DOCTYPE html>

<head>

<title></title>

<meta charset="utf-8"/>

<script src="https://unpkg.com/vue@next"></script>

</head>

<body>

<div id="app">

<table border="1">

<thead>

<th>学科</th>

<th>分数</th>

</thead>

<tbody>

<tr>

<td>数学</td>

<td><input type="text" v-model.number="math"></td>

</tr>

<tr>

<td>英语</td>

<td><input type="text" v-model.number="english"></td>

</tr>

<tr>

<td>语文</td>

<td><input type="text" v-model.number="chinese"></td>

</tr>

<tr>

<td>总分</td>

<td>{{sum}}</td>

</tr>

<tr>

<td>平均分</td>

<td>{{average}}</td>

</tr>

</tbody>

</table>

</div>

<script>

const vm = Vue.createApp({

data(){

return{

math:66,

english:77,

chinese:88

}

},

computed:{

<!-- 一个计算属性的getter -->








sum:function(){

return this.math+ this.english+this.chinese;

},

average:function(){

return Math.round(this.sum/3);

}

}

}).mount('#app')

</script>

</body>

</html>




计算属性一般通过其他的数据计算出一个新数据，而且它有一个好处就是能把新的数据缓存下来，当其他的依赖数据没有发生改变时，它调用的是缓存的数据，这就极大地提高了我们程序的性能和数据提取的速度，而如果写在methods里，则数据不会被缓存下来，所以每次都会重新计算。这也是为什么这里没用methods的原因，如例315所示。

【例315】计算属性和方法的比较


//第3章/计算属性和方法的比较.html

<!DOCTYPE html>

<head>

<title></title>

<meta charset="utf-8"/>

<script src="https://unpkg.com/vue@next"></script>

</head>

<body>

<div id="app">

<p>原始字符串: "{{ message }}"</p>

<p>计算属性反向字符串: "{{ reversedMessage1 }}"</p>

<p>methods方法反向字符串: "{{ reversedMessage2() }}"</p>

</div>

<script>

const vm=Vue.createApp({

data() {

return{

message: 'beixi'

}

},

computed:{

reversedMessage1: function () {

return this.message.split('').reverse().join('')

}

},

methods: {

reversedMessage2: function () {

return this.message.split('').reverse().join('')

}

}

}).mount("#app");  








</script>

</body>

</html>




在浏览器中的显示效果如图315所示。



图315计算属性和方法的比较


计算属性是基于它们的依赖进行缓存的，计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要message没有发生改变，多次访问reversedMessage1计算属性会立即返回之前的计算结果，而不必再次执行函数。相比而言，只要发生重新渲染，methods总会调用执行该函数。

假设有一个性能开销比较大的计算属性A，它需要遍历一个极大的数组和做大量的计算。可能有其他的计算属性依赖于A。如果没有缓存，则将不可避免地多次执行A的getter，极大地降低了数据的提取速度，对于用户体验感不强。如果不希望有缓存，则用methods替代。

例314和例315只提供了getter读取值的方法，实际上除了getter，还可以设置计算属性的setter，如例316所示。

【例316】计算属性的读取和设置


//第3章/计算属性的读取和设置.html

<!DOCTYPE html>

<head>

<title></title>

<meta charset="utf-8"/>

<script src="https://unpkg.com/vue@next"></script>

</head>

<body>

<div id="app"></div>

<script>

const vm=Vue.createApp({

data(){

return{

a: 1

}

},

computed: {

//改函数只能读取数据，vm.aDouble即可读取数据







aDouble: function () {

return this.a * 2

},

//读取和设置数据

aPlus: {

get: function () {

return this.a + 1

},

set: function (v) {

this.a = v - 1

}

}

}

}).mount("#app");  

console.log(vm.aPlus);//2

vm.aPlus = 3;

console.log(vm.a);   //2

console.log(vm.aDouble);   //4

</script>

</body>

</html>




属性侦听是Vue非常强大的功能之一。使用属性侦听器可以方便地监听某个属性的变化，以完成复杂的业务逻辑。大家都用过搜索引擎，以百度搜索引擎为例，当向搜索框中写入关键字后，网页上会自动关联一些推荐词供用户选择，如图316所示，这些场景非常适合使用监听器实现。



图316搜索引擎



在定义Vue组件时，可以通过watch选项来定义属性侦听器，如例317所示。

【例317】侦听器应用


//第3章/侦听器应用.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="https://unpkg.com/vue@next"></script>

</head>

<body>

<div id="app">

<input v-model="searchText">

</div>

<script>

const vm=Vue.createApp({

data(){

return{

 searchText:'',

}

},

watch:{

searchText(oldValue,newValue){

if(newValue.length>10){

alert("文本太长了")

}

} 

}

  }).mount("#app"); 

</script>

</body>

</html>




运行以上程序，在文本框中输入一些字符，当字符超过10个时，就会弹出警告框，如图317所示。



图317侦听器应用


从一些特性上看，侦听器和计算属性有类似的应用场景，使用计算属性的set方法也可以实现与上面的示例代码类似的功能。

3.3.4表单数据的双向绑定
1. 基础用法

可以用vmodel指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定，如图318所示。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但vmodel本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。



图318Vue双向数据绑定


注意： vmodel会忽略所有表单元素的value、checked、selected attribute的初始值而总是将Vue实例的数据作为数据来源。应该通过JavaScript在组件的data选项中声明初始值。

1) 文本输入框

input元素中使用vmodel实现双向数据绑定，代码如下： 


<div id="app" class="demo">

<input v-model="message" placeholder="请输入信息...">

<p>Message is: {{ message }}</p>

</div>

<script>

const vm=Vue.createApp({

data(){

return{

message: ''

}

}

}).mount("#app");  

</script>




2) 多行文本输入框

textarea元素中使用vmodel实现双向数据绑定，代码如下： 


<div id="app" class="demo">

<span>Multiline message is:</span>







<p style="white-space: pre">{{ message }}</p><br>

<textarea v-model="message" placeholder="请输入..."></textarea>

</div>

<script>

const vm=Vue.createApp({

data(){

return{

message: ''

}

}

}).mount("#app");  

</script>




注意： 在文本区域插值(<textarea></textarea>) 并不会生效，应用vmodel来代替。

3) 复选框

单个复选框绑定的是布尔值，如果选中，则值为true，如果未选中，则值为false，代码如下： 


<div id="app" class="demo">

<input type="checkbox" id="checkbox" v-model="checked">

<label for="checkbox">{{ checked }}</label>

</div>

<script>

const vm=Vue.createApp({

data(){

return{

checked: false

}

}

}).mount("#app");  

</script>




多个复选框，绑定到同一个数组，代码如下： 


<div id="app" class="demo">

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">

<label for="jack">Jack</label>

<input type="checkbox" id="john" value="John" v-model="checkedNames">

<label for="john">John</label>

<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">

<label for="mike">Mike</label>

<br>

<span>Checked names: {{ checkedNames }}</span>

</div>

<script>

const vm=Vue.createApp({

data(){

return{

checkedNames: ［］






}

}

}).mount("#app");  

</script>




4) 单选按钮

单选按钮的双向数据绑定，代码如下： 


<div id="app">

<input type="radio"  value="Runoob" v-model="picked">

<label for="runoob">Runoob</label>

<br>

<input type="radio" id="google" value="Google" v-model="picked">

<label for="google">Google</label>

<br>

<span>选中值为: {{ picked }}</span>

</div>

<script>

const vm=Vue.createApp({

data(){

return{

picked : 'Runoob'

}

}

}).mount("#app");  

</script>




5) 选择列表

下拉列表的双向数据绑定。

单选时，代码如下： 


<div id="app">

<select v-model="selected">

<option disabled value="">请选择</option>

<option>A</option>

<option>B</option>

<option>C</option>

</select>

<span>Selected: {{ selected }}</span>

</div>

<script>

const vm=Vue.createApp({

data(){

return{

selected: ''

}

}

}).mount("#app");  

</script>




注意： 如果vmodel表达式的初始值未能匹配任何选项，则<select>元素将被渲染为“未选中”状态。在iOS中，这会使用户无法选择第1个选项。因为在这样的情况下，iOS不会触发change事件，因此，更推荐像上面那样提供一个值为空的禁用选项。

多选列表(绑定到一个数组)，代码如下： 


<div id="app">

<select v-model="selected" multiple style="width: 50px">

<option>A</option>

<option>B</option>

<option>C</option>

</select>

<br>

<span>Selected: {{ selected }}</span>

</div>

<script>

const vm=Vue.createApp({

data(){

return{

selected: ［］

}

}

}).mount("#app");  

</script>




动态选项，用vfor渲染，代码如下： 


<div id="app" class="demo">

<select v-model="selected">

<option v-for="option in options" v-bind:value="option.value">

{{ option.text }}

</option>

</select>

<span>Selected: {{ selected }}</span>

</div>

<script>

const vm=Vue.createApp({

data(){

return{

selected: 'A',

 options: ［

{ text: 'One', value: 'A' },

{ text: 'Two', value: 'B' },

{ text: 'Three', value: 'C' }

］

}

}

}).mount("#app");  

</script>




2. 绑定value

对于单选按钮，勾选框及选择列表选项，vmodel 绑定的 value 通常是静态字符串，代码如下： 


<div id="app">

<!-- 当选中时，picked 为字符串 "a" -->

<input type="radio" v-model="picked" value="a">

<!--  当选中时，toggle 为 true 或 false -->

<input type="checkbox" v-model="toggle">

<!-- 当选中时，selected 为字符串 "abc" -->

<select v-model="selected">

<option value="abc">ABC</option>

</select>

</div>

<script>

const vm=Vue.createApp({

data(){

return{

picked:'',

toggle:'',

selected:''

}

}

}).mount("#app");  

</script>




有时想将value绑定到Vue 实例的一个动态属性上，这时可以用vbind实现，并且这个属性的值可以不是字符串，代码如下： 


<div id="app">

<input type="checkbox" v-model="toggle" 

v-bind:true-value="a" v-bind:false-value="b">

{{toggle}}

</div>

<script>

const vm=Vue.createApp({

data(){

return{

toggle:'',

a:'a',

b:'b'

}

}

}).mount("#app"); 

</script>




当选中时输出a；  当没有选中时输出b。

单选按钮，代码如下： 


<input type="radio" v-model="pick" v-bind:value="a">




当选中时vm.pick === vm.a。

单选列表设置，代码如下： 


<select v-model="selected">

<!-- 内联对象字面量 -->

<option v-bind:value="{ number: 123 }">123</option>

</select>




当选中时在页面控制台输入typeof vm.selected，输出'object'；  输入vm.selected.number，输出123。

3. 修饰符

对于vmodel指令，还有3个常用的修饰符lazy、number和trim。

1) lazy

在默认情况下，vmodel 默认为同步数据，可以使用lazy修饰符，此种情况会转换为在change事件中进行同步，也就是在失去焦点或者按Enter键时更新，代码如下： 


<!-- 在"change"时而非"input"时更新 -->

<input v-model.lazy="msg">




2) number

如果想自动将用户的输入值转换为数值类型，则可以给vmodel添加number修饰符，代码如下： 


<input v-model.number="age" type="number">




这通常很有用，因为即使在 type="number" 时，HTML输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

3) trim

如果要自动过滤用户输入的首尾空白字符，则可以给vmodel添加trim修饰符，代码如下： 


<input v-model.trim="msg">




3.3.5生命周期

Vue的生命周期用于描述组件从创建到销毁的全过程。在Vue中，组件生命周期的节点会被定义为一系列方法，这些方法称为生命周期钩子函数。Vue 3和Vue 2的生命周期钩子非常像，我们仍然可以在相同的场景下使用相同的钩子函数。

Vue 3在设计时对先前的版本进行了向下兼容，如果你的项目还在使用选项式API进行构建，则不需要修改生命周期相关的代码。如果使用组合式API进行项目构建，则生命周期钩子函数会略微不一样。Vue的生命周期如图319所示。



图319Vue生命周期


一个Vue组件的生命周期分为4个阶段，即组件创建阶段、组件挂载阶段、数据更新阶段和组件销毁阶段，对应8个钩子函数。

(1) 创建阶段： beforeCreate和created。

(2) 挂载阶段： beforeMount和mounted。

(3) 更新阶段： beforeUpdate和updated。

(4) 销毁阶段： beforeUnmount和unmounted。

Vue 2中的生命周期和Vue 3的生命周期对比见表32。


表32生命周期中的钩子函数






Vue 2生命周期
Vue 3生命周期
功 能 描 述

beforeCreate
setup
在实例初始化之后，数据观测(Data Observer)和event/watcher事件配置之前被调用

created
setup
在实例创建完成后被立即调用。在这一步，实例已完成以下配置： 数据观测(Data Observer)，属性和方法的运算，watch/event事件回调，然而，挂载阶段还没开始，$el属性目前还不可见

beforeMount
onBeforeMount
在挂载开始之前被调用： 相关的render函数首次被调用
mounted
onMounted
el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内的元素，则当mounted被调用时vm.$el也在文档内
beforeUpdate
onBeforeUpdate
数据更新时调用，发生在虚拟DOM打补丁之前。这里适合在更新之前访问现有的DOM，例如手动移除已添加的事件监听器
updated
onUpdated
由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子
beforeDestroy
onBeforeUnmount
在实例销毁之前调用。在这一步，实例仍然完全可用
destroyed
onUnmounted
在实例销毁之后调用。调用后，所有的事件监听器都会被移除，所有的子实例也都会被销毁


钩子函数中最常用的是created、mounted、updated和unmounted。

在代码中使用生命周期函数有两种方式： 选项式和组合式。

1. 选项式

Vue 3中的选项式生命周期钩子基本上与Vue 2保持一致，它们都是定义在Vue实例的对象参数中的函数，它们在Vue实例的生命周期的不同阶段被调用。简单来讲，生命周期钩子就是Vue.js特别提供的一些函数，这是在我们的实例挂载、更新、卸载等过程中被调用的函数。如例318所示。

【例318】选项式生命周期


//第3章/选项式生命周期.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>选项式</title>







<script src="https://unpkg.com/vue@next"></script>

</head>

<body>

<div id="app">

</div>

<script>

const vm=Vue.createApp({

//组件实例化之前

//可以访问 props 的数据，但不能访问组件的实例 this 中的数据源和函数等

//不能访问组件中的视图DOM元素

beforeCreate() {

console.log('beforeCreate 组件实例化之前')

},

//组件实例化之后

//可以访问组件中的数据、函数、自定义的属性等

//不能访问组件中的视图DOM元素

created() {

console.log('created 组件实例化之后')

},

//组件视图渲染之前

//可以访问组件中的数据、函数、自定义的属性等

//不能访问组件中的视图DOM元素

beforeMount() {

console.log('beforeMount 组件视图渲染之前')

},

//组件视图渲染之后

//可以访问组件中的数据、函数、自定义的属性等

//不能访问组件中的视图DOM元素

mounted() {

console.log('mounted 组件视图渲染之后')

},

//数据源发生改变，视图重新渲染前

//可以访问组件中的数据、函数、自定义的属性等

//可以访问重新渲染的 DOM 元素之前的状态

beforeUpdate() {

console.log('beforeUpdate 数据源发生改变，视图重新渲染前')

},

//数据源发生改变，视图重新渲染后

//可以访问组件中的数据、函数、自定义的属性等

//可以访问重新渲染的 DOM 元素之后的状态

updated() {

console.log('updated 数据源发生改变，视图重新渲染后')

},

//组件在卸载之前

//可以访问组件中的数据、函数、自定义的属性等

//可以访问组件视图的 DOM 元素

beforeUnmount() {

console.log('beforeUnmount 组件在卸载之前')






},

//组件已卸载

//可以访问组件中的数据、函数、自定义的属性等

//不可以访问组件视图的 DOM 元素

unmounted(){

console.log('unmounted 组件已卸载')

}

}).mount("#app"); 

</script>

</body>

</html>




在浏览器中的显示效果如图320所示。



图320选项式生命周期


从图320可以看到，在本次页面渲染过程中只执行了4个组件的生命周期方法，这是由于我们使用的是Vue根组件，所以在页面渲染的过程中只执行了组件的创建和挂载过程，并没有执行卸载的过程。

2. 组合式

Vue 3的组合式API提供了一套新的生命周期钩子，与Vue 2中的选项式生命周期钩子有着对应关系。

但是需要注意的是，Vue 3的组合式API中的生命周期钩子函数是基于函数调用的方式，而不再作为组件选项的一部分。这意味着在使用组合式API时，不再像Vue 2中那样直接定义beforeCreate、created等钩子函数，而是通过setup函数返回一个对象，对象中包含相应的生命周期钩子函数。这些内容将在后面的章节中讲解。

3.4模板渲染

获取后台数据之后会按照一定的规则加载到前端写好的模板中，显示在浏览器中，这个过程称为渲染。

3.4.1条件渲染
1. vif、velseif和velse

vif、velseif、velse这3个指令根据表达式的真假有条件地渲染元素。Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素/组件，如例319所示。

【例319】vif、velseif 、velse应用


//第3章/条件指令.html

<!DOCTYPE html>

<head>

<title></title>

<meta charset="utf-8"/>

<script src="https://unpkg.com/vue@next"></script>

</head>

<body>

<div id="app">

<!--if、else指令-->

<p v-if="status==1">当status为1时，显示该行</p>

<p v-else-if="status==2">当status为2时，显示该行</p>

<p v-else-if="status==3">当status为3时，显示该行</p>

<p v-else>否则显示该行</p>

</div>

<!--script脚本-->

<script>

const vm=Vue.createApp({

data(){

return{

status: 2

}

}

}).mount("#app");  

</script>

</body>

</html>




需要注意多个vif、velseif和velse之间必须紧挨着，例如下面代码的写法是错误的。


<p v-if="status==1">当status为1时，显示该行</p>

<span></span>

<p v-else-if="status==2">当status为2时，显示该行</p>

<p v-else-if="status==3">当status为3时，显示该行</p>

<p v-else>否则显示该行</p>




以上代码会报错，因为多个判断语句被span标签隔开了，浏览器显示的内容如图321所示。



图321错误信息


2. vshow

vshow指令的基本用法与vif类似，也是根据条件的真假来决定元素的渲染情况，代码如下： 


<div id="app">

<!--if、else指令-->

<p v-show="status==1">当status为1时，显示该行</p>

<p v-show="status==2">当status为2时，显示该行</p>

</div>

<script>

const vm=Vue.createApp({

data(){

return{

status: 2

}

}

}).mount("#app"); 

</script>




3. vif和vshow的区别

(1) 控制显示的方法不同： 该方法和vif的区别在于，vshow实际上是通过修改DOM元素的display属性实现节点的显示和隐藏的，而vif则是通过添加/删除DOM节点实现的。

(2) 编译条件： vif是惰性的，如果初始条件为假，则什么也不做，不会去渲染该元素；  只有在条件第1次变为真时才开始局部编译; vshow是不管初始条件是什么都被编译，然后被缓存，而且DOM元素保留，只是简单地基于CSS进行切换；  即vif中当为true时才会被加载渲染，当为false时不加载。vshow不管是true还是false都会加载渲染。

(3) 性能消耗： vif有更高的切换消耗；  vshow有更高的初始渲染消耗。

(4) 使用场景： 因此，如果需要非常频繁地切换，则使用vshow较好；  如果在运行时条件很少改变，当只需显示一次或隐藏时，则使用vif较好。

4. Key

Vue会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染，因此可能造成下面这样的问题，如例320所示。

【例320】Vue高效地渲染元素


//第3章/Vue高效地渲染元素.html

<!DOCTYPE html>

<head>

<title></title>

<meta charset="utf-8"/>

<script src="https://unpkg.com/vue@next"></script>

</head>

<body>

<div id="app">

<p v-if="ok">

<label>Username</label>

<input placeholder="Enter your username">

</p>

<p v-else>

<label>Email</label>

<input placeholder="Enter your email address">

</p>

<button @click="ok=!ok">切换</button>

</div>

<script>

 const vm=Vue.createApp({

data(){

return{

ok: true,

}

}

}).mount("#app");  

</script>

</body>

</html>




当在页面中输入信息后单击“切换”按钮时，部分浏览器会出现文本框里的内容没有清空的现象。

Vue提供了一种声明方式，只需添加一个具有唯一值的key属性便可以解决此问题，代码如下： 


<div id="app">

<p v-if="ok">

<label>Username</label>

<input placeholder="Enter your username" key="username-input">

</p>

<p v-else>

<label>Email</label>

<input placeholder="Enter your email address" key="email-input">

</p>

<button @click="ok=!ok">切换</button>

</div>




3.4.2循环渲染

vfor指令可以对数组、对象进行循环，以获取其中的每个值。

1. vfor指令遍历数组

vfor指令根据一组数组的选项列表进行渲染。

可以用vfor指令基于一个数组来渲染一个列表。vfor指令需要使用item in items形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名(为当前遍历的元素提供别名，可以任意起名)，如例321所示。

【例321】对数组选项进行列表渲染


//第3章/对数组选项进行列表渲染.html

<!DOCTYPE html>

<head>

<title></title>

<meta charset="utf-8"/>

<script src="https://unpkg.com/vue@next"></script>

</head>

<body>

<ul id="app">

<li v-for="item in items">

{{ item.name }}

</li>

</ul>

<script>

const vm=Vue.createApp({

data(){

return{

items: ［

{ name: 'beixi' },

{ name: 'jzj' }

］

}

}

}).mount("#app");  

</script>

</body>

</html>




定义一个数组类型的数据items，用vfor指令对其循环渲染，在浏览器中的显示效果如图322所示。

vfor还支持一个可选的第2个参数作为当前项的索引，索引从0开始，代码如下： 


<ul id="app">

<li v-for="(item，index) in items">

{{index}}-- {{ item.name }}

</li>

</ul>




分隔符in前的语句使用括号，第2项就是items当前项的索引，在浏览器中的显示效果如图323所示。




图322列表循环结果





图323含有index选项的列表渲染结果




注意： 可以用of代替in作为分隔符。

2. vfor指令遍历对象

遍历对象的语法和遍历数组的语法是一样的： 


value in object




其中，object是被迭代的对象，value是被迭代的对象属性的别名。

【例322】vfor来遍历对象


//第3章/v-for来遍历对象.html

<!DOCTYPE html>

<head>

<title></title>

<meta charset="utf-8"/>

<script src="https://unpkg.com/vue@next"></script>

</head>

<body>

<ul id="app">

<li v-for="value in object">

{{ value }}

</li>

</ul>

<script>

const vm=Vue.createApp({

data(){

return{

object: {

name: 'beixi',

gender: '男',

age: 30

}

}

}

}).mount("#app");  

</script>

</body>

</html>




渲染后的结果如图324所示。

遍历对象属性时，有两个可选参数，分别是键名和索引，代码如下： 


<ul id="app">

<li v-for="(value， key， index) in object">

{{ index }}-- {{ key }}: {{ value }}

</li>

</ul>




渲染后的结果如图325所示。




图324遍历对象结果





图325遍历对象的渲染结果




3. vfor指令遍历整数

vfor指令还可以遍历整数，示例代码如下： 


<ul id="app">

<li v-for="n in 10">

{{n}}

</li>

</ul>

<script>

const vm=Vue.createApp({

}).mount("#app"); 

</script>




3.4.3template标签用法

类似于vif，也可以利用带有vfor的<template>标签来循环渲染一段包含多个元素的内容，代码如下： 


<ul id="app">

<template v-for="item in items">

{{ item.name }}

{{ item.age }}

</template>

</ul>

<script>

const vm=Vue.createApp({

data(){

return{

items: ［

{ name: 'beixi' },

{ age: 18 }

］

}







}

}).mount("#app");  

</script>




3.5事件绑定

Vue提供了von指令(通常使用@符号代替)来监听DOM事件，在事件绑定上，类似原生JavaScript的onclick事件写法，也是在HTML上进行监听的。

3.5.1基本用法

Vue中的事件绑定是使用von： 事件名=函数名来完成的，这里函数名是定义在Vue实例中的methods对象中的，Vue实例可以直接访问其中的方法。

语法规则： 


v-on:事件名.修饰符 = 方法名() | 方法名 | 简单的JavaScript表达式

简写： @事件名.修饰符 = 方法名() | 方法名 | 简单的JavaScript表达式




常用的交互事件见表33。


表33Vue中常用事件列表






事件
描述

click
在元素上按下并释放任意鼠标按键
dblclick
在元素上双击鼠标按钮
mousedown
在元素上按下任意鼠标按钮
mouseenter
指针移到有事件监听的元素内
mouseleave
指针移出元素范围外(不冒泡)
mousemove
指针在元素内移动时持续触发
mouseover
指针移到有事件监听的元素或者它的子元素内
mouseout
指针移出元素，或者移到它的子元素上
mouseup
在元素上释放任意鼠标按键
focus
元素获得焦点(不会冒泡)
blur
元素失去焦点(不会冒泡)
reset
单击“重置”按钮时
submit
单击提交按钮
keydown
按下任意按键
keyup
释放任意按键


1. 直接使用

直接在标签中书写JS方法，代码如下： 


<div id="app">

单击次数{{count}}

<button @click="count++">单击+1</button>

</div>

<script>

const vm=Vue.createApp({

data(){

return{

count:0

}

}

}).mount("#app"); 

</script>




注意： @click等同于von:click，这是一个语法糖。

2. 在methods设置方法

通过von绑定实例选项属性methods中的方法作为事件的处理器，如例323所示。

【例323】von绑定事件


//第3章/v-on绑定事件.html

<!DOCTYPE html>

<head>

<title></title>

<meta charset="utf-8"/>

<script src="https://unpkg.com/vue@next"></script>

</head>

<body>

<div id="app">

<button @click="say">单击</button>

</div>

<script>

 const vm=Vue.createApp({

data(){

return{

msg:'Say Hello'

}

},

methods:{

say: function () {

alert(this.msg)

}

}

}).mount("#app"); 

</script>

</body>

</html>




单击button按钮，即可触发say函数，在浏览器中的显示效果如图326所示。



图326单击事件



(1) 方法传参，直接在方法内传入参数，代码如下： 


<div id="app">

<button @click="say('Hello beixi')">单击</button>

</div>

<script>

 const vm=Vue.createApp({

data(){

return{

msg:'Say Hello'

}

},

methods:{

say: function (val) {

alert(val)

}

}

}).mount("#app"); 

</script>




(2) 传入事件对象，代码如下： 


<div id="app">

<button data-aid='123' @click="eventFn($event)">事件对象</button>

</div>

<script>

 const vm=Vue.createApp({

methods:{

eventFn:function(e){

console.log(e);

//e.srcElement  dom节点

e.srcElement.style.background='red';

console.log(e.srcElement.dataset.aid);  /*获取自定义属性的值*/

}

}

}).mount("#app"); 

</script>




当单击时间对象按钮时背景颜色变为红色。

3.5.2修饰符

Vue中提供了多个修饰符，方便我们处理一些DOM事件的细节，让我们不再需要花费大量的时间去处理这些烦恼的事情，而将更多的精力用于程序的逻辑处理，Vue常用的修饰符如下。

(1) stop用于阻止事件继续传播，即阻止它的捕获和冒泡过程，代码如下： 


@click.stop='handle()'//只要在事件后面加.stop就可以阻止事件冒泡




如例324单击“内部单击”按钮，阻止了冒泡过程，即只执行inner这种方法，如果不加.stop，则先执行inner方法，后执行outer方法，即通过了冒泡这个过程。

【例324】stop修饰符应用


//第3章/stop修饰符应用.html

<!DOCTYPE html>

<head>

<title></title>

<meta charset="utf-8"/>

<script src="https://unpkg.com/vue@next"></script>

</head>

<body>

<div id="app">

<div style="background-color: aqua;width: 100px;height: 100px" 

v-on:click="outer"> 外部单击

<div style="background-color: red;width: 50px;height: 50px"  

v-on:click.stop="inner">内部单击</div>

</div>

</div>

<script>

const vm=Vue.createApp({

methods:{

outer: function () {

console.log("外部单击")

},

inner: function () {

console.log("内部单击")

}

}

}).mount("#app"); 

</script>

</body>

</html>




(2) prevent用于阻止默认事件，代码如下： 


@click.prevent='handle()'//只要在事件后面加.prevent就可以阻止默认事件。




如下阻止了a标签的默认刷新： 


<a href="" v-on:click.prevent>单击</a>




(3) capture用于添加事件监听器时使用事件捕获模式，即在捕获模式下触发，代码如下： 


@click.capture='handle()'  




如下实例在单击最里层的单击6时，outer方法先执行，因为outer方法是在捕获模式执行的，先于冒泡事件。按下列顺序执行outer→set→inner，因为后两个还是冒泡模式下触发的事件，代码如下： 


<div v-on:click.capture="outer">外部单击5

<div v-on:click="inner">内部单击5

<div v-on:click="set">单击6</div>

</div>

</div>




(4) 当self是当前元素自身时触发处理函数时才会触发函数。

原理是根据event.target确定是否是当前元素本身，以此来决定是否触发事件/函数。

如果单击“内部单击”按钮，则冒泡不会执行outer方法，因为event.target指的是内部单击的DOM元素，而不是外部单击的，所以不会触发自己的单击事件，代码如下： 


<div v-on:click.self="outer">

外部单击

<div  v-on:click="inner">内部单击</div>

</div>




(5) once表示只触发一次，代码如下： 


<div id="app">

<div  v-on:click.once="once">单击once</div>

</div>

<script>

const vm=Vue.createApp({

methods:{

once: function () {

console.log("单击once")

}

}

}).mount("#app");  

</script>




(6) 键盘事件。

方式一，使用@keydown='show($event)'，代码如下： 


<div id="app">

<input type="text" @keydown='show($event)' />

</div>







<script type="text/javascript">

const vm=Vue.createApp({

methods:{

show: function (ev) {

/*在函数中获取 ev.keyCode */

console.log(ev.keyCode);

if(ev.keyCode==13){

alert('你按了Enter键!')

}

}

}

}).mount("#app");  

</script>




方式二，代码如下： 


<input type="text" @keyup.enter="show()">//Enter键执行

<input type="text" @keydown.up='show()'>      //上键执行

<input type="text" @keydown.down='show()'>   //下键执行

<input type="text" @keydown.left='show()' >    //左键执行

<input type="text" @keydown.right='show()'>    //右键执行




3.6图书管理系统

前面几个章节介绍了一些Vue的基础知识，结合以上知识可以实现图书管理系统，图书管理系统主要实现了数据的添加、删除、列表渲染等功能。最终实现的效果如图327所示。



图327图书管理系统效果图


这个示例是基于Bootstrap来快速搭建的，所以对Bootstrap不是很了解的读者，可以先自行到官网http://www.bootcss.com/进行学习。开始实现此系统之前大家需下载Bootstrap文件，这里笔者采用的是Bootstrap3.3.7.css。

3.6.1列表渲染

代码如下： 


<!DOCTYPE html>

<head>







<title></title>

<meta charset="utf-8"/>

<script src="https://unpkg.com/vue@next"></script>

<!--引入Bootstrap-->

<link rel="stylesheet" href="./lib/Bootstrap-3.3.7.css">

</head>

<body>

<div id="app">

<div class="panel panel-primary">

<div class="panel-heading">

<h2>图书管理系统</h2>

</div>

<div class="panel-body form-inline">

<label for="">id：<input type="text" class="form-control" 

v-model="id"></label>

<label for="">图书名称：<input type="text" class="form-control" 

v-model="name"></label>

<input type="button" value="添加" class="btn btn-primary" @click="add">

</div>

</div>

<table class="table table-bordered table-hover">

<thead>

<tr>

<th>id</th>

<th>图书名称</th>

<th>添加时间</th>

<th>操作</th>

</tr>

</thead>

<tbody>

<tr v-for="item in arr" :key="item.id">

<td v-text="item.id"></td>

<td v-text="item.name"></td>

<td v-text="item.time"></td>

<td><a href="" @click.prevent="del(item.id)">删除</a></td>

</tr>

</tbody>

</table>

</div>

<script>

 const vm=Vue.createApp({

data(){

return{

  arr:［

{'id':1,'name':'三国演义','time':new Date()},

{'id':2,'name':'红楼梦','time':new Date()},

{'id':3,'name':'西游记','time':new Date()},

{'id':4,'name':'水浒传','time':new Date()}

  ］, //创建一些初始数据与格式








id:'',

name:''

  }

}

}).mount("#app");  

</script>

</body>

</html>




3.6.2功能实现

添加功能的代码如下： 


add(){

this.arr.push({'id':this.id,'name':this.name,'time':new Date()});

this.id=this.name='';

}




删除功能的代码如下： 


del(id){

var index=this.arr.findIndex(item => {

 if(item.id==id) {

 return true;

  }

 })

//findIndex方法用于查找索引以实现列表的删除功能

this.arr.splice(index,1)  

}




完整的图书管理系统的代码如例325所示。

【例325】图书管理系统


<!DOCTYPE html>

<head>

<title></title>

<meta charset="utf-8"/>

<script src="https://unpkg.com/vue@next"></script>

<!--引入Bootstrap-->

<link rel="stylesheet" href="./lib/Bootstrap-3.3.7.css">

</head>

<body>

<div id="app">

<div class="panel panel-primary">

<div class="panel-heading">

<h2>图书管理系统</h2>

</div>








<div class="panel-body form-inline">

<label for="">id:<input type="text" class="form-control" 

v-model="id"></label>

<label for="">图书名称：<input type="text" class="form-control" 

v-model="name"></label>

<input type="button" value="添加" class="btn btn-primary" @click="add">

</div>

</div>

<table class="table table-bordered table-hover">

<thead>

<tr>

<th>id</th>

<th>图书名称</th>

<th>添加时间</th>

<th>操作</th>

</tr>

</thead>

<tbody>

<tr v-for="item in arr" :key="item.id">

<td v-text="item.id"></td>

<td v-text="item.name"></td>

<td v-text="item.time"></td>

<td><a href="" @click.prevent="del(item.id)">删除</a></td>

</tr>

 </tbody>

</table>

</div>

<script>

const vm=Vue.createApp({

data(){

 return{

arr:［

{'id':1,'name':'三国演义','time':new Date()},

{'id':2,'name':'红楼梦','time':new Date()},

{'id':3,'name':'西游记','time':new Date()},

{'id':4,'name':'水浒传','time':new Date()}

］, //创建一些初始数据与格式

id:'',

name:''

}

},

methods:{

add(){

this.arr.push({'id':this.id,'name':this.name,'time':new Date()});

this.id=this.name='';

},//add方法实现列表的输入功能

del(id){

  var index=this.arr.findIndex(item => {








 if(item.id==id) {

 return true;

 }

  })

/*findIndex方法用于查找索引以实现列表的删除功能*/

  this.arr.splice(index,1)

  }

}

}).mount("#app"); 

</script>

</body>

</html>