文章目录
一、事件监听
v-on 事件监听
v-on 修饰符
-
.stop调用event.stopPropagation() ; 当在一个div中有两个以上的点击事件时,当点击元素下面的某个事件时,div元素上的点击事件总会被执行,当添加.stop修饰符时,就会阻止这样的事情发生.具体效果如图:
添加.stop之后: -
.prevent: 调用event.preventDefault() 阻止默认事件
如当在form表单中,设置submit提交按钮时,有时我们不希望form表单被自动提交,就可以使用.prevent 阻止默认事件,如下图 -
.{keyCode | keyAlias}只有当事件是从特定键触发时才会触发事件,比如当我们敲击键盘上的回车键Enter时,才会触发事件,如图所示: -
.once只触发一次回调事件
二、条件判断
Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件
v-if、v-else-if、v-else
这三个指令与javaScript条件语句if、else、if类似
<div id="app">
<h2 v-if="isShow">{{message}}</h2>
<h2 v-else="isShow">{{name}}</h2>
</div>
<script src="../js/vue.js" ></script>
<script>
const app = new Vue({
el: '#app', // 用于挂载要管理的元素
data: { // 定义数据
message: 'Hello Vue',
name: 'Hello World',
isShow: true
}
})
</script>
条件渲染案例
需求: 当用户在登录的时候,可以切换使用用户账号登录还是邮箱地址登录
<div id="app">
<span v-if="isUser">
<label for="username">用户账号</label>
<input id="username" placeholder="用户账号" key="username">
</span>
<!-- 当key值不一致时,切换两个登录类型时,原先输入的内容会被清空,默认key是一致的,也就是说
之前输入的内容再进行切换类型,原内容是不被清空的-->
<span v-else>
<label for="email">用户邮箱</label>
<input id="email" placeholder="用户邮箱" key="email">
</span>
<button @click="isUser = !isUser">切换类型</button>
</div>
<script src="../js/vue.js" ></script>
<script>
const app = new Vue({
el: '#app', // 用于挂载要管理的元素
data: { // 定义数据
message: 'Hello Vue',
isUser: true
}
})
</script>
v-show
用于决定一个元素是否渲染
v-if 和 v-show 对比
两者都是可以决定一个元素是否渲染,
- 当v-if当条件为false时,压根不会有对应的元素在DOM中,
- v-show当条件为false时,仅仅是将元素的display 属性设置为none 而已
开发中如何选择?
- 当需要在显示与隐藏之间很频繁时,使用v-show
- 当只有一次切换时,通过使用v-if
v-for
遍历数组
1.在遍历的过程中,没有使用索引值(下标值)
<ul>
<li v-for="item in names">{{item}}</li>
</ul>
2.在遍历的过程中获取索引值(下标值)
<ul>
<li v-for="(item index) in names">{{index}}.{{item}}</li>
</ul>
遍历对象
<div id="app">
<ul>
<!-- 1.在遍历的时候,如果只是获取一个值,那么取到的是value -->
<li v-for="item in info">{{item}}</li>
</ul>
<ul>
<!-- 2.在遍历的时候,如果获取key和value,格式:(value,key) -->
<li v-for="(value,key) in info">{{key}}:{{value}}</li>
</ul>
</div>
<script src="../js/vue.js" ></script>
<script>
const app = new Vue({
el: '#app', // 用于挂载要管理的元素
data: { // 定义数据
info: {
name: '李小龙',
age: 18,
height: 18.8
}
}
})
</script>
<!-- :key的作用是为了当数组插入元素的时候更高效 -->
<li v-for="item in info" :key="item">{{item}}</li>
数组中哪些方法时响应式
1.push(" “) 从最后一位开始添加值 push(”","","")
2.pop(); 删除数组中的最后一个元素
3.shift(); 删除数组中的第一个元素
4.unshift(" ") ; 在数组最前面添加元素
5.splice() ; 作用: 删除元素/插入元素/替换元素
-
删除元素: 第二个参数传入的是你要删除的个数,不传第二个参数是要从起始值start到末尾都要删除
-
替换元素:第二个参数传入的值,表示要替换几个元素的个数,后面就要跟几个要替换的元素
-
插入元素:第二个参数传入0,后面就要跟几个要插入的元素
6.sort(); 排序
7.reverse() 数据顺序反转
8.Vue.set(要修改的对象,索引值,修改后的值); 替换元素
高级函数
filter/map/reduce
当使用上述高级函数时,数组的长度决定了遍历的次数
filter 函数的使用
filter中的回调函数有一个要求,必须返回一个boolean值:
当返回true时,函数内部会自动将这次回调的n加入到新的数组中;
当返回false时,函数内部会过滤掉这次的n值
例如:需求 要求数组nums中小于100的数添加到新的数组中
const nums = [10,20,199,82,381,320,5];
// 1.filter 函数的使用
let newNums = nums.filter(function (n) {
return n <100
})
console.log("filter过滤小于100的值",newNums);
map的使用
需求2: 把上述新的数组中的数字都增加2倍
// 2. map 函数的使用
let new2Nums = newNums.map(function (n) {
return n * 2
})
console.log("map增加2倍",new2Nums); // 20, 40, 164, 10
reduce的使用
reduce 函数的使用 作用:对数组中的所有内容进行汇总
需求3: 要求对新数组进行汇总
// 3. reduce 函数的使用 作用:对数组中的所有内容进行汇总
let total = new2Nums.reduce(function (preValue,n) {
return preValue + n
},0) // 0 为初始值
console.log("reduce进行汇总",total); // 234
// reduce过程 分析:
// 第一次遍历: preValue: 0 , n: 20
// 第二次遍历: preValue: 20 , n: 40
// 第三次遍历: preValue: 60 , n: 164
// 第四次遍历: preValue: 224 , n: 10
综合使用:
let amount = nums.filter(n => n < 100).map(n => n * 2).reduce((pre,n) => pre + n);
console.log("总汇",amount);
购物车案例:
需求: 把订单在购物车上展示,功能: 当点击- 按钮时,订单数量响应的减少,同时总价格也响应的变化,当数量为1时,按钮变成灰色,拒绝点击;当点击+时,数量相应的增加,同时总价格也响应的变化;当点击移出时,对应的行移出,当购物车订单数量为0时,当前页面展示的只有"购物车空空如也"这几个字;
页面效果如图:
具体代码如下:
主页代码:
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="app">
<div v-if="books.length">
<table>
<tr>
<th></th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in books">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<!-- <td>{{item.price | 过滤器}}</td>-->
<td>{{item.price | showPrice}}</td>
<td>
<button @click="subCount(index)" :disabled="item.count <= 1">-</button>
{{item.count}}
<button @click="addCount(index)">+</button>
</td>
<td>
<button @click="removeHandle(index)">操作</button>
</td>
</tr>
</table>
<h2>总价格:{{totalPrice | showPrice}}</h2>
</div>
<div v-else>购物车为空</div>
</div>
<script src="../js/vue.js"></script>
<script src="index.js"></script>
</body>
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-9',
price: 39.00,
count: 1
},
{
id: 4,
name: '《代码大全》',
date: '2006-6',
price: 128.00,
count: 1
},
]
},
methods: {
subCount(index) {
return this.books[index].count--
},
addCount(index) {
return 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
// }
// for (const i in this.books) {
// totalPrice += this.books[i].price * this.books[i].count
// }
// for (const book of this.books) {
// totalPrice += book.price * book.count
// }
// return totalPrice
// reduce 汇总
return this.books.reduce(function (pre, book) {
return pre + book.price * book.count
},0)
}
},
filters: {
// 过滤器并保留2位小数
showPrice(price) {
return '￥' + price.toFixed(2)
}
}
})
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;
}