1、差值运算
1.1、Mustache
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2>{{message}}, 极客鼠!</h2>
<!--mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式-->
<h2>{{firstName + lastName}}</h2>
<h2>{{firstName + ' ' + lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{counter * 2}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好啊",
firstName: "geek",
lastName: "mice",
counter: 100,
},
});
</script>
</body>
</html>
效果图
1.2、v-once指令的使用
- 某些情况，我们可能不希望界面随意的跟随改变
- 这个时候，可以使用一个vue指令
- v-once
- 该指令后面不需要跟上任何表达式(比如之前的v-for后面是跟随表达式)
- 该指令表示元素和组件只渲染一次，不会随着数据改变而改变
源码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>v-once的用法</title>
</head>
<body>
<div id="app">
<h1>{{message}}</h1><span>mustach语法</span>
<h2 v-once>{{message}}</h2><span>v-once语法</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "小朋友，你是否有很多问号？？？",
},
});
</script>
</body>
</html>
效果图
1.3、v-html指令的使用
- 某些情况，我们从服务器请求到的数据本身就是一个HTML代码
- 如果我们直接通过{{}}输出，会将html代码也一起输出
- 但是我们可能希望的是按照HTML格式进行解析，显示对应的内容
如果希望解析出HTML展示可以使用v-html指令 - 该指令后面往往会跟随一个string类型
- 会将string的HTML解析出来并且记性渲染
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>03-v-html用法</title>
</head>
<body>
<div id="app">
<h2>{{url}}</h2>
<h2 v-html="url"></h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好啊，小朋友",
url: '<a href="http://www.baidu.com">百度一下</a>',
},
});
</script>
</body>
</html>
效果图
1.4、v-text指令的使用
- v-text作用和mustache一致
- v-text通常情况xia，接收一个string类型
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>04-v-text的用法</title>
</head>
<body>
<div id="app">
<h1>{{message}},geekmice</h1>
<h1 v-text="message">geekmice</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好啊，小朋友",
},
});
</script>
</body>
</html>
效果图
1.5、v-pre指令的使用
- v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2 v-pre>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
}
})
</script>
</body>
</html>
1.6、v-cloak指令的使用
- 在某些情况下，我们浏览器可能会直接显然出未编译的Mustache标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>04-v-text的用法</title>
</head>
<body>
<div id="app">
<h1>{{message}},geekmice</h1>
<h1 v-text="message">geekmice</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好啊，小朋友",
},
});
</script>
</body>
</html>
2、绑定属性
2.1、v-bind介绍
- 之前所学的指令主要作用是将值插入到我们模板的内容当中
- 但是除了内容需要动态来决定之外，某些属性我们也希望动态来绑定
- 比如绑定a元素的href属性
- 比如动态绑定img元素的src属性
- 使用v-bind指令
- 动态绑定属性
2.2、v-bind基础
- v-bind用于绑定一个或者多个属性值，或者向另一个组件传递props值
- 开发中有哪些属性需要绑定呢
- 还是有很多的，比如图片的链接src,网站的href,动态绑定类，样式
- 通过ue实例中data绑定元素的src和href
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>v-bind的基本使用</title>
</head>
<body>
<div id="app">
<!-- 错误的做法: 这里不可以使用mustache语法-->
<!-- <img src="{{imgURL}}" alt="" /> -->
<img v-bind:src="imgURL" alt="" />
<a v-bind:href="aHref">百度一下</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "小朋友",
imgURL: "https://element.eleme.cn/static/component.bd3411b.png",
aHref: "http://www.baidu.com",
},
});
</script>
</body>
</html>
2.3、v-bind语法糖
2.4、v-bind绑定class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>v-bind绑定class</title>
</head>
<body>
<div id="app">
<!-- <h2 class="active">{{message}}</h2> -->
<!-- <h2 :class="active">{{message}}</h2> -->
<!-- <h2 v-bind:class="{k1:v1,k2:v2}">{{message}}</h2> -->
<!-- <h2 v-bind:class="{类名1:true,类名2:boolean}">{{message}}</h2> -->
<h2 class="title" :class="{active:isActive,line:isLine}">{{message}}</h2>
<h2 class="title" :class="getClasses()">{{message}}</h2>
<button v-on:click="btnClick">按钮</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好啊",
isActive: true,
isLine: true,
},
methods: {
btnClick() {
this.isActive = !this.isActive;
},
getClasses() {
return {
active: this.isActive,
line: this.isLine,
};
},
},
});
</script>
</body>
</html>
数组形式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>v-bind绑定class(数组类型)</title>
</head>
<body>
<div id="app">
<h2 class="title" :class="[active,line]">{{message}}</h2>
<h2 class="title" :class="getClasses()">{{message}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "小朋友，你是否有很多问号",
active: "aaaa",
line: "bbbb",
},
methods: {
getClasses() {
return [this.active, this.line];
},
},
});
</script>
</body>
</html>
效果图
2.5、v-bind绑定style
- 我们可以利用v-bind:style来绑定一些CSS内联样式
- 在写CSS属性名的时候，比如font-size
- 我们可以使用驼峰式 (camelCase) fontSize
- 或短横线分隔 (kebab-case，记得用单引号括起来) ‘font-size’
- 绑定style有两种方式
- 对象
- 数组
对象语法
数组语法
v-bind绑定style(对象语法)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>v-bind绑定class(对象语法)</title>
</head>
<body>
<div id="app">
<!-- <h2 :style="{key(属性名):value(属性值)}">{{message}}</h2> -->
<!-- '50px'必须加上单引号，否则被当做一个遍历去解析 -->
<h2 :style="{fontSize:'10px'}">{{message}}</h2>
<h2 :style="{fontSize:finalSize + 'px' , backgroundColor: finalColor}">
{{message}}
</h2>
<h2 :style="getStyles()">通过方法实现-{{message}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "小朋友，你是否有很多问号",
finalSize: 100,
finalColor: "blue",
},
methods: {
getStyles() {
return {
fontSize: this.finalSize + "px",
backgroundColor: this.finalColor,
};
},
},
});
</script>
</body>
</html>
v-bind绑定style(数组语法)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2 :style="[baseStyle, baseStyle1]">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
baseStyle: {backgroundColor: 'red'},
baseStyle1: {fontSize: '100px'},
}
})
</script>
</body>
</html>
3、计算属性
3.1、何为计算属性
- 我们知道，在模板中可以直接通过插值语法显示一些data中的数据。
- 但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示
- 比如我们有firstName和lastName两个变量，我们需要显示完整的名称。
- 但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}} {{lastName}}
举例说明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>10-计算属性的基本操作</title>
</head>
<body>
<div id="app">
<h2>{{getFullName}}</h2>
<h2>{{fullName}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: "#app",
data: {
firstName: "lebron",
lastName: "James",
},
computed: {
fullName() {
return this.firstName + " " + this.lastName;
},
},
methods: {
getFullName() {
return this.firstName + " " + this.lastName;
},
},
});
</script>
</body>
</html>
3.2、计算属性的复杂操作
举例说明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>11-计算属性的复杂操作</title>
</head>
<body>
<div id="app">
<h2>总价格：{{totalPrice}}</h2>
<h2>总价格：{{getTotalPrice()}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: "#app",
data: {
books: [
{ id: 1, name: "数据结构", price: 110 },
{ id: 2, name: "计算机组成原理", price: 120 },
{ id: 3, name: "计算机网络", price: 130 },
{ id: 4, name: "操作系统", price: 140 },
],
},
methods: {
getTotalPrice() {
let result = 0;
for (let i = 0; i < this.books.length; i++) {
result += this.books[i].price;
}
return result;
},
},
computed: {
totalPrice() {
let result = 0;
for (let i = 0; i < this.books.length; i++) {
result += this.books[i].price;
}
return result;
},
},
});
</script>
</body>
</html>
3.3、计算属性的getter和setter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>12-计算属性的get和set操作</title>
</head>
<body>
<div id="app">
<h2>{{fullName}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: "#app",
data: {
firstName: "Kobe",
lastName: "Bryant",
},
computed: {
// fullName: function () {
// return this.firstName + ' ' + this.lastName
// }
// name: 'coderwhy'
// 计算属性一般是没有set方法, 只读属性.
fullName: {
set: function (newValue) {
// console.log('-----', newValue);
const names = newValue.split(" ");
this.firstName = names[0];
this.lastName = names[1];
},
get: function () {
return this.firstName + " " + this.lastName;
},
},
// fullName: function () {
// return this.firstName + ' ' + this.lastName
// }
},
});
</script>
</body>
</html>
3.4、计算属性的缓存
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<body>
<div id="app">
<!--1.直接拼接: 语法过于繁琐-->
<h2>{{firstName}} {{lastName}}</h2>
<!--2.通过定义methods-->
<!--<h2>{{getFullName()}}</h2>-->
<!--<h2>{{getFullName()}}</h2>-->
<!--<h2>{{getFullName()}}</h2>-->
<!--<h2>{{getFullName()}}</h2>-->
<!--3.通过computed-->
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
// angular -> google
// TypeScript(microsoft) -> ts(类型检测)
// flow(facebook) ->
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>
4、事件监听
4.1、v-on基本使用
- 在前端开发中，我们需要经常和用于交互。
- 这个时候，我们就必须监听用户发生的时间，比如点击、拖拽、键盘事件等等
- 在Vue中如何监听事件呢？使用v-on指令
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>01-v-on的基本使用</title>
</head>
<body>
<div id="app">
<h2>{{counter}}</h2>
<button @click="increment">+</button>
<button @click="descrement">-</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: "#app",
data: {
counter: 0,
},
methods: {
increment() {
this.counter++;
},
descrement() {
this.counter--;
},
},
});
</script>
</body>
</html>
效果图
4.2、v-on参数问题
案例说明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>v-on的参数问题</title>
</head>
<body>
<div id="app">
<!-- 1.事件调用的方法没有参数 -->
<button @click="btnClick()">按钮1</button>
<button @click="btnClick">按钮2</button>
<!-- 2、在事件定义时，写方法是省略了小括号，但是方法本身需要一个参数的
这个时候，vue会默认将浏览器生产的event事件对象作为参数传入到方法
-->
<button @click="btn2Click(123)">按钮3</button>
<button @click="btn2Click()">按钮4</button>
<button @click="btn2Click">按钮5</button>
<!-- 3、方法定义时候，我们需要event对象，同时需要其他参数 -->
<!-- 在调用方式，如何手动获取到浏览器参数的event对象：$event -->
<button @click="btn3Click('2',$event)">按钮6</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "小朋友，你是否有很多问题",
},
methods: {
// 没有参数
btnClick() {
console.log("btnClick()");
},
// 有参数
btn2Click(event) {
console.log("------", event);
},
btn3Click(abc, event) {
console.log("++++++++++++", abc, event);
},
},
});
</script>
</body>
</html>
效果图
4.3、v-on修饰符
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<body>
<div id="app">
<!--1. .stop修饰符的使用-->
<div @click="divClick">
aaaaaaa
<button @click.stop="btnClick">按钮</button>
</div>
<!--2. .prevent修饰符的使用-->
<br />
<form action="baidu">
<input type="submit" value="提交" @click.prevent="submitClick" />
</form>
<!--3. .监听某个键盘的键帽-->
<input type="text" @keyup.enter="keyUp" />
<!--4. .once修饰符的使用-->
<button @click.once="btn2Click">按钮2</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好啊",
},
methods: {
btnClick() {
console.log("btnClick");
},
divClick() {
console.log("divClick");
},
submitClick() {
console.log("submitClick");
},
keyUp() {
console.log("keyUp");
},
btn2Click() {
console.log("btn2Click");
},
},
});
</script>
</body>
</html>
5、条件和循环
5.1、条件判断
5.1.1、v-if,v-else-if,v-else
- v-if、v-else-if、v-else
- 这三个指令与JavaScript的条件语句if、else、else if类似。
- Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件
- 简单案例演示
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>14-v-if-else使用</title>
</head>
<body>
<div id="app">
<p v-if="score >= 90">优秀</p>
<p v-else-if="score >= 80">良好</p>
<p v-else-if="score >= 60">及格</p>
<p v-else=" score < 60">不及格</p>
<p></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: "#app",
data: {
score: 89,
},
created() {},
methods: {},
});
</script>
</body>
</html>
效果图
- v-if原理实现
- v-if后面的条件为false时，对应的元素以及其子元素不会渲染。
- 也就是根本没有不会有对应的标签出现在DOM中。
5.1.2、条件渲染案例
案例需求
用户再登录时，可以切换使用用户账号登录还是邮箱地址登录。
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>15-切换用户小案例</title>
</head>
<body>
<div id="app">
<span v-if="isUser">
<label for="username">用户账号</label>
<input type="text" id="username" placeholder="用户账号" />
</span>
<span v-else>
<label for="email">用户邮箱</label>
<input type="text" id="email" placeholder="用户邮箱" />
</span>
<button @click="isUser = !isUser">切换类型</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: "#app",
data: {
isUser: true,
},
created() {},
methods: {},
});
</script>
</body>
</html>
效果图
5.1.3、案例问题
- 场景回显
-
小问题
- 如果我们在有输入内容的情况下，切换了类型，我们会发现文字依然是显示之前的输入内容
- 但是按道理来讲，我们应该切换到另外一个input元素中
- 在另外一个input元素中，我们并没有输入内容
- 为什么会出现这个问题？
-
问题解答
- 这是因为vue在进行dom渲染时候，处于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。
- 在上面案例中，vue内部会发现原来的input元素不再使用，直接作为else中的input来使用
-
解决方案
- 如果我们不希望vue出现类似重复利用的问题，可以给对应的nput添加key
- 并且我们需要保证key的不同
5.1.4、v-show
- v-show的用法和v-if非常相似，也用于决定一个元素是否渲染
- v-show和v-if对比
- v-if当条件为false时，压根不会有对应的元素在DOM中。
- v-show当条件为false时，仅仅是将元素的display属性设置为none而已。
- 开发中如何选择呢？
- 当需要在显示与隐藏之间切片很频繁时，使用v-show
- 当只有一次切换时，通过使用v-if
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>17-v-show使用</title>
</head>
<body>
<div id="app">
<!-- 条件为false,包含v-if指令的元素，根本不会存在dom中 -->
<h2 v-if="isShow" id="jack">{{message}}</h2>
<!-- 条件为FALSE，v-show只是给我们元素添加一个行内样式：display:none -->
<h2 v-show="isShow" id="rose">{{message}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "小朋友，你是否有很多问号",
isShow: true,
},
created() {},
methods: {},
});
</script>
</body>
</html>
5.2、循环遍历
5.2.1、v-for遍历数组
- 当我们有一组数据需要进行渲染时候，我们可以使用v-for来完成
- v-for语法类似于JavaScript的for循环
- 格式如下：" item in items "的形式
- 我们来看一个简单的案例
- 如果在遍历过程中不需要使用索引值
- v-for=“movie in movies”
- 一次从movies中取出movie,并且在元素的内容中，我们可以使用差值运算，来使用movie
- 如果在遍历过程中，我们需要拿到元素在数组中的索引值呢？
- 语法格式：v-for=(item,index) in items
- 其中index就代表了取出的item在原数组的索引值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DOCUMENT</title>
</head>
<body>
<div id="app">
<!-- 1、遍历过程中，没有使用索引值 -->
<ul>
<li v-for="(item) in names">{{item}}</li>
</ul>
<!-- 2、遍历过程中，使用索引值 -->
<ul>
<li v-for="(item,index) in names">{{index+1}} {{item}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: "#app",
data: {
names: ["刘备", "关羽", "张飞"],
},
created() {},
methods: {},
});
</script>
</body>
</html>
5.2.2、v-for遍历对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>19-v-for遍历对象</title>
</head>
<body>
<div id="app">
<!-- 1、遍历对象过程中，如果只是获取一个值，name获取到的是value -->
<ul>
<li v-for="(item) in userInfo">{{item}}</li>
</ul>
<!-- 2、遍历对象过程中，获取key,value格式key:value -->
<ul>
<li v-for="(value,key) in userInfo">{{key}}:{{value}}</li>
</ul>
<!-- 3、获取key,value,index格式 index,key,value -->
<ul>
<li v-for="(value,key,index) in userInfo">{{index+1}} {{key}} {{value}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: "#app",
data: {
userInfo: {
name: "geekmice",
age: 18,
sex: "男",
},
},
created() {},
methods: {},
});
</script>
</body>
</html>
效果图
5.2.3、组件的key属性
- 官方推荐我么在使用v-for时候，给对应的元素或者组件添加一个:key属性
- 为什么？
- 这个其实和vue的虚拟dom和 diff算法有关系
- 如图所示
- 当某一层有很多相同的节点时候，也就是列表节点，我们希望插入一个新的节点
- 我们希望可以在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" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DOCUMENT</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in letters" :key="item">{{item}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: "#app",
data: {
letters: ["A", "B", "C"],
},
created() {},
methods: {},
});
</script>
</body>
</html>
5.2.4、检测数组更新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>21-检测数组更新</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: "#app",
data: {
letters: ["A", "B", "C"],
nums: [1, 34, 987],
obj: [
{ name: "jack", age: 98 },
{ name: "rose", age: 78 },
{ name: "mike", age: 48 },
],
},
created() {
/**
* 1、push方法
* Array.push(param1,param2....)向数组的末尾添加一个或多个元素，并返回新的数组长度。原数组改变
*/
this.letters.push("D");
console.log(this.letters);
/**
* 2、pop方法
* Array.pop() 删除并且返回数组的最后一个元素，若数组为空，返回undefined，原数组改变
*/
console.log(this.letters.pop()); // D
console.log(this.letters); // A,B,C
/**
* 3、shift方法
* Array.shift() 删除数组第一个元素并且返回第一项，数组为空时候，返回undefined，原数组改变
*/
console.log(this.letters.shift()); // A
/**
* 4、unshift方法
* Array.unshift() 向数组的开头添加一个或者多个元素，并且返回新的数组长度，元素改变
*/
console.log(this.letters.unshift("A1", "B1")); // 4
/**
* 5、sort方法
* Array.sort() 对数组元素进行排序，按照字符串的Unicode码排序，原数组改变
*/
// 从小到大
var s1 = function (a, b) {
return a - b;
};
console.log(this.nums.sort(s1)); // -1, 1, 987,
// 从大到小
var s2 = function (a, b) {
return b - a;
};
console.log(this.nums.sort(s2)); // 987, 1, -1
// 按照数组对象中的某个值排序
console.log(this.obj.sort(this.s3("age"))); // 按照年龄排序
/**
* 6、reverse方法
* Array.reverse() 将数组倒序，原数组改变
*/
console.log(this.nums.reverse()); // -1,1,987
/**
* 7、splice Array.splice()
* 删除元素：第二个参数传入你要删除的几个元素，没有传，删除所有
* 替换元素：
* 插入元素
*/
},
methods: {
s3(param) {
return function sortAge(a, b) {
return a[param] - b[param];
};
},
},
});
</script>
</body>
</html>
6、阶段案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
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;
}
</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.date}}</td>
<td>{{item.price | showPrice}}</td>
<td>
<button
@click="decrement(index)"
v-bind:disabled="item.count <= 1"
>
-
</button>
{{item.count}}
<button @click="increment(index)">+</button>
</td>
<td><button @click="removeHandle(index)">移除</button></td>
</tr>
</tbody>
</table>
<h2>总价格: {{totalPrice}}</h2>
</div>
<h2 v-else>购物车没有货物</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
msg: "我还是从前那个少年",
books: [
{
id: 1,
name: "《算法导论》",
date: "2006-9",
price: 85.0,
count: 1,
},
{
id: 2,
name: "《UNIX编程艺术》",
date: "2006-2",
price: 59.0,
count: 1,
},
{
id: 3,
name: "《编程珠玑》",
date: "2008-10",
price: 39.0,
count: 1,
},
{
id: 4,
name: "《代码大全》",
date: "2006-3",
price: 128.0,
count: 1,
},
],
},
methods: {
increment(index) {
this.books[index].count++;
},
decrement(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);
},
msgFormat(msg) {
return msg + "8888";
},
},
});
</script>
</body>
</html>
7、表单绑定
7.1、初始v-model
- 表单空间在实际开发中是非常常见的，特别是用户信息的提交，需要大量的表单
- vue中使用v-model指令来实现表单元素和数据的双向绑定
- 案例解析
- 当我们输入框输入内容时候
- 由于input中的v-model绑定了message,所以会实时输入的内容传递给message,message发生改变
- 当message发生改变时，因为上面我们使用了mustache语法，将message的值插入到DOM,所以DOM会发生响应的改变。
- 所以通过v-model实现了双向的绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="message" />
{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "我还是从前那个少年",
},
});
</script>
</body>
</html>
7.2、v-model原理
- v-model其实是一个语法糖，它的背后本质上是包含两个操作
- 1、v-bind绑定一个value属性
- 2、v-on指令给当前元素绑定input事件
也就是说下面代码，等同于如下操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>25-v-model的原理</title>
</head>
<body>
<div id="app">
<!-- 方案一 -->
<input type="text" v-model="message" />{{message}}
<!-- 方案二 -->
<input type="text" :value="message" @input="valueChange" />{{message}}
<!-- 方案三 -->
<input
type="text"
:value="message"
@input="message = $event.target.value"
/>{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "我还是从前那个少年",
},
methods: {
valueChange(event) {
this.message = event.target.value;
},
},
});
</script>
</body>
</html>
7.2、v-model结合radio类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<body>
<div id="app">
<label for="male">
<input type="radio" id="male" value="男" v-model="sex" />
</label>
<label for="female">
<input type="text" id="female" value="女" v-model="sex" />
</label>
<h2>您的性别：{{sex}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "小朋友，你是否有很多问号",
sex: "男",
},
});
</script>
</body>
</html>
7.3、v-model结合checkbox类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 单选框 -->
<label for="agree">
<input type="checkbox" id="agree" v-model="isAgree" />同意协议
</label>
<h2>您的选择是{{isAgree}}</h2>
<button :disabled="!isAgree">下一步</button>
<br>
<br>
<!-- 多选框 -->
<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="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "小朋友，你是否有很多问号",
isAgree: false,
hobbies: [],
originHobbies: [
"篮球",
"足球",
"乒乓球",
"排球",
"羽毛球",
"高尔夫球",
"台球",
],
},
});
</script>
</body>
</html>
效果图
7.4、v-model结合select类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>28-v-model结合select类型</title>
</head>
<body>
<div id="app">
<!-- 1、选择一个 -->
<select name="abc" v-model="fruit">
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="榴莲">榴莲</option>
<option value="葡萄">葡萄</option>
</select>
<h2>您选择的水果是：{{fruit}}</h2>
<!-- 2、选择多个 -->
<select name="bcd" multiple v-model="fruits">
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="榴莲">榴莲</option>
<option value="葡萄">葡萄</option>
</select>
<h2>您选择的水果是:{{fruits}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "小朋友，你是否有很多问号",
fruit: "苹果",
fruits: [],
},
});
</script>
</body>
</html>
7.5、v-model修饰符的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 1、修饰符：lazy -->
<!-- 用户输入之后才会显示相应的数据 -->
<input type="text" v-model.lazy="message" />
<h2>{{message}}</h2>
<!-- 2、修饰符：number -->
<input type="number" v-model.number="age" />
<h2>{{age}}-{{typeof age}}</h2>
<!-- 3、修饰符：trim -->
<!-- 取出字符串收尾空格 -->
<input type="text" v-model.trim="name" />
<h2>您输入的名字是:{{name}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "小朋友，你是否有很多问号",
age: 0,
name: "",
},
});
</script>
</body>
</html>
效果图
789
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
