三个小时学完vue3 —— 简单案例（二）
三个小时学完vue3（二）
图片轮播案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h3>{{ number }}</h3>
<img :src=`./imgs/${number}.jpg` style="width: 300px;"> <hr>
<button @click="prev">上一张</button>
<button @click="next">下一张</button>
<hr>
<ul>
<li v-for="value in 3">
<a href="#" @click="jump(value)">{{ value }}</a>
</li>
</ul>
</div>
<script type="module">
import { createApp, reactive, ref } from './vue.esm-browser.js'
createApp({
setup() {
const number = ref(1)
const prev = () => {
number.value--
if (number.value == 0) {
number.value = 3
}
}
const next = () => {
number.value++
if (number.value == 4) {
number.value = 1
}
}
// 跳转
const jump = (value) => {
number.value = value
}
return {
number,
next,
prev,
jump
}
}
}).mount("#app")
</script>
</body>
</html>
记事本案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="data.content">
<button @click="add">添加</button>
<ul>
<li v-for="(value, index) in data.list">
{{ value }}:
<button @click="del(index)">删除</button>
</li>
</ul>
<!-- 记事本长度 -->
{{ data.list.length }}
<!-- 清空记事本 -->
<button @click="clear">清空</button>
</div>
<script type="module">
import { createApp, reactive } from "./vue.esm-browser.js"
createApp({
setup() {
const data = reactive({
content: 'www.zz.com',
list: ['zz学习', 'zz.cm']
})
const add = () => {
data.list.push(data.content)
console.log(data.list)
}
const del = (index) => {
data.list.splice(index, 1)
}
const clear = (index) => {
data.list = []
}
return {
data,
add,
del,
clear
}
}
}).mount("#app")
</script>
</body>
</html>
购物车案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
width: 600px;
color: #8f8e8e;
text-align: center;
border-collapse: collapse;
}
table thead {
background: #F5F5F5;
}
table tr {
height: 30px;
line-height: 30px;
border: 1px solid #ececec;
}
</style>
</head>
<body>
<div id="app">
<table>
<thead>
<tr>
<td><input type="checkbox" v-model="data.selected" @change="selectAll"></td>
<td>商品</td>
<td>单价</td>
<td>库存</td>
<td colspan="2">操作</td>
</tr>
</thead>
<tbody>
<tr v-for="(value, index) in data.list">
<!-- :value是当前对象数据，取消勾选就会从v-model绑定的数组中剔除 -->
<td>
<input
type="checkbox"
:value="value"
v-model="data.checkboxList"
@change="checkSelect"
>
</td>
<td>{{ value.name }}</td>
<td>{{ value.price }}</td>
<td>{{ value.stock }}</td>
<td>
<button @click="sub(value)">-</button>
{{ value.number }}
<button @click="add(value)">+</button>
</td>
<td><button @click="del(index, value.id)">删除</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总价: {{ totalPrice() }}</td>
</tr>
</tfoot>
</table>
</div>
<script type="module">
import { createApp, reactive } from './vue.esm-browser.js'
createApp({
setup() {
const data = reactive({
// 为true是全选；false为取消全选
selected: false,
// 存储选中的商品
checkboxList: [],
list: [
{
id: 1,
name: '铅笔',
price: 10,
number: 1,
stock: 3
},
{
id: 2,
name: '橡皮',
price: 5,
number: 2,
stock: 5
},
{
id: 3,
name: '钢笔',
price: 50,
number: 1,
stock: 6
},
]
})
const selectAll = () => {
console.log(data.selected)
if (data.selected) {
data.checkboxList = data.list
}
else {
data.checkboxList = []
}
console.log(data.checkboxList)
}
const checkSelect = () => {
if (data.checkboxList.length == data.list.length && data.list.length != 0) {
data.selected = true
} else {
data.selected = false
}
}
// 总价格
const totalPrice = () => {
let total = 0
for(let i = 0; i < data.checkboxList.length; i++) {
total += data.checkboxList[i].price * data.checkboxList[i].number
}
return total
}
const sub = (value) => {
value.number--
if(value.number <= 1) {
value.number = 1
}
}
const add = (value) => {
value.number++
if(value.number >= value.stock) {
value.number = value.stock
}
}
const del = (index, id) => {
data.list.splice(index, 1)
let newArr = data.checkboxList.filter((value, index) => {
// 要删除的被过滤掉了
return value.id != id
})
data.checkboxList = newArr
// 需要再次查看选中状态
checkSelect()
}
return {
data,
selectAll,
checkSelect,
totalPrice,
sub,
add,
del
}
}
}).mount("#app")
</script>
</body>
</html>
购物车优化案例
使用watch、computed进行优化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
width: 600px;
color: #8f8e8e;
text-align: center;
border-collapse: collapse;
}
table thead {
background: #F5F5F5;
}
table tr {
height: 30px;
line-height: 30px;
border: 1px solid #ececec;
}
</style>
</head>
<body>
<div id="app">
<table>
<thead>
<tr>
<td><input type="checkbox" v-model="data.selected"></td>
<td>商品</td>
<td>单价</td>
<td>库存</td>
<td colspan="2">操作</td>
</tr>
</thead>
<tbody>
<tr v-for="(value, index) in data.list">
<!-- :value是当前对象数据，取消勾选就会从v-model绑定的数组中剔除 -->
<td>
<input
type="checkbox"
:value="value"
v-model="data.checkboxList"
>
</td>
<td>{{ value.name }}</td>
<td>{{ value.price }}</td>
<td>{{ value.stock }}</td>
<td>
<button @click="sub(value)">-</button>
{{ value.number }}
<button @click="add(value)">+</button>
</td>
<td><button @click="del(index, value.id)">删除</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总价: {{ totalPrice }}</td>
</tr>
</tfoot>
</table>
</div>
<script type="module">
import { createApp, reactive, watch, computed } from './vue.esm-browser.js'
createApp({
setup() {
const data = reactive({
// 为true是全选；false为取消全选
selected: false,
// 存储选中的商品
checkboxList: [],
list: [
{
id: 1,
name: '铅笔',
price: 10,
number: 1,
stock: 3
},
{
id: 2,
name: '橡皮',
price: 5,
number: 2,
stock: 5
},
{
id: 3,
name: '钢笔',
price: 50,
number: 1,
stock: 6
},
]
})
const sub = (value) => {
value.number--
if(value.number <= 1) {
value.number = 1
}
}
const add = (value) => {
value.number++
if(value.number >= value.stock) {
value.number = value.stock
}
}
const del = (index, id) => {
data.list.splice(index, 1)
let newArr = data.checkboxList.filter((value, index) => {
// 要删除的被过滤掉了
return value.id != id
})
data.checkboxList = newArr
}
let flag = true
watch(() => data.selected, (newValue, oldValue) => {
// console.log("newValue:", newValue, "oldValue: ", oldValue)
if (newValue) {
data.checkboxList = data.list
} else {
if (flag) {
data.checkboxList = []
}
}
})
watch(() => data.checkboxList, (newValue, oldValue) => {
// console.log("newValue:", newValue, "oldValue: ", oldValue)
if (newValue.length == data.list.length && data.list.length != 0) {
data.selected = true
flag = true
} else {
data.selected = false
flag = false
}
})
// 总价格
const totalPrice = computed(() => {
/**
reduce定义:用干对数组中的所有元素进行迭代操作，并将每次操作的结果累加到一个初始值上
reduce接收两个参数:一个是累加器函数，另一个是初始值
reduce:将 data.checkboxList 数组中的每个 checkbox 对象的 price 和 number 属性进行相乘,
并将结果累加到初始值 0 上，最后返回累加的结果
tota1(累加器)用干存储每次计算的结果，初始值为0
item(当前元素)在每次迭代过程中，当前元素的值会被传递给回调函数
*/
return data.checkboxList.reduce((total, item) => total + item.price * item.number, 0)
})
return {
data,
totalPrice,
sub,
add,
del
}
}
}).mount("#app")
</script>
</body>
</html>
使用Axios实现文章搜索案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="axios.min.js"></script>
</head>
<body>
<div id="app">
<select v-model="data.type">
<option value="0">请选择</option>
<option value="1">ID</option>
<option value="2">标题</option>
</select>
<input type="text" v-model="data.content">
<button @click="search">搜索</button>
<br>
<ul>
<li v-for="(item, index) in data.list">
{{ item }}
</li>
</ul>
</div>
<script type="module">
import {createApp, reactive} from './vue.esm-browser.js'
createApp({
setup() {
const data = reactive({
type: '0', // 搜索类型
content: "", // 搜索内容
list: []
})
// 搜索
const search = () => {
data.list = []
console.log("搜索类型：", data.type, "搜索内容：", data.content)
if (data.type == '1') {
let id = data.content
// get请求
axios.get(`http://127.0.0.1/article/get/id/${id}`).then(response => {
console.log('get.data', response.data)
if (response.data.status == "success") {
if (response.data.data) {
data.list.push(response.data.data)
}
}
}).catch(error => {
console.log("get.error", error)
}).finally(() => {
console.log('get.finally')
})
} else if (data.type == '2') {
let param = {
title: data.content
}
// post请求
axios.post(`http://127.0.0.1/article/postJson/search`, param).then(response => {
console.log('get.data', response.data)
if (response.data.status == "success") {
for(let i = 0; i < response.data.data.length; i++) {
data.list.push(response.data.data[i])
// push: 向数组末尾添加一个或多个元素
}
}
}).catch(error => {
console.log("get.error", error)
}).finally(() => {
console.log('get.finally')
})
}
}
return {
data,
search
}
}
}).mount("#app")
</script>
</body>
</html>
up主讲的太好啦！多练多练！！