vue3入门2-CSDN博客

本文链接：https://blog.csdn.net/Chrisduan/article/details/146208832

图片轮播案例

先试用差值运算符锁定.jpg文件的昵称，运用vue3入门1的知识，使用动态属性的绑定v-bind（简写为：），可实现不同图片的显现。

加上各点击事件触发的函数，

即实现图片的自由轮换

记事本案例

<body>
    <div id="app">
        <input type="text" @keyup.enter="add()" v-model="data.content">

        <!-- <button @click="add">添加</button> <hr> -->

        <ul>
            <li v-for="(value, index) in data.list">
                {{ value }} <button @click="del(index)">删除</button>
            </li>
        </ul>

        <p>记录数: {{ data.list.length }} </p>

        <button @click="clear">清空</button>
    </div>

    <script type="module">
        import { createApp, reactive } from './vue.esm-browser.js'

        createApp({
            setup() {
                const data = reactive({
                    content: "",
                    list: ["Chri5", "ai.com"],
                })

                //添加
                const add = () => {
                    data.list.push(data.content) //push 向数组末尾添加一个或多个元素
                    data.content = "" //清空文本框
                }

                //删除
                const del = (index) => {
                    data.list.splice(index, 1) //splice(要删除元素的索引位置, 要删除的元素数量)
                }

                //清空
                const clear = () => {
                    data.list = []
                }

                return {
                    data,
                    add,
                    del,
                    clear
                }
            }
        }).mount("#app")
    </script>
</body>

通过之前学过的v-for，v-model，等知识实现记事本准确的增删

购物车案例

<div id="app">
        <table>
            <thead>
                <tr>
                    <!-- <td><input type="checkbox" v-model="data.selected" @change="selectAll" /></td> -->
                    <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">
                    <!-- 
                    <td><input type="checkbox" v-model="data.checkboxList" :value="value" @change="checkSelect" /></td> 
                    -->
                    <td><input type="checkbox" v-model="data.checkboxList" :value="value" /></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> -->
                    <td>总价 {{ totalPrice }}</td>
                </tr>
            </tfoot>
        </table>
    </div>

根据如上HTML写出购物车的框架，

接下来实现内部的函数，首先用list记录购物车里的商品，再用一个checkbox记录在购物车里且被选中的商品。selected用来记录全选和非全选状态，当其为true时，为全选状态；为false时，为非全选状态。

删除函数：

计算总价函数：

定义全选或不全选的函数，针对第一行第一个checkbox：

监听 data.checkboxList，针对第二行开始到结尾的第一个选项checkbox：

reduce函数

这里详细说明一下reduce的用法，其工作原理为：reduce 方法会遍历数组中的每个元素，并对每个元素调用 callback 函数。callback 函数的返回值将作为下一次调用的 accumulator 值。最终，reduce 方法返回最后一次调用 callback 函数的返回值。

array.reduce(callback, initialValue);

callback：一个函数，用于对数组中的每个元素进行处理。它接收四个参数：
- accumulator：累积值，即上一次调用 callback 时返回的值。
- currentValue：当前元素的值。
- currentIndex：当前元素的索引（可选）。
- array：调用 reduce 的数组（可选）。
initialValue：累积值的初始值。如果提供了 initialValue，accumulator 的初始值将设置为 initialValue，且从数组的第一个元素开始遍历；如果没有提供 initialValue，accumulator 的初始值将设置为数组的第一个元素，且从数组的第二个元素开始遍历。

举个例：求和

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((accumulator, currentValue) => {
    return accumulator + currentValue;
}, 0);

console.log(sum); // 输出：15

这里的（accumulator，currentValue）=>{}即为上文的callback函数，{}内即为函数callback函数的实现方法；0即为参数initiaValue；

也可实现求累积

const numbers = [1, 2, 3, 4, 5];

const product = numbers.reduce((accumulator, currentValue) => {
    return accumulator * currentValue;
}, 1);

console.log(product); // 输出：120

另外这种写法有两种，一种是正常的写，

1.const sum = numbers.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}, 0);

2.const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

在 JavaScript 中，如果箭头函数的函数体只包含一个表达式，那么可以省略花括号 {}，并且 return 是隐式的。这种写法被称为**“简洁体”或“一行体”。

以上教程均跟着b站up主邓瑞编程一步一步学的，大家可以去看，非常宝藏的up主！！也可以关注关注他自己的编程网站，dengruicode.com

这里仅仅作为一个我的学习笔记的记录。