Vuejs第二篇（Vue基础语法）
一、内容概述：
- 插值操作（二至三）
- 绑定属性（四至九）
- 计算属性（十至十三）
- ES语法回顾（十四至十七）
- 事件监听（十八至二十）
- 条件判断（二十一至二十四）
- 循环遍历（二十五至二十八）
- 阶段案例（二十九至三十二）
- v-model（三十三至三十九）
二、插值操作-mustache语法（掌握）
如何将data中的文本数据，插入到HTML中呢？
- 我们已经学习过了，可以通过Mustache（{ {}}）语法（也就是双大括号）
- Mustache：胡子/胡须
mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Titletitle>
head>
<body>
<div id="app">
<h2>{
{message}}h2>
<h2>{
{message}},welcome youh2>
<h2>{
{firstName + lastName}}h2>
<h2>{
{firstName + ' ' + lastName}}h2>
<h2>{
{firstName}} {
{lastName}}h2>
<h2>{
{counter * 2}}h2>
div>
<script src="../js/vue.js">script>
<script>
const vue = new Vue({
el: '#app',
data: {
message: 'hello Vue!',
firstName: '你好',
lastName: 'Vue',
counter: 100
}
});
script>
body>
html>
结果：
三、插值操作-其他指令使用（掌握）
v-once //值只能使用一次
v-html //解析带有标签的字符串
结果：
v-text //展示文本不解析标签，且会覆盖标签中原有的文本
结果：
v-pre //原封不动的显示文本（不解析）
结果：
v-cloak //未解析的情况不会显示（解决闪烁问题）
了解即可
四、v-bind的基本使用（掌握）
前面我们学习的指令主要作用是将值插入到我们模板的内容当中
但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定
- 比如动态绑定a元素的href属性
- 比如动态绑定img元素的src属性
这个时候，我们可以使用v-bind指令：
作用：动态绑定属性
缩写：：
预期：any（with argument）| Object（without argument）
参数：attrOrProp（optional）
下面，我们就来具体学习v-bind的使用
v-bind基础
v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值（这个学到组件时再介绍）
在开发中，有哪些属性需要动态进行绑定呢？
- 还是有很多的，比如图片的链接src、网站的链接href、动态绑定一些类、样式等等
比如通过Vue实例中的data绑定元素的src和href，代码如下：
语法糖简写：（用 ：代替）
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Titletitle>
head>
<body>
<div id="app">
<img :src="imgURL" alt="">
<a :href="aHref">百度一下a>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
imgURL:'https://img2.baidu.com/it/u=2464877933,1986620259&fm=26&fmt=auto',
aHref:'http://www.baidu.com'
}
});
script>
body>
html>
结果：
五、v-bind动态绑定class【对象语法】（掌握）
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Titletitle>
<style>
.active{
color:red;
}
style>
head>
<body>
<div id="app">
<h2 :class="{active:isActive,line:isLine}">{
{message}}h2>
<button v-on:click="btnClick">按钮button>//按钮来控制类是否绑定
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
isActive:true,
isLine:false
},
methods:{
btnClick:function () {
this.isActive=!this.isActive
}
}
});
script>
body>
html>
不需要通过vue动态改变的class可以直接写出来：
<h2 class="title" :class="{active:isActive,line:isLine}">{
{
message}}</h2>//不需要通过vue动态改变的class可以直接写出来
改进：
总结：
六、v-bind绑定class【数组语法】（掌握）
通过上述案例，我们知道绑定class有两种方式：
- 对象语法
- 数组语法
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Titletitle>
<style>
.active{
color:red;
}
style>
head>
<body>
<div id="app">
<h2 class="title" :class="['active','line']">{
{message}}h2>
<h2 class="title" :class="[active,line]">{
{message}}h2>
<h2 class="title" :class="getClasses()">{
{message}}h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
active:'aa',
line:'bb'
},
methods:{
getClasses:function () {
return [this.active,this.line]
}
}
});
script>
body>
html>
七、v-bind和v-for结合的作业布置（完成）
请看后续。。。
八、v-bind绑定style(一)【对象语法】（掌握）
也有两种语法：对象语法与数组语法
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Titletitle>
head>
<body>
<div id="app">
<h2 :style="{
'font-size':'50px'}">{
{message}}h2>
<h2 :style="{fontSize:'50px'}">{
{message}}h2>
<h2 :style="{fontSize:finalSize}">{
{message}}h2>
<h2 :style="{fontSize:finalSize2+'px'}">{
{message}}h2>
<h2 :style="{fontSize:finalSize2+'px',color:finalColor}">{
{message}}h2>
<h2 :style="getStyles()">{
{message}}h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
finalSize:'50px',
finalSize2:50,
finalColor:'red'
},
methods:{
getStyles:function () {
return {
fontSize:this.finalSize2+'px',color:this.finalColor}
}
}
});
script>
body>
html>
结果：
九、v-bind绑定style(二)【数组语法】（了解）
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Titletitle>
head>
<body>
<div id="app">
<h2 :style="[baseStyle,baseStyle2]">{
{message}}h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
baseStyle:{
backgroundColor:'red'},
baseStyle2:{
fontSize:'20px'}
}
});
script>
body>
html>
十、计算属性的基本使用（掌握）
我们知道，在模板中可以直接通过插值语法显示一些data中的数据。
但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示
- 比如我们有fristName和lastName两个变量，我们需要显示完整的名称
- 但是如果多个地方都需要显示完整的名称，我们就需要写多个{ {firstName}}{ {lastName}}
我们可以将上面的代码换成计算属性：
- 计算属性是写在实例的computed选项中的
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Titletitle>
head>
<body>
<div id="app">
<h2>{
{fullName}}h2>
<h2>{
{fullName}}h2>
<h2>{
{fullName}}h2>
<h2>{
{fullName}}h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName:'小',
lastName:'明'
},
computed:{
//写计算属性的函数
fullName:function () {
return this.firstName+' '+this.lastName
}
}
});
script>
body>
html>
十一、计算属性的复杂操作（掌握）
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Titletitle>
head>
<body>
<div id="app">
<h2>总价格:{
{totalPrice}}h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
books:[
{
id:110,name:'Unix编程艺术',price:119},
{
id:111,name:'代码大全',price:105},
{
id:112,name:'深入理解计算机原理',price:98},
{
id:113,name:'现代操作系统',price:87}
]
},
computed:{
//相比于methods（methods调用几次就执行几次，是没有缓存的，性能较低）computed只执行一次，有缓存(起名字尽量为名词)
//高阶函数：filter、map、reduce
totalPrice:function () {
let result=0;
for (let i=0;i<this.books.length;i++){
result+=this.books[i].price;
}
return result;
}
}
});
script>
body>
html>
结果：
十二、计算属性setter和getter（理解）
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Titletitle>
head>
<body>
<div id="app">
<h2>{
{fullName}}h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName:'Kobe',
lastName:'Bryant'
},
computed:{
/* fullName:function () {//这是简写
return this.firstName+' '+this.lastName;
}*/
fullName:{
//完整写法（理解即可）
// set:function () {//计算属性一般是没有set方法，只读属性
//
// },
get:function () {
return this.firstName+' '+this.lastName;
}
}
}
});
script>
body>
html>
十三、计算属性和methods的对比（掌握）
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Titletitle>
head>
<body>
<div id="app">
<h2>{
{firstName}} {
{lastName}}h2>
<h2>{
{getFullName()}}h2>
<h2>{
{getFullName()}}h2>
<h2>{
{getFullName()}}h2>
<h2>{
{getFullName()}}h2>
<h2>{
{fullName}}h2>
<h2>{
{fullName}}h2>
<h2>{
{fullName}}h2>
<h2>{
{fullName}}h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName:'Kobe',
lastName:'Bryant'
},
methods:{
getFullName:function () {
console.log('getFullName')
return this.firstName+' '+this.lastName;
}
},
computed:{
fullName:function () {
console.log('fullName')
return this.firstName+' '+this.lastName;
}
}
});
script>
body>
html>
很明显计算属性效率高（只会执行一次，有缓存）！！！！
十四、块级作用域-let和var（掌握）
事实上var的设计可以看成JavaScript语言设计上的错误，但这种错误多半不能修复和移除，需要向后兼容
- 大概十年前，Brendan Eich就决定修复这个问题，于是他添加了一个新的关键字：let
- 我们可以将let看成更完美的var
块级作用域
- JS中使用var来声明一个变量时，变量的作用域主要是和函数的定义有关
- 针对于其他块定义来说是没有作用域的，比如if/for等，这在我们开发中往往会引起一些问题。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Titletitle>
head>
<body>
<button>按钮1button>
<button>按钮2button>
<button>按钮3button>
<button>按钮4button>
<button>按钮5button>
<script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Title</title>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
//ES5之前因为if和for都没有块级作用域的概念，所以在很多时候，我们必须借助于function的作用域来解决应用外面变量的问题
//ES6中，加入了let，let它是有if和for的块级作用域
// //1.变量作用域：变量在什么范围内是可用的
// {
// var name='why';//var没有块级作用域
// console.log(name);
// }
// console.log(name)//原则上不能访问
//2.没有块级作用域引起的问题(if的块级)
// var func;
// if(true){
// var name='why';
// func=function () {
// console.log(name);
// }
// // func();
// }
// name='kobe'
// func();
// // console.log(name)
//for循环也是没有作用域的
// var btns=document.getElementsByTagName('button');
// for(var i=0;i
// btns[i].addEventListener("click",function () {
// console.log('第' + i + '个按钮被点击');
// })
// }
//为什么闭包可用解决（因为函数是一个作用域）
// var btns=document.getElementsByTagName('button');
// for(var i=0;i
// (function (i) {
// btns[i].addEventListener("click",function () {
// console.log('第' + i + '个按钮被点击');
// })
// })(i)
// }
//正确写法:
const btns=document.getElementsByTagName('button');
for(let i=0;i<btns.length;i++){
(function (i) {
btns[i].addEventListener("click",function () {
console.log('第' + i + '个按钮被点击');
})
})(i)
}
script>
body>
html>
十五、三种方案对比-ES5没有闭包-有闭包-ES6的let（理解）
var声明的是全局变量，let是局部变量
十六、const的使用和注意点
const关键字
- 在很多语言中已经存在，比如c/c++中，主要的作用是将某个变量修饰为常量
- 在JavaScript中也是如此，使用const修饰的标识符为常量，不可以再次赋值
什么时候使用const呢？
- 当我们修饰的标识符不会被再次赋值的时，就可以使用const来保证数据的安全性
- 建议在ES6开发中，优先使用const，只有需要改变某一标识符的时候才使用let
const的注意：
一、不可再次赋值
二、const修饰的标识符必须赋值
三、常量的含义是指向的对象不能修改，但是可以改变对象内部的属性
十七、ES6对象字面量增强写法（掌握）
ES6中，对对象字面量进行了很多增强
什么叫字面量呢？
<script>
const obj={
};//这样的写法就叫对象的字面量
script>
属性简写
ES5的写法:
const name='why';
const age=18;
const height=1.88;
//将上面属性写入对象中
//曾经的写法
const obj={
name:name,
age:age,
height:height
}
console.log(obj)
ES6增强写法：
const obj={
name,age,height
}
console.log(obj)
函数简写：
//函数的增强写法
//ES5:
const obj={
run:function () {
},
eat:function () {
}
}
//ES6:
const obj2={
run(){
},
eat(){
}
}
JavaScript仍然存在缺陷，有以下升级版:
Angular---->google
TypeScript---->microsoft—>（类型检测功能）
flow---->(facebook)
十八、v-on的基本使用和语法糖（掌握）
在前端开发中，我们需要经常和用户交互
- 这个时候，我们就必须监听事件发生的时间，比如切换，拖拽，键盘事件等等
- 在Vue中如何监听事件呢？使用v-on指令
v-on介绍
- 作用：绑定事件监听器
- 缩写：@
- 预期：Function| Inline Statement| Object
- 参数：event
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Titletitle>
head>
<body>
<div id="app">
<h2>{
{counter}}h2>
<button @click="increment()">+button>
<button @click="decrement()">-button>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
counter: 0
},
methods:{
increment(){
this.counter++;
},
decrement(){
this.counter--;
}
}
});
script>
body>
html>
十九、v-on的参数传递问题（掌握）
-
当通过methods中定义方法，以供@click调用时，需要注意参数问题：
-
情况一：如果该方法不需要额外参数，那么方法后的()可以不添加
- 但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去
-
情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Titletitle>
head>
<body>
<div id="app">
<button @click="btn1Click()">按钮1button>
<button @click="btn1Click">按钮2button>
<button @click="btn2Click(111)">按钮2button>
<button @click="btn3Click(abc,$event)">按钮三button>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
abc:123
},
methods:{
btn1Click(){
console.log("btn1Click")
},
btn2Click(a){
console.log("-----",a)
},
btn3Click(abc,event){
console.log("::::",abc,event);
}
}
});
script>
body>
html>
二十、v-on修饰符
- 在某些情况下，我们拿到event的目的可能是进行一些事件处理
- Vue提供了修饰符来帮助我们方便的处理一些事件：
- .stop – 调用 event.stopPropagation()
- .prevent – 调用 event.preventDefault()
- .(keyCode | keyAlias) – 只当事件是从特定键触发时才触发回调
- .native – 监听组件根元素的原生事件
- .once – 只触发一次回调
.stop修饰符阻止事件冒泡：
不用修饰符的情况下点击按钮：
加上修饰符：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Titletitle>
head>
<body>
<div id="app">
<div @click="btn1Click()">
父盒子
<button @click.stop="btn2Click()">按钮button>
div>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
},
methods:{
btn1Click(){
console.log("btn1Click")
},
btn2Click(){
console.log("btn2Click")
}
}
});
script>
body>
html>
再次点击按钮，不再冒泡:
.prevent修饰符阻止默认事件：
.keyAlias监听键帽的点击（keyAlias是一系列事件）：
以enter为例：
.once只触发一次修饰符：
二十一、v-if和v-else-if和v-else的使用（掌握）
v-if的使用，非常简单
当变量isShow为true时，内容显现，isShow为false时，内容不显示
v-if和v-eles结合使用
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Titletitle>
head>
<body>
<div id="app">
<div v-if="isShow">
<div>adiv>
<div>bdiv>
<div>cdiv>
<div>ddiv>
<div>ediv>
{
{message}}
div>
<h3 v-else>isShow为false时，显示我h3>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
isShow:true
}
});
script>
body>
html>
isShow为true时的结果：
isShow为false时的结果：
v-if和v-else和v-else-if的使用（使用较少，条件很多的时候建议使用计算属性判断）
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Titletitle>
head>
<body>
<div id="app">
<div v-if="score>=90">优秀div>
<div v-else-if="score>=80">良好div>
<div v-else-if="score>=60">及格div>
<div v-else>不及格div>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
score:99
}
});
script>
body>
html>
上述代码是存在漏洞的，还是希望使用计算属性
二十二、登录切换的小案例（掌握）
我们来做一个简单的小案例
- 用户在登入时，可以切换使用用户账号登入还是邮箱地址登入
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Titletitle>
head>
<body>
<div id="app">
<span v-if="isUser">
<label for="username">用户账号label>
<input type="text" id="username" name="username" placeholder="请输入用户名">
span>
<span v-else>
<label for="email">用户邮箱label>
<input type="text" id="email" name="email" placeholder="请输入邮箱">
span>
<button @click="isUsers()">切换类型button>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
isUser:true
},
methods:{
//如果这里用计算属性只会执行一次！！！
isUsers(){
this.isUser=!this.isUser;
}
}
});
script>
body>
html>
二十三、登入切换的input复用问题（理解）
点击切换：（内容依然存在）
这是因为Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素（vue底层）
解决方案一：如果我们不希望Vue出现类似重复利用的问题，可以给对应的input添加key，并且我们要保证key的不同
解决方案二：input包含在label标签中！（个人推荐）
二十四、v-show的使用以及和v-if的区别（掌握）
v-if和v-show都可以决定一个元素是否显示，那么开发中我们如何选择呢？
- v-if条件为false时，压根不会有对应的元素在DOM中。
- v-show当条件为false，仅仅是将元素的display属性设置为none而已
开发中如何选择呢？
- 当需要在显示与隐藏之间切换很频繁时，使用v-show（这个效率高）
- 当只有一次切换时，通常使用v-if（这个还是使用比较多一点）
二十五、v-for遍历数组和对象（掌握）
v-for遍历数组：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Titletitle>
<style>
li{
list-style: none;
}
style>
head>
<body>
<div id="app">
<ul>
<li v-for="item in names">{
{item}}li>
ul>
<ul>
<li v-for="(item,index) in names">{
{index+1}}.{
{item}}li>
ul>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
names:['why','kobe','james','curry']
}
});
script>
body>
html>
结果：
v-for遍历对象：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Titletitle>
head>
<body>
<div id="app">
<ul>
<li v-for="item in info">{
{item}}li>
ul>
<ul>
<li v-for="(item,key) in info">{
{item}}-{
{key}}li>
ul>
<ul>
<li v-for="(item,key,index) in info">{
{item}}-{
{key}}--{
{index+1}}li>
ul>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
info:{
name:'why',
age:18,
height:1.88
}
}
});
script>
body>
html>
结果：
二十六、v-for-绑定和非绑定key的区别（理解）
官方在推荐我们在使用v-for时，给对应的元素或组件添加上一个:key属性。
为什么需要这个key属性呢（了解）？
- 这个其实和Vue的虚拟DOM的Diff算法有关系
- 这里我们借用React’s diff algorithm中的一张图来简单说明一下：
当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点 - 我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的
- 即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？
所以我们需要使用key来给每一个节点做一个唯一标识
- Diff算法就可以正确的识别此节点
- 找到正确的位置插入新的节点
所以一句话，key的作用主要是为了高效的更新虚拟DOM
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Titletitle>
head>
<body>
<div id="app">
<ul>
<li v-for="item in letters" :key="id">{
{item}}li>
ul>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
letters: ['A','B','C','D','E']
}
});
script>
body>
html>
二十七、数组中哪些方法是响应式的（掌握）
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Titletitle>
head>
<body>
<div id="app">
<ul>
<li v-for="item in letters">{
{item}}li>
ul>
<button @click="btnClick()">按钮button>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
letters:['a','b','c','d']
},
methods:{
btnClick(){
//1.push方法是响应式的
this.letters.push('AAA');//添加一个元素（可以多添加）
this.letters.push('AAA','BBB','CCC');
//2.pop方法是响应式的
this.letters.pop();//删除数组中的最后一个元素
//3.shift方法是响应式的
this.letters.shift();//删除数组中的第一个元素
//4.unshift方法是响应式的
this.letters.unshift('AAA');//数组最前面添加元素（可以多添加）
this.letters.unshift('AAA','BBB','CCC');
//5.splice方法是响应式的
// splice作用:删除元素/插入元素/替换原元素
// splice(start)//从什么位置开始操作 删除元素/插入元素/替换原元素
// 如果是删除元素，第二个参数传入你要删除几个元素(1~n)没传参数只会保留第n(0~n)个元素
// splice(start,n,替换1,替换2....替换n)，从start开始替换的写法（第二个参数为n）
// splice(start,0,插入1,插入2....插入n)，从start开始插入的写法（第二个参数为0）
this.letters.splice(1);
//6.sort方法是响应式的
this.letters.sort()//进行排序
//7.reverse 方法是响应式的
this.letters.reverse()//顺序反转
// 通过索引值修改数组中的元素不是响应式的！！！！！！！想要替换去找splice吧
this.letters[0]='bbb'
//还有一种修改的方法
//Vue.set(要修改的对象,索引值,修改后的值)
Vue.set(this.letters,1,'bbb')
}
}
});
function sum(...sum) {
//可变参数的写法
console.log(sum)
}
sum(1,2,3,4,5,6)//可以传入无限个值
script>
body>
html>
二十八、作业的回顾和实现（掌握）
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Titletitle>
<style>
.active{
color: red;
}
style>
head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in movies" :class="{active:currentIndex===index}" @click="liClick(index)">{
{item}}li>
ul>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
movies:['海王','海贼王','加勒比海盗','海尔兄弟'],
currentIndex:0
},
methods:{
liClick(index){
this.currentIndex = index
}
}
});
script>
body>
html>
二十九、购物车案例-界面搭建（掌握）
HTML代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Titletitle>
<style>
@import "style.css";
style>
head>
<body>
<div id="app">
<table>
<thead>
<tr>
<th>th>
<th>书籍名称th>
<th>出版日期th>
<th>价格th>
<th>购买数量th>
<th>操作th>
tr>
thead>
<tbody>
<tr v-for="item in books">
<td>{
{item.id}}td>
<td>{
{item.name}}td>
<td>{
{item.data}}td>
<td>{
{item.price}}td>
<td>
<button>-button>
{
{item.count}}
<button>+button>
td>
<td>
<button>移除button>
td>
tr>
tbody>
table>
div>
<script src="../js/vue.js">script>
<script src="main.js">script>
body>
html>
css代码：
table{
border: 1px solid #e9e9e9;
border-collapse: collapse;
border-spacing: 0;
}
th,td{
padding: 8px 16px;
border: 1px solid #e9e9e9;
text-align: left;
}
th{
background-color: #f7f7f7;
color: #5c6b77;
font-weight: 600;
}
VUE代码：
const app = new Vue({
el:'#app',
data:{
books: [
{
id:1,
name:'《算法导论》',
data:'2006-9',
price:85.00,
count:1
},{
id:2,
name:'《UNIX编程艺术》',
data:'2006-2',
price:59.00,
count:1
},{
id:3,
name:'《编程珠玑》',
data:'2008-10',
price:39.00,
count:1
},{
id:4,
name:'《代码大全》',
data:'2006-3',
price:128.00,
count:1
},
]
}
})
三十、购物车案例-过滤器的使用（掌握）
定义该过滤器：
三十一、购物车案例-改变购买数量（掌握）
HTML代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Titletitle>
<style>
@import "style.css";
style>
head>
<body>
<div id="app">
<table>
<thead>
<tr>
<th>th>
<th>书籍名称th>
<th>出版日期th>
<th>价格th>
<th>购买数量th>
<th>操作th>
tr>
thead>
<tbody>
<tr v-for="(item,index) in books">
<td>{
{item.id}}td>
<td>{
{item.name}}td>
<td>{
{item.data}}td>
<td>{
{item.price|showPrice}}td>
<td>
<button @click="decrement(index)" :disabled="item.count <= 1">-button>
{
{item.count}}
<button @click="increment(index)">+button>
td>
<td>
<button>移除button>
td>
tr>
tbody>
table>
<h2>总价格:{
{}}h2>
div>
<script src="../js/vue.js">script>
<script src="main.js">script>
body>
html>
VUE代码：
const app = new Vue({
el: '#app',
data: {
books: [
{
id: 1,
name: '《算法导论》',
data: '2006-9',
price: 85.00,
count: 1
}, {
id: 2,
name: '《UNIX编程艺术》',
data: '2006-2',
price: 59.00,
count: 1
}, {
id: 3,
name: '《编程珠玑》',
data: '2008-10',
price: 39.00,
count: 1
}, {
id: 4,
name: '《代码大全》',
data: '2006-3',
price: 128.00,
count: 1
},
]
},
methods: {
decrement(index) {
this.books[index].count--;
},
increment(index) {
this.books[index].count++;
}
},
filters: {
showPrice(price) {
/*它会自动把参数传进来,我们处理后返回*/
return '￥' + price.toFixed(2);
}
}
})
三十二、购物车案例-移除按钮-最终价格（掌握）
HTMl：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Titletitle>
<style>
@import "style.css";
style>
head>
<body>
<div id="app">
<div v-if="books.length">
<table>
<thead>
<tr>
<th>th>
<th>书籍名称th>
<th>出版日期th>
<th>价格th>
<th>购买数量th>
<th>操作th>
tr>
thead>
<tbody>
<tr v-for="(item,index) in books">
<td>{
{item.id}}td>
<td>{
{item.name}}td>
<td>{
{item.data}}td>
<td>{
{item.price|showPrice}}td>
<td>
<button @click="decrement(index)" :disabled="item.count <= 1">-button>
{
{item.count}}
<button @click="increment(index)">+button>
td>
<td>
<button @click="removeHandle()">移除button>
td>
tr>
tbody>
table>
<h2>总价格:{
{totalPrice|showPrice}}h2>
div>
<h2 v-else>购物车为空h2>
div>
<script src="../js/vue.js">script>
<script src="main.js">script>
body>
html>
VUE代码：
const app = new Vue({
el: '#app',
data: {
books: [
{
id: 1,
name: '《算法导论》',
data: '2006-9',
price: 85.00,
count: 1
}, {
id: 2,
name: '《UNIX编程艺术》',
data: '2006-2',
price: 59.00,
count: 1
}, {
id: 3,
name: '《编程珠玑》',
data: '2008-10',
price: 39.00,
count: 1
}, {
id: 4,
name: '《代码大全》',
data: '2006-3',
price: 128.00,
count: 1
},
]
},
methods: {
decrement(index) {
this.books[index].count--;
},
increment(index) {
this.books[index].count++;
},
removeHandle (index){
this.books.splice(index,1);
}
},
computed:{
totalPrice(){
let totalPrice=0;
for(let i=0;i<this.books.length;i++){
totalPrice+=this.books[i].price*this.books[i].count
}
return totalPrice;
}
},
filters: {
showPrice(price) {
/*它会自动把参数传进来,我们处理后返回*/
return '￥' + price.toFixed(2);
}
}
})
三十三、JavaScript高阶函数的使用（掌握）
点击进入学习地址
三十四、v-model的使用和原理（掌握）
- 表单控件在实际开发中是非常常见的。特别是对于用户信息的交互，需要大量的表单
- Vue中使用v-model指令来实现表单元素和数据的双向绑定
- 双向绑定指令也叫表单元素绑定，vue提供了 v-model 双向数据绑定 指令，用来辅助开发者在 不操作 DOM 的前提下， 快速获取表单的数据。
- vue中使用 v-model 指令来实现表单元素和数据的双向绑定，经常用于表单 input 和 textarea 元素。
<div id="app">
<input type="text" v-model="message">
<h2>{
{message}}h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: ''
}
})
script>
理解双向绑定：
- 我们来看上述代码，当我们在输入框输入内容时
- 因为 input 中的 v-model 绑定了message，所以会实时的将输入的内容传递给 message，message发生改变。
- 当message 发生改变时，因为上面我们使用 Mustache 语法，将 message 的值插入到 DOM 中，所以 DOM 会发生响应的改变。
- 所以，通过 v-model 实现了 双向的绑定
v-model原理
v-model 其实是一个语法糖，它的背后本质上是包含两个操作：
- v-bind 绑定一个 value 属性
- v-on 指令给当前元素绑定 input 事件
也就是说上面的代码，等同于下面的代码：
<input type="text" v-model="message">
三十五、v-model结合radio类型使用（掌握）
当存在多个单选框时：
<div id="app">
<label for="male">
<input type="radio" id="male" value="男" v-model="sex">男
label>
<label for="female">
<input type="radio" id="female" value="女" v-model="sex">女
label>
<h2>您选择的性别是: {
{sex}}h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
sex: '女'
}
})
script>
三十六、v-model结合checkbox类型使用（掌握）
复选框分为两种情况：单个勾选框和多个勾选框
单个勾选框
- v-moduel 即为布尔值
- 此时 input 的 value 并不影响v-model的值
多个复选框
- 当是多个复选框时，因为可以选中多个，所以对应的 data 中属性是一个数组
- 当选中某一个时，就会将 input 的 value 添加到数组中
<div id="app">
<label for="agree">
<input type="checkbox" id="agree" v-model="isAgree">同意协议
label>
<h2>您选择的是: {
{isAgree}}h2>
<button :disabled="!isAgree">下一步button>
<input type="checkbox" value="篮球" v-model="hobbies">篮球
<input type="checkbox" value="足球" v-model="hobbies">足球
<input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
<input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
<h2>您的爱好是: {
{hobbies}}h2>
<label v-for="item in originHobbies" :for="item">
<input type="checkbox" :value="item" :id="item" v-model="hobbies">{
{item}}
label>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
isAgree: false, // 单选框
hobbies: [], // 多选框,
originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '台球', '高尔夫球']
}
})
script>
三十七、v-model结合select类型使用（掌握）
和 checkbox 一样，select 也分单选和多选两种情况
单选：只能选中一个值
- v-model 绑定的是一个值
- 当我们选中 option 中的一个时，会将它对应的 vaule 赋值到 mySelect 中
多选：可以选中多个值
- v-model 绑定的是一个数组
- 当选中多个值时，就会将选中的 option 对应的 value 添加到数组 mySelects中
<div id="app">
<select name="abc" v-model="fruit">
<option value="苹果">苹果option>
<option value="香蕉">香蕉option>
<option value="榴莲">榴莲option>
<option value="葡萄">葡萄option>
select>
<h2>您选择的水果是: {
{fruit}}h2>
<select name="abc" v-model="fruits" multiple>
<option value="苹果">苹果option>
<option value="香蕉">香蕉option>
<option value="榴莲">榴莲option>
<option value="葡萄">葡萄option>
select>
<h2>您选择的水果是: {
{fruits}}h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
fruit: '香蕉',
fruits: []
}
})
script>
三十八、input中的值绑定（掌握）
v-bind:value 动态的给value绑定值
三十九、v-model修饰符的使用（掌握）
<div id="app">
<input type="text" v-model.lazy="message">
<h2>{
{message}}h2>
<input type="number" v-model.number="age">
<h2>{
{age}}-{
{typeof age}}h2>
<input type="text" v-model.trim="name">
<h2>您输入的名字:{
{name}}h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
age: 0,
name: ''
}
})
script>