导言
一、v-on指令:01-事件监听
1. 01-v-on的基本使用.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-v-on的基本使用</title>
</head>
<body>
<div id="app">
<h2>{
{counter}}</h2>
<!--<h2 v-bind:title></h2>-->
<!--<h2 :title></h2>-->
<h1>第一种写法：直接写操作</h1>
<button v-on:click="counter++">+</button>
<button v-on:click="counter--;">-</button>
<h1>第二种写法：方法名</h1>
<button v-on:click="increment">+</button>
<button v-on:click="decrement">-</button>
<h1>第三种写法：语法糖 类似于 v-bind 等价于 :(冒号)</h1>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
<script src="../../lib/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
// es5 写法
increment: function() {
this.counter++
},
// es6 增强写法
decrement: function() {
this.counter--
}
}
})
</script>
</body>
</html>
2. 02-v-on的参数问题.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-v-on的参数问题</title>
</head>
<body>
<div id="app">
<h1>1.事件调用的方法没有参数(小括号可有可无)</h1>
<button @click="btn1Click()">按钮1</button>
<button @click="btn1Click">按钮1</button><br/>
<!--2.在事件定义时, 写方法时省略了小括号, 但是方法本身是需要一个参数的,
这个时候, Vue会默认将浏览器生产的event事件对象作为参数传入到方法-->
<h1>2.在事件定义时, 写方法时省略了小括号, 但是方法本身是需要一个参数的,这个时候, Vue会默认将浏览器生产的event事件对象作为参数传入到方法</h1>
<button @click="btn2Click(123)">按钮2-1</button>
<button @click="btn2Click()">按钮2-2</button>
<button @click="btn2Click">按钮2-3</button><br>
<!--3.方法定义时, 我们需要event对象, 同时又需要其他参数-->
<!-- 在调用方式, 如何手动的获取到浏览器参数的event对象: $event-->
<h1>3.方法定义时, 我们需要event对象, 同时又需要其他参数, 在调用方式, 如何手动的获取到浏览器参数的event对象: $event</h1>
<button @click="btn3Click(abc, $event)">按钮3</button>
</div>
<script src="../../lib/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
abc: 123
},
methods: {
btn1Click() {
console.log("btn1Click");
},
btn2Click(event) {
console.log('--------', event);
},
btn3Click(abc, event) {
console.log('++++++++', abc, event);
}
}
})
// 如果函数需要参数,但是没有传入, 那么函数的形参为undefined
// function abc(name) {
// console.log(name);
// }
//
// abc()
</script>
</body>
</html>
3. 03-v-on的修饰符.html
冒泡事件：外面的事件 触发 内层的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-on的修饰符</title>
</head>
<body>
<div id="app">
<!--冒泡事件：外面的事件 触发 内层的事件-->
<h1>1. .stop修饰符的使用: 阻止冒泡事件</h1>
<div @click="divClick">
aaaaaaa
<button @click.stop="btnClick">按钮</button>
</div>
<h1>2. .prevent 修饰符的使用：阻止默认事件</h1>
<br>
<form action="baidu">
<input type="submit" value="提交" @click.prevent="submitClick">
</form>
<h1>3. .监听某个键盘的键帽</h1>
<!--keyup： 监听所有按键
enter： 监听 enter 按键的使用-->
<input type="text" @keyup.enter="keyUp"><br>
<h1>4. .once修饰符的使用:只让第一次点击有效，以后再点无效</h1>
<button @click.once="btn2Click">按钮2</button>
</div>
<script src="../../lib/vue.js"></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>
二、v-if和v-else：02-条件判断
1. 01-v-if的使用.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-v-if的使用</title>
</head>
<body>
<div id="app">
<h2 v-if="isShow">
<div>abc</div>
<div>abc</div>
<div>abc</div>
<div>abc</div>
<div>abc</div>
{
{message}}
</h2>
</div>
<script src="../../lib/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
isShow: true
}
})
</script>
</body>
</html>
2. 02-v-if和v-else的使用.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-v-if和v-else的使用</title>
</head>
<body>
<div id="app">
<h2 v-if="isShow">
<div>abc</div>
<div>abc</div>
<div>abc</div>
<div>abc</div>
<div>abc</div>
{
{message}}
</h2>
<!-- <h1 v-else>isShow为false时, 显示我</h1> -->
<button v-else @click="isShow = !isShow">isShow为false时, 显示我,点击我就没啦</button>
</div>
<script src="../../lib/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
isShow: false
}
})
</script>
</body>
</html>
3. 03-v-if和v-else-if和v-else的使用.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-v-if和v-else-if和v-else的使用</title>
</head>
<body>
<div id="app">
<h2 v-if="score>=90">优秀</h2>
<h2 v-else-if="score>=80">良好</h2>
<h2 v-else-if="score>=60">及格</h2>
<h2 v-else>不及格</h2>
<h1>{
{result}}</h1>
</div>
<script src="../../lib/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
score: 99
},
computed: {
result() {
let showMessage = '';
if (this.score >= 90) {
showMessage = '优秀'
} else if (this.score >= 80) {
showMessage = '良好'
}
// ...
return showMessage
}
}
})
</script>
</body>
</html>
4. 04-用户登录切换的案例.html
- 存在的问题：
如果我们在有输入内容的情况下，切换了类型，我们会发现文字依然显示之前的输入的内容。
但是按道理讲，我们应该切换到另外一个input元素中了。
在另一个input元素中，我们并没有输入内容。
为什么会出现这个问题呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-用户登录切换的案例</title>
</head>
<body>
<!--
出现的问题：
如果我们在有输入内容的情况下，切换了类型，我们会发现文字依然显示之前的输入的内容。
但是按道理讲，我们应该切换到另外一个input元素中了。
在另一个input元素中，我们并没有输入内容。
为什么会出现这个问题呢？
-->
<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="../../lib/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
isUser: true
}
})
</script>
</body>
</html>
5. 05-用户登录切换的案例(小问题).html（解决上一节问题）
问题解释：
这是**因为Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素**。
在上面的案例中，Vue内部会发现原来的input元素不再使用，直接作为else中的input来使用了。解决方案：
如果我们不希望Vue出现类似重复利用的问题，可以给对应的input添加key
并且我们需要保证key的不同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05-用户登录切换的案例(小问题)</title>
</head>
<body>
<!--
问题解释：
这是因为Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。
在上面的案例中，Vue内部会发现原来的input元素不再使用，直接作为else中的input来使用了。
解决方案：
如果我们不希望Vue出现类似重复利用的问题，可以给对应的input添加key
并且我们需要保证key的不同
-->
<div id="app">
<span v-if="isUser">
<label for="username">用户账号</label>
<input type="text" id="username" placeholder="用户账号" key="username">
</span>
<span v-else>
<label for="email">用户邮箱</label>
<input type="text" id="email" placeholder="用户邮箱" key="email">
</span>
<button @click="isUser = !isUser">切换类型</button>
</div>
<script src="../../lib/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
isUser: true
}
})
</script>
</body>
</html>
6. 06-v-show的使用.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06-v-show的使用</title>
</head>
<body>
<div id="app">
<h1>v-if: 当条件为false时, 包含v-if指令的元素, 根本就不会存在dom中</h1>
<h2 v-if="isShow" id="aaa">{
{message}}</h2>
<h1>v-show: 当条件为false时, v-show只是给我们的元素添加一个行内样式: display: none</h1>
<h2 v-show="isShow" id="bbb">{
{message}}</h2>
</div>
<script src="../../lib/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
isShow: true
}
})
</script>
</body>
</html>
三、03-循环遍历
1. 01-v-for遍历数组.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-v-for遍历数组</title>
</head>
<body>
<div id="app">
<!--1.在遍历的过程中,没有使用索引值(下标值)-->
<h1>1.在遍历的过程中,没有使用索引值(下标值)</h1>
<ul>
<li v-for="item in names">{
{item}}</li>
</ul>
<!--2.在遍历的过程中, 获取索引值-->
<h2>2.在遍历的过程中, 获取索引值</h2>
<ul>
<li v-for="(item, index) in names">
{
{index+1}}.{
{item}}
</li>
</ul>
</div>
<script src="../../lib/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
names: ['why', 'kobe', 'james', 'curry']
}
})
</script>
</body>
</html>
2. 02-v-for遍历对象.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-v-for遍历对象</title>
</head>
<body>
<div id="app">
<!--0.直接点出来属性-->
<h1>0.直接点出来属性</h1>
<ul>
<li >{
{info.name}}</li>
<li >{
{info.age}}</li>
<li >{
{info.height}}</li>
</ul>
<!--1.在遍历对象的过程中, 如果只是获取一个值, 那么获取到的是value-->
<h1>1.在遍历对象的过程中, 如果只是获取一个值, 那么获取到的是value</h1>
<ul>
<li v-for="item in info">{
{item}}</li>
</ul>
<!--2.获取key和value 格式: (value, key) -->
<h1>2.获取key和value 格式: (value, key)</h1>
<ul>
<li v-for="(value, key) in info">{
{value}}-{
{key}}</li>
</ul>
<!--3.获取key和value和index 格式: (value, key, index) -->
<h1>3.获取key和value和index 格式: (value, key, index)</h1>
<ul>
<li v-for="(value, key, index) in info">{
{value}}-{
{key}}-{
{index}}</li>
</ul>
</div>
<script src="../../lib/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
info: {
name: 'feng',
age: 18,
height: 1.88
}
}
})
</script>
</body>
</html>
3. 03-v-for使用过程添加key.html
input 表单中也可以加key，是为了怕复用
也是二.4和二.5的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-v-for使用过程添加key</title>
</head>
<body>
<!-- input 表单中也可以加key，是为了怕复用-->
<div id="app">
<ul>
<li v-for="item in letters" :key="item">{
{item}}</li>
</ul>
</div>
<script src="../../lib/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
letters: ['A', 'B', 'C', 'D', 'E']
}
})
</script>
</body>
</html>
4. 04-哪些数组的方法是响应式的.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-哪些数组的方法是响应式的</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in letters">{
{item}}</li>
</ul>
<button @click="btnClick">按钮</button>
</div>
<script src="../../lib/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
letters: ['a', 'b', 'c', 'd']
},
methods: {
btnClick() {
/*
* push(), pop(), shift(), unshift(), splic(), sort(), reverse()
* 以上都是响应式的 方法
* Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新。
* Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新。
* */
/*
* 1.push方法
* */
// this.letters.push('aaa')
// this.letters.push('aaaa', 'bbbb', 'cccc')
/*
* 2.pop(): 删除数组中的最后一个元素
* */
// this.letters.pop();
/*
* 3.shift(): 删除数组中的第一个元素
* */
// this.letters.shift();
/*
* 4.unshift(): 在数组最前面添加元素
* */
// this.letters.unshift()
// this.letters.unshift('aaa', 'bbb', 'ccc')
/*
* 5.splice作用: 删除元素/插入元素/替换元素
*
* 删除元素: 第二个参数传入你要删除几个元素(如果没有传,就删除后面所有的元素)
* splice(1, num) 从第 1 个开始，删除num个数
* splice(1) 删除 第1个以后的所有元素
* 替换元素: 第二个参数, 表示我们要替换几个元素, 后面是用于替换前面的元素
* splice(start, num, 。。。)：从第start个开始，后面的 num 个元素，都被后面的参数都代替
* 插入元素: 第二个参数, 传入0, 并且后面跟上要插入的元素
* */
// splice(start): // 删除
this.letters.splice(1, 3, 'm', 'n', 'l', 'x') // 替换
// this.letters.splice(1, 0, 'x', 'y', 'z') // 添加
/*
* 5.sort()
* */
// this.letters.sort()
/*
* 6.reverse()
* */
// this.letters.reverse()
// 注意: 通过索引值修改数组中的元素
// this.letters[0] = 'bbbbbb';
// this.letters.splice(0, 1, 'bbbbbb')
// set(要修改的对象, 索引值, 修改后的值)
// Vue.set(this.letters, 0, 'bbbbbb')
}
}
})
/*
* ...num：可变参数，数组类型
* */
function sum(...num) {
console.log(num);
}
sum(20, 30, 40, 50, 601, 111, 122, 33)
</script>
</body>
</html>
5. 05-作业的回顾和完成.html（同上一章：三.4）
点谁，谁变红。
和上一章中的三.4是一样的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05-作业的回顾和完成</title>
<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)">
{
{index}}.{
{item}}
</li>
<!--<li :class="{active: 0===currentIndex}"></li>-->
<!--<li :class="{active: 1===currentIndex}"></li>-->
<!--<li :class="{active: 2===currentIndex}"></li>-->
<!--<li :class="{active: 3===currentIndex}"></li>-->
</ul>
</div>
<script src="../../lib/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
movies: ['海王', '海贼王', '加勒比海盗', '海尔兄弟'],
currentIndex: 0
},
methods: {
liClick(index) {
this.currentIndex = index
}
}
})
</script>
</body>
</html>
四、04-书籍购物车案例
1. index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>书籍购物车案例</title>
<link rel="stylesheet" href="style.css">
</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)" :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 | showPrice}}</h2>
</div>
<h2 v-else>购物车为空</h2>
</div>
<script src="../../lib/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
2. main.js
const app = new Vue({
el: '#app',
data: {
books: [
{
id: 1,
name: '《算法导论》',
date: '2006-9',
price: 85.00,
count: 1
},
{
id: 2,
name: '《UNIX编程艺术》',
date: '2006-2',
price: 59.00,
count: 1
},
{
id: 3,
name: '《编程珠玑》',
date: '2008-10',
price: 39.00,
count: 1
},
{
id: 4,
name: '《代码大全》',
date: '2006-3',
price: 128.00,
count: 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
// for (let i in/of this.books)
// reduce
}
},
methods: {
decrement: function (index) {
this.books[index].count--;
},
increment(index) {
this.books[index].count++;
},
removeHandle(index) {
this.books.splice(index, 1)
}
},
filters: {
showPrice(price) {
return '¥' + price.toFixed(2)
}
}
})
3. style.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;
}
五、高阶函数.js
// filter / map/ reduce
const nums = [10, 20, 30, 40, 50, 60, 70, 80, 90]
let n =nums.filter(function (n) {
return n < 100;
}).map(function (n) {
return n*2;
}).reduce(function (preValue, n) {
return preValue+n;
});
console.log(n);
let m = nums.filter(n=>n<100).map(n=>n*2).reduce((preValue, n)=>preValue+n);
console.log(m);
/*
* 需求1：取出所有小于100的数组
* */
// 解决方法1
let newNums = []
for (let i of nums){
if (i<100){
newNums.push(i)
}
}
console.log(newNums);
// 解决方法2
let newNums1 = nums.filter(function (n) {
return n<100;
})
console.log(newNums1);
/*
* 需求2：将所有小于100的数字进行转化：全部 * 2
* */
let new2Nums = []
for (let i of newNums){
new2Nums.push(i*2)
}
console.log(new2Nums);
let new2Nums1 = newNums.map(function (n) {
return n*2;
})
console.log(new2Nums1);
/*
* 需求3：将所有的 new2nums 数字相加，得到最终的结果
* */
let total=0
for (let n of new2Nums){
total+=n
}
console.log(total);
let total1 = new2Nums.reduce(function (preValue, book) {
return preValue+ book
}, 0)
console.log(total1);
