Vue3快速入门

资料

邓睿编程
【2024最新版】3小时学会Vue3，小白零基础视频教程，web前端快速入门实战课程
Vue3快速入门2 -案例篇
Vue.js - 渐进式 JavaScript 框架

Vue3快速入门

1.创建一个 vue 应用程序

"渐进式"是指可以按需引入Vue.js的部分功能, 而不必全量引入整个框架

html
<div id="app">
    {{ msg }}

    <h2>{{ web.title }}h2>
    <h3>{{ web.url }}h3>
div>


js
/*
    <div id="app">div> 指定一个 id 为 app 的 div 元素
    
    {{ }} 插值表达式, 可以将 Vue 实例中定义的数据在视图中进行渲染
    如: Vue 实例中定义一个 msg 变量, 值为 "Hello world", 在模板中若使用插值表达式 {{ msg }} 则会被渲染成 "Hello world"

    响应式数据是指当数据发生变化时, 模板中依赖于该数据的部分会自动更新
*/

/*
    //创建一个 Vue 应用程序
    Vue.createApp({
        //Composition API(组合式 API) 的 setup选项 用于设置响应式数据和方法等
        setup() {
            //Composition API 的 reactive()函数 用于创建响应式数据
            const web = Vue.reactive({ //Vue.reactive 创建一个响应式数据对象 web, 其中包含 title 和 url 属性
                title: "邓瑞编程",
                url: "dengruicode.com"
            })

            //返回数据
            return {
                msg: "success",
                web
            }
        }
    }).mount("#app") //将 Vue 应用程序挂载(mount) 到 app 元素上
*/

//将 Vue 对象中的 createApp、reactive 属性赋值给 createApp、reactive 变量
const { createApp, reactive } = Vue //解构赋值语法

createApp({
    setup() {
        const web = reactive({
            title: "邓瑞编程",
            url: "dengruicode.com"
        })

        return {
            msg: "success",
            web
        }
    }
}).mount("#app")

2.模块化开发

html
<div id="app">
    {{ msg }}

    <h2>{{ web.title }}h2>
    <h3>{{ web.url }}h3>
div>
js
<script type="module">
    import { createApp, reactive } from './vue.esm-browser.js'
    
    createApp({
        setup() {
            const web = reactive({
                title: "邓瑞编程",
                url: "dengruicode.com"
            })

            return {
                msg:"success",
                web
            }
        }
    }).mount("#app")
script>


VSCode 扩展

       Live Server

3.ref和reactive

html
<div id="app">
    msg: {{ msg }}

    <h3>web.title: {{ web.title }}h3>
    <h3>web.url: {{ web.url }}h3>
    <h3>web.number: {{ number }}h3>
div>
js
<script type="module">
    import { createApp, ref, reactive } from './vue.esm-browser.js'
    
    createApp({
        setup() {
            const number = ref(10) //ref用于存储单个基本类型的数据, 如:数字、字符串等
            number.value = 20 //使用ref创建的响应式对象, 需要通过.value属性来访问和修改其值

            const web = reactive({ //用于存储复杂数据类型, 如:对象或数组等
                title: "邓瑞编程",
                url: "dengruicode.com"
            })
            web.url = "www.dengruicode.com" //使用reactive创建的响应式对象, 可以直接通过属性名来访问和修改值

            return {
                msg: "success",
                number,
                web
            }
        }
    }).mount("#app")
script>

4.绑定事件 v-on 简写@

html
<div id="app">
    <h3>{{ msg }}h3>
    <h3>{{ web.url }}h3>
    <h3>{{ web.user }}h3>
    <h3>{{ sub(100, 20) }}h3>

    
    <button v-on:click="edit">修改button> <br>

    
    <button @click="add(20, 30)">加法button> <br>

    
    回车 <input type="text" @keyup.enter="add(40, 60)"> <br>
    空格 <input type="text" @keyup.space="add(20, 30)"> <br>
    Tab <input type="text" @keydown.tab="add(10, 20)"> <br>
    w <input type="text" @keyup.w="add(5, 10)"> <br>

    
    Ctrl + Enter <input type="text" @keyup.ctrl.enter="add(40, 60)"> <br>
    Ctrl + A <input type="text" @keyup.ctrl.a="add(20, 30)">
div>
js
<script type="module">
    import { createApp, reactive } from './vue.esm-browser.js'
    
    createApp({
        setup() {
            const web = reactive({
                title: "邓瑞编程",
                url: "dengruicode.com",
                user: 0
            })

            const edit = () => {
                web.url = "www.dengruicode.com"
                //msg = "邓瑞编程" //错误示例 不能直接改变msg的值,因为msg是一个普通变量, 不是响应式数据
            }

            const add = (a, b) => {
                web.user += a + b
            }

            const sub = (a, b) => {
                return a - b
            }

            return {
                msg: "success", //普通变量, 非响应式数据, 在模板中普通变量不会自动更新
                web, //响应式数据
                edit, //方法
                add,
                sub,
            }
        }
    }).mount("#app")

script>

5.显示和隐藏 v-show

html
<div id="app">
    <h3>{{ web.show }}h3>
    <p v-show="web.show">邓瑞编程 dengruicode.comp>

    <button @click="toggle">点击切换显示状态button>
div>
js
<script type="module">
    import { createApp, reactive } from './vue.esm-browser.js'
    
    createApp({
        setup() {
            const web = reactive({
                show: true
            })

            const toggle = () => {
                web.show = !web.show
            }

            return {
                web,
                toggle
            }
        }
    }).mount("#app")

script>

6.条件渲染 v-if

html
<div id="app">
    <h3>{{ web.show }}h3>
    <p v-show="web.show">邓瑞编程p>
    <p v-if="web.show">dengruicode.comp>

    <button @click="toggle">点击切换显示状态button>

    <p v-if="web.user < 1000">新网站p>
    <p v-else-if="web.user >= 1000 && web.user < 10000">优秀网站p>
    <p v-else-if="web.user >= 10000 && web.user < 100000">资深网站p>
    <p v-else>超级网站p>
div>
js
<script type="module">
    /*
        v-show 通过 css display属性 来控制元素的显示或隐藏
        v-if 用于对元素进行条件渲染. 当条件为 true 时, 渲染该元素, 为 false 时, 则不渲染

        v-show 适用于频繁切换元素的显示状态, 因为只改变 display 属性, 不需要重新渲染整个组件
        v-if 适用于较少改变的场景, 因为频繁从 dom 中删除或添加元素, 会导致性能下降
    */
    import { createApp, reactive } from './vue.esm-browser.js'

    createApp({
        setup() {
            const web = reactive({
                show: true,
                user: 500
            })

            const toggle = () => {
                web.show = !web.show
            }

            return {
                web,
                toggle
            }
        }
    }).mount("#app")
script>

7.动态属性绑定 v-bind 简写：

html
<div id="app">
    
    <h3>value="dengruicode.com"h3>
    <input type="text" value="dengruicode.com">

    <h3>v-bind:value="web.url"h3>
    <input type="text" v-bind:value="web.url">

    <h3>简写 :value="web.url"h3>
    <input type="text" :value="web.url">

    
    <h3>src="windows.jpg"h3>
    <img src="windows.jpg">

    <h3>:src="web.img"h3>
    <img :src="web.img">

    
    <h3>class="textColor"h3>
    <b class="textColor">邓瑞编程b>

    <h3>:class="{textColor:web.fontStatus}"h3>
    <b :class="{textColor:web.fontStatus}">dengruicode.comb>
div>
js
<script type="module">
    import { createApp, reactive } from './vue.esm-browser.js'

    createApp({
        setup() {
            const web = reactive({
                url: "www.dengruicode.com",
                img: "windows.jpg",
                fontStatus: true
            })

            return {
                web
            }
        }
    }).mount("#app")
script>

8.遍历数组或对象 v-for

html
<div id="app">
    <ul>
        <li v-for="(value, index) in data.number">
            index=> {{ index }} : value=> {{ value }}
        li>
    ul>

    <ul>
        <li v-for="value in data.user">
            value=> {{ value }}
        li>
    ul>

    <ul>
        <li v-for="(value, key) in data.user">
            key=> {{ key }} : value=> {{ value }}
        li>
    ul>

    <ul>
        <li v-for="(value, key, index) in data.user">
            index=> {{ index }} : key=> {{ key }} : value=> {{ value }}
        li>
    ul>

    <ul>
        
        <template v-for="(value, key, index) in data.user">
            <li v-if="index == 1">
                index=> {{ index }} : key=> {{ key }} : value=> {{ value }}
            li>
        template>
    ul>

    <ul>
        
        <li v-for="(value, index) in data.teacher" :title="value.name" :key="value.id">
            index=> {{ index }} : value.id=>{{ value.id }} value.name=>{{ value.name }} value.web=>{{ value.web }}
        li>
    ul>
div>
js
<script type="module">
    import { createApp, reactive } from './vue.esm-browser.js'

    createApp({
        setup() {
            const data = reactive({
                number: ["十", "十一", "十二"], //数组
                user: { //对象
                    name: "Luna",
                    gender: "女"
                },
                teacher: [ //包含两个对象的数组
                    { id: 100, name: "邓瑞", web: "dengruicode.com" },
                    { id: 101, name: "David", web: "www.dengruicode.com" }
                ]
            })

            return {
                data
            }
        }
    }).mount("#app")
script>

9.双向数据绑定 v-model

html
<div id="app">
    <h3>文本框 {{ data.text }}h3>
    <h3>单选框 {{ data.radio }}h3>
    <h3>复选框 {{ data.checkbox }}h3>
    <h3>记住密码 {{ data.remember }}h3>
    <h3>下拉框 {{ data.select }}h3>

    
    单向数据绑定 <input type="text" :value="data.text">

    <hr>
    
    双向数据绑定 <input type="text" v-model="data.text">

    <hr>
    
    <input type="radio" v-model="data.radio" value="1">写作
    <input type="radio" v-model="data.radio" value="2">画画

    <hr>
    
    <input type="checkbox" v-model="data.checkbox" value="a">写作
    <input type="checkbox" v-model="data.checkbox" value="b">画画
    <input type="checkbox" v-model="data.checkbox" value="c">运动

    <hr>
    
    <input type="checkbox" v-model="data.remember">记住密码

    <hr>
    
    <select v-model="data.select">
        <option value="">请选择option>
        <option value="A">写作option>
        <option value="B">画画option>
        <option value="C">运动option>
    select>
div>
js
<script type="module">
    import { createApp, reactive } from './vue.esm-browser.js'

    createApp({
        setup() {
            const data = reactive({
                text: "dengruicode.com", //文本框
                radio: "", //单选框
                checkbox: [], //复选框
                remember: false, //单个复选框-记住密码
                select: "" //下拉框
            })

            return {
                data
            }
        }
    }).mount("#app")
script>

10.v-model修饰符

html
<div id="app">
    <h3>文本框 {{ data.text }}h3>
    <h3>单选框 {{ data.radio }}h3>
    <h3>复选框 {{ data.checkbox }}h3>
    <h3>记住密码 {{ data.remember }}h3>
    <h3>下拉框 {{ data.select }}h3>

    
    单向数据绑定 <input type="text" :value="data.text">

    <hr>
    
    双向数据绑定 <input type="text" v-model="data.text">

    <hr>
    
    <input type="radio" v-model="data.radio" value="1">写作
    <input type="radio" v-model="data.radio" value="2">画画

    <hr>
    
    <input type="checkbox" v-model="data.checkbox" value="a">写作
    <input type="checkbox" v-model="data.checkbox" value="b">画画
    <input type="checkbox" v-model="data.checkbox" value="c">运动

    <hr>
    
    <input type="checkbox" v-model="data.remember">记住密码

    <hr>
    
    <select v-model="data.select">
        <option value="">请选择option>
        <option value="A">写作option>
        <option value="B">画画option>
        <option value="C">运动option>
    select>
div>
js
<script type="module">
    import { createApp, reactive } from './vue.esm-browser.js'

    createApp({
        setup() {
            const data = reactive({
                text: "dengruicode.com", //文本框
                radio: "", //单选框
                checkbox: [], //复选框
                remember: false, //单个复选框-记住密码
                select: "" //下拉框
            })

            return {
                data
            }
        }
    }).mount("#app")
script>

11.渲染数据 v-text 和 v-html

html
<div id="app">
    <h3>{{ web.title }}h3>

    
    <h3 v-text="web.title">h3>

    
    <h3 v-html="web.url">h3>
div>
js
<script type="module">
    import { createApp, reactive } from './vue.esm-browser.js'

    createApp({
        setup() {
            const web = reactive({
                title: "邓瑞编程",
                url:"www.dengruicode.com"
            })

            return {
                web
            }
        }
    }).mount("#app")
script>

12.计算属性 computed

html
<div id="app">
    <h3>add: {{ add() }}h3>
    <h3>add: {{ add() }}h3>

    <h3>sum: {{ sum }}h3>
    <h3>sum: {{ sum }}h3>

    x <input type="text" v-model.number="data.x"> <br>
    y <input type="text" v-model.number="data.y">
div>
js
<script type="module">
    import { createApp, reactive, computed } from './vue.esm-browser.js'

    createApp({
        setup() {
            const data = reactive({
                x: 10,
                y: 20
            })

            //方法-无缓存
            let add = () => {
                console.log("add") //打印两次
                return data.x + data.y
            }

            //计算属性-有缓存 [计算属性根据其依赖的响应式数据变化而重新计算]
            const sum = computed(() => {
                console.log("sum") //打印一次
                return data.x + data.y
            })

            return {
                data,
                sum,
                add
            }
        }
    }).mount("#app")
script>

13.侦听器 watch

html
<div id="app">
    爱好
    <select v-model="hobby">
        <option value="">请选择option>
        <option value="1">写作option>
        <option value="2">画画option>
        <option value="3">运动option>
    select>

    <hr>

    年
    <select v-model="date.year">
        <option value="">请选择option>
        <option value="2023">2023option>
        <option value="2024">2024option>
        <option value="2025">2025option>
    select>

    月
    <select v-model="date.month">
        <option value="">请选择option>
        <option value="10">10option>
        <option value="11">11option>
        <option value="12">12option>
    select>
div>
js
<script type="module">
    import { createApp, ref, reactive, watch } from './vue.esm-browser.js'

    createApp({
        setup() {
            const hobby = ref("") //爱好
            const date = reactive({ //日期
                year: "2023",
                month: "10"
            })

            //监听 hobby
            watch(hobby, (newValue, oldValue) => {
                console.log("oldValue", oldValue, "newValue", newValue)

                if (newValue == "2") {
                    console.log("画画")
                }
            })

            //监听 date
            watch(date, (newValue, oldValue) => {
                /*
                    JS中对象和数组是通过引用传递的, 而不是通过值传递
                    当修改对象或数组的值时, 实际上修改的是对象或数组的引用, 而不是创建一个新的对象或数组
                    所以，如果修改了对象或数组的值，那么打印出来的结果则是修改后的值
                */
                console.log("oldValue", oldValue, "newValue", newValue)

                if (newValue.year == "2025") {
                    console.log("2025")
                }

                if (newValue.month == "11") {
                    console.log("11")
                }
            })

            //监听 date 中的某个属性 year
            watch(() => date.year, (newValue, oldValue) => {
                console.log("oldValue", oldValue, "newValue", newValue)

                if (date.year == "2024") {
                    console.log("2024")
                }
            })

            return {
                hobby,
                date
            }
        }
    }).mount("#app")
script>

14.自动侦听器 watchEffect

html
<div id="app">
    爱好
    <select v-model="hobby">
        <option value="">请选择option>
        <option value="1">写作option>
        <option value="2">画画option>
        <option value="3">运动option>
    select>

    <hr>

    年
    <select v-model="date.year">
        <option value="">请选择option>
        <option value="2023">2023option>
        <option value="2024">2024option>
        <option value="2025">2025option>
    select>

    月
    <select v-model="date.month">
        <option value="">请选择option>
        <option value="10">10option>
        <option value="11">11option>
        <option value="12">12option>
    select>
div>
js
<script type="module">
    /*
        watch需要显式指定要监听的属性, 并且只有当监听的属性发生变化时才会执行
        若需要更精细地控制或需要获取到原值, 需要使用watch
    */
    import { createApp, ref, reactive, watchEffect } from './vue.esm-browser.js'

    createApp({
        setup() {
            const hobby = ref("") //爱好
            const date = reactive({ //日期
                year: "2023",
                month: "10"
            })

            //自动监听
            watchEffect(() => {
                console.log("------ 监听开始")

                if (hobby.value == "2") {
                    console.log("画画")
                }

                if (date.year == "2025") {
                    console.log("2025")
                }

                if (date.month == "11") {
                    console.log("11")
                }

                console.log("------ 监听结束")
            })

            return {
                hobby,
                date
            }
        }
    }).mount("#app")
script>

Vue3快速入门2-案例篇

2.图片轮播案例

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>

<body>
    <div id="app">
        <h3>{{ number }}h3>

        
        <img :src=`/images/${number}.jpg` style="width: 300px;"> <hr>

        <button @click="prev">上一张button>
        <button @click="next">下一张button>

        <ul>
            <li v-for="(value, index) in 4">
                <a href="#" @click="jump(value)">{{ value }}a>
            li>
        ul>
    div>

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

        createApp({
            setup() {
                const number = ref(1)

                //上一张
                const prev = () => {
                    number.value--

                    if (number.value == 0) {
                        number.value = 4
                    }
                }

                //下一张
                const next = () => {
                    number.value++

                    if (number.value == 5) {
                        number.value = 1
                    }
                }

                //跳转
                const jump = (value) => {
                    number.value = value
                }

                return {
                    number,
                    prev,
                    next,
                    jump
                }
            }
        }).mount("#app")
    script>
body>

html>

3.记事本案例

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>

<body>
    <div id="app">
        <input type="text" 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>

        记录数 {{ data.list.length }} <br>

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

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

        createApp({
            setup() {
                const data = reactive({
                    content: "",
                    list: ["邓瑞编程", "dengruicode.com"],
                })

                //添加
                const add = () => {
                    if (data.content == "") {
                        alert("请填写内容")
                        return
                    }

                    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>

html>

4.购物车案例

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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">
                    <td>
                        <input type="checkbox" v-model="data.checkboxList" :value="value" @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({
                    selected: false,
                    checkboxList: [],
                    list: [{
                        id: 1,
                        name: "铅笔",
                        price: 10,
                        number: 1,
                        stock: 3
                    },
                    {
                        id: 2,
                        name: "鼠标",
                        price: 20,
                        number: 2,
                        stock: 5
                    },
                    {
                        id: 3,
                        name: "键盘",
                        price: 30,
                        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) //splice(要删除元素的索引位置, 要删除的元素数量)

                    //filter 筛选符合条件的元素, 返回一个新的数组
                    let newArr = data.checkboxList.filter((value, index) => {
                        return value.id != id
                    })
                    data.checkboxList = newArr

                    checkSelect() //检查勾选状态
                }

                //总价
                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 selectAll = () => {
                    if (data.selected) { //true
                        data.checkboxList = data.list
                    } else { //false
                        data.checkboxList = []
                    }
                }

                //检查勾选状态
                const checkSelect = () => {
                    if (data.checkboxList.length != data.list.length || data.list.length == 0) {
                        data.selected = false
                    } else {
                        data.selected = true
                    }
                }

                return {
                    data,
                    sub,
                    add,
                    del,
                    totalPrice,
                    selectAll,
                    checkSelect
                }
            }
        }).mount("#app")
    script>
body>

html>

5.购物车优化案例

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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">
                    
                    <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>
                tr>
            tfoot>
        table>
    div>

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

        createApp({
            setup() {
                const data = reactive({
                    selected: false,
                    checkboxList: [],
                    list: [{
                        id: 1,
                        name: "铅笔",
                        price: 10,
                        number: 1,
                        stock: 3
                    },
                    {
                        id: 2,
                        name: "鼠标",
                        price: 20,
                        number: 2,
                        stock: 5
                    },
                    {
                        id: 3,
                        name: "键盘",
                        price: 30,
                        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) //splice(要删除元素的索引位置, 要删除的元素数量)

                    //filter 筛选符合条件的元素, 返回一个新的数组
                    let newArr = data.checkboxList.filter((value, index) => {
                        return value.id != id
                    })
                    data.checkboxList = newArr

                    //checkSelect() //检查勾选状态
                }

                /*
                //总价
                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 totalPrice = computed(() => {
                    /*
                        reduce定义: 用于对数组中的所有元素进行迭代操作, 并将每次操作的结果累加到一个初始值上
                        reduce接收两个参数: 一个是累加器函数, 另一个是初始值
                        reduce: 将 data.checkboxList 数组中的每个 checkbox 对象的 price 和 number 属性进行相乘, 
                        并将结果累加到初始值 0 上, 最后返回累加的结果

                        total(累加器) 用于存储每次计算的结果, 初始值为 0
                        item(当前元素) 在每次迭代过程中, 当前元素的值会被传递给回调函数
                    */

                    return data.checkboxList.reduce((total, item) => total + item.price * item.number, 0)
                })

                /*
                //全选/反选
                const selectAll = () => {
                    if (data.selected) { //true
                        data.checkboxList = data.list
                    } else { //false
                        data.checkboxList = []
                    }
                }
                */
                //监听 data.selected
                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 = []
                        }
                    }
                    //console.log(data.checkboxList)
                })                

                /*
                //检查勾选状态
                const checkSelect = () => {
                    if (data.checkboxList.length == data.list.length && data.list.length != 0) {
                        data.selected = true
                    } else {
                        data.selected = false
                    }
                }
                */
                //监听 data.checkboxList
                watch(() => data.checkboxList, (newValue, oldValue) => {
                    console.log("newValue:", newValue, "oldValue:", oldValue)
                    console.log(newValue.length)

                    if (newValue.length == data.list.length && data.list.length != 0) {
                        data.selected = true
                        flag = true
                    } else {
                        data.selected = false
                        flag = false
                    }
                })                

                return {
                    data,
                    sub,
                    add,
                    del,
                    totalPrice,
                    //selectAll,
                    //checkSelect
                }
            }
        }).mount("#app")
    script>
body>

html>

6.使用Axios实现文章搜索案例

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="js/axios.min.js">script>
head>

<body>
    <div id="app">
        <select v-model="data.type">
            <option value="0">请选择option>
            <option value="1">IDoption>
            <option value="2">标题option>
        select>

        <input type="text" v-model="data.content">
        <button @click="search">搜索button>

        <ul>
            <li v-for="(value, index) in data.list">
                {{ value }}
            li>
        ul>
    div>

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

        createApp({
            setup() {
                const data = reactive({
                    type: "0", //搜索类型
                    content: "", //搜索内容
                    list: [],
                })

                //搜索
                const search = () => {
                    //console.log(data.content)
                    data.list = [] //清空

                    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) //push 向数组末尾添加一个或多个元素
                                }
                            }
                        }).catch(error => {
                            console.log("get.error:", error)
                        })
                    } else if (data.type == "2") {
                        //参数
                        let param  = { 
                            title: data.content
                        }

                        //post请求 [axios post的默认请求头是 application/json]
                        axios.post('http://127.0.0.1/article/postJson/search', param).then(response => {
                            console.log("postJson.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("postJson.error:", error)
                        })
                    }
                }

                return {
                    data,
                    search
                }
            }
        }).mount("#app")
    script>
body>

html>

Vue3快速入门3-组件篇

1.基于Vite创建Vue3项目

       官网
               https://cn.vitejs.dev
      基于Vite创建Vue3项目
               npm create vite@latest
               Ok to proceed? (y) » y
               Project name: » demo
               Select a framework: » Vue
               Select a variant: » JavaScript
               Done. Now run:
                       cd demo
                       npm install
                       npm run dev
               Local: http://localhost:5173
       删除文件
               src\style.css
               src\components\HelloWorld.vue
       删除代码
               main.js
                       import './style.css'
       修改代码
               src\App.vue
                       <script setup>
                       script>
                       <template>
                               dengruicode.com
                       template>
                       <style scoped>
                       style>

2.Vue3好用的VsCode插件

     Vue Language Features (Volar)
       TypeScript Vue Plugin (Volar)
       Vue VSCode Snippets
       别名路径跳转
       注
       Vue VSCode Snippets自定义模板
       C:\Users\David\.vscode\extensions\sdras.vue-vscode-snippets-3.1.1\snippets
       模板
               vbase-3-setup
               vbase-3-ts-setup
       重启vscode

3.导入组件

<script setup>
  //导入子组件
  //App.vue是父组件,因为它包含了header.vue和footer.vue两个子组件
  import Header from "./components/header.vue"
  import Footer from "./components/footer.vue"
script>

<template>
  <Header/>

  dengruicode.com
  
  <Footer/>
template>

<style scoped>

style>

4.父传子 defineProps

App.vue

<script setup>
  import { reactive } from 'vue'

  //导入子组件
  //App.vue是父组件,因为它包含了header.vue和footer.vue两个子组件
  import Header from "./components/header.vue"
  import Footer from "./components/footer.vue"

  /*
  const propsWeb = {
    user: 10,
    ip: '127.0.0.1'
  }
  */
  //响应式数据
  const propsWeb = reactive({
    user: 10,
    ip: '127.0.0.1'
  })

  //添加用户
  const userAdd = () => {
    propsWeb.user++
    console.log(propsWeb.user)
  }
script>

<template>
  
  <Header propsName="邓瑞编程" propsUrl="dengruicode.com" />

  dengruicode.com

  <button @click="userAdd">添加用户button>

  
  
  <Footer :="propsWeb" />
template>

<style scoped>style>


header.vue

<script setup>
    //子组件

    //接收方式1 - 数组
    /*
        defineProps是Vue3的编译时宏函数,
        用于接收父组件向子组件传递的属性(props)

        注
        当使用Vue编译器编译包含defineProps的组件时,
        编译器会将这些宏替换为相应的运行时代码
    */
    const props = defineProps(["propsName","propsUrl"])
    console.log(props)
script>

<template>
    <h3>Headerh3>
template>

<style scoped>

style>


footer.vue

<script setup>
    //子组件

    //接收方式2 - 对象
    /*
    const props = defineProps({
        user: Number,
        ip: String
    })
    */
    const props = defineProps({
        user: Number,
        ip: {
            type: String,
            required: true, //true表示必传属性,若未传则会提示警告信息
            default: 'localhost' //未传默认值
        }
    })

    console.log(props)
script>

<template>
    <h3>Footerh3>
    user: {{ props.user }}
template>

<style scoped>

style>

5.子传父 defineEmits

App.vue

<script setup>
  import { reactive,ref } from 'vue'

  //导入子组件
  import Header from "./components/header.vue"

  //响应式数据
  const web = reactive({
    name: "邓瑞编程",
    url: 'dengruicode.com'
  })

  const user = ref(0)

  //子传父
  const emitsWeb = (data) => {
    console.log("emitsWeb:",data)
    web.url = data.url
  }

  const emitsUser = (data) => {
    console.log("emitsUser:",data)
    user.value += data
  }
script>

<template>
  
  <Header @web="emitsWeb" @user="emitsUser" />

  {{ web.url }} - {{ user }}
template>

<style scoped>style>


header.vue

<script setup>
    //子组件

    /*
        defineEmits是Vue3的编译时宏函数,
        用于子组件向父组件发送自定义事件
    */
    //子传父
    //定义一个名为 emits 的对象, 用于存储自定义事件
    const emits = defineEmits(["web","user"])
    //发送名为 web 和 user 的自定义事件
    emits("web", {name:"邓瑞",url:"www.dengruicode.com"})
    
    //添加用户
    const userAdd = () => {
        //发送名为 user 的自定义事件
        emits("user", 10)
    }
script>

<template>
    <h3>Headerh3>

    <button @click="userAdd">添加用户button>
template>

<style scoped>

style>

6.跨组件通信-依赖注入

App.vue

<script setup>
  import { provide, ref } from 'vue'

  //导入子组件
  import Header from "./components/header.vue"

  //provide用于父组件将 数据 提供给所有子组件
  /*
    若使用了provide和inject来进行数据传递,
    则一般不需要再使用defineProps
  */
  provide("provideWeb",{name:"邓瑞",url:"www.dengruicode.com"})

  //传递响应式数据
  const user = ref(0)
  provide("provideUser",user)

  //添加用户
  const userAdd = () => {
    user.value++
  }
  //用于父组件将 函数 提供给所有子组件
  provide("provideFuncUserAdd",userAdd)
script>

<template>
  <h3>App.vue-Top组件h3>

  {{ user }}

  
  <Header/>
template>

<style scoped>style>


header.vue

<script setup>
    import { provide, inject } from 'vue'

    //导入子组件
    import Nav from "./nav.vue"

    //子组件通过inject注入父组件提供的 响应式数据
    const user = inject("provideUser")
    console.log("provideUser:",user.value)

    //provide用于父组件将 数据 提供给所有子组件
    provide("provideUrl","dengruicode.com")
script>

<template>
    <h3>header.vue-Middle组件h3>

    
    <Nav/>
template>

<style scoped>

style>


nav.vue

<script setup>
    //子组件
    import { inject } from 'vue'

    //子组件通过inject注入父组件提供的 数据
    const web = inject("provideWeb")
    console.log("provideWeb:",web)

    const url = inject("provideUrl")
    console.log("provideUrl:",url)

    //子组件通过inject注入父组件提供的 函数
    const funcUserAdd = inject("provideFuncUserAdd")
    console.log("provideFuncUserAdd:",funcUserAdd)
script>

<template>
    <h3>nav.vue-Bottom组件h3>

    <button @click="funcUserAdd">添加用户button>
template>

<style scoped>

style>

7.匿名插槽和具名插槽

插槽(slot)

       是指可以在父组件内自定义模板片段,

       在子组件中可以将定义的模板片段插入到子组件的特定位置



App.vue

<script setup>
  //导入子组件
  import Header from "./components/header.vue"
  import Footer from "./components/footer.vue"
script>

<template>
  <h3>App.vueh3>

  
  
  <Header>
    <a href="http://dengruicode.com">邓瑞编程a>
  Header>

  
  <Footer>
    <template v-slot:url>
      <a href="http://www.dengruicode.com">网址a>
    template>

    
    <template #user>
      1000
    template>
  Footer>

template>

<style scoped>

style>


header.vue

<script setup>
    
script>

<template>
    <h3>header.vue - 子组件h3>

    
    <slot/>
template>

<style scoped>

style>


footer.vue

<script setup>
    
script>

<template>
    <h3>footer.vue - 子组件h3>

    
    <slot name="url" />
    <slot name="user" />
template>

<style scoped>

style>

8.作用域插槽

作用域插槽

       子组件向父组件传递数据,并在父组件定义的模板中渲染



App.vue

<script setup>
  //导入子组件
  import Header from "./components/header.vue"
  import Footer from "./components/footer.vue"
script>

<template>
  <h3>App.vueh3>

  
  
  <Header>
    <a href="http://dengruicode.com">邓瑞编程a>
  Header>

  
  <Footer>
    <template v-slot:url>
      <a href="http://www.dengruicode.com">网址a>
    template>

    
    
    <template #user="{url,title}">
      1000 {{ url }} {{ title }}
    template>
  Footer>

template>

<style scoped>

style>


header.vue

<script setup>
    
script>

<template>
    <h3>header.vue - 子组件h3>

    
    <slot/>
template>

<style scoped>

style>


footer.vue

<script setup>
    
script>

<template>
    <h3>footer.vue - 子组件h3>

    
    <slot name="url" />
    <slot name="user" url="dengruicode.com" title="邓瑞编程" />
template>

<style scoped>

style>

9.生命周期函数

生命周期函数

       是组件实例从创建到销毁过程中不同时间点自动调用的函数



挂载阶段

       onBeforeMount

               在组件实例即将被挂载到DOM树之前调用

               此时模板还未编译或渲染到DOM,通常用于执行初始化操作,

               如:获取异步数据、设置初始属性值等

       onMounted

               在组件成功挂载到DOM并完成首次渲染后调用

               此时可以访问和操作DOM元素,

               并执行与页面交互相关的逻辑

更新阶段

       onBeforeUpdate (由于响应式数据变化)

               在组件更新之前即将重新渲染时调用

               可以根据新的参数判断是否需要进行特殊处理,

               甚至可以选择阻止此次更新过程

       onUpdated

               在组件完成更新并重新渲染后调用

               可以基于新的渲染结果处理更新后的数据

卸载阶段

       onBeforeUnmount

               在组件从DOM中销毁之前调用

               用于释放资源,如:清理计时器、解绑事件监听器等

       onUnmounted

               在组件已经从DOM中移除并销毁后调用

               确保组件所占用的所有资源都被正确释放

错误处理

       onErrorCaptured

               在捕获到组件中的错误时调用

               用于处理错误,如:记录错误日志等



注

组件挂载的过程

模板编译

       将组件的模板转换为JS代码

渲染

       在模板编译后生成的JS代码渲染到页面上,

       生成虚拟DOM

挂载

       在渲染完成后将虚拟DOM挂载到真实的DOM树上,

       使其在页面上显示出来



<script setup>
  import { onMounted, onUpdated, ref } from 'vue'

  //在组件成功挂载到DOM并完成首次渲染后调用
  onMounted(() => {
    console.log("onMounted")
  })

  //在组件更新之后调用
  onUpdated(() => {
    console.log("onUpdated:",user.value)
  })

  const user = ref(0)
  console.log("user:",user.value)
script>

<template>
  <h3>App.vueh3>

  {{ user }}

  <button @click="user++">添加用户button>
template>

<style scoped>

style>

10.toRef和toRefs

<script setup>
  import { reactive, toRef, toRefs } from 'vue'

  /*
  let {name,url} = reactive({
    name:"邓瑞编程",
    url:"dengruicode.com"
  })
  */
  let web = reactive({
    name:"邓瑞编程",
    url:"dengruicode.com"
  })

  //toRefs将一个响应式对象的所有属性转换为ref对象
  //let {name,url} = toRefs(web)

  //toRef将一个响应式对象的某个属性转换为ref变量
  let url = toRef(web, "url")

  const setUrl = () => {
    console.log(url)
    url.value = "www.dengruicode.com"
  }
script>

<template>
  {{ url }}

  <button @click="setUrl">设置网址button>
template>

<style scoped>

style>

Vue3 快速入门4-Pinia

1.Pinia 简介

  Pinia是一个轻量级的状态管理库
       Pinia官网
       https://pinia.vuejs.org/zh
       状态管理库是用于管理应用程序全局状态的工具
       以登录为例:
               使用Pinia创建一个userStore来集中管理用户的登录状态和过期时间
               当用户登录成功时:
                       设置userStore中用户的登录状态为已登录,并设置过期时间
               当用户退出登录时:
                       修改userStore中用户的登录状态为未登录,并删除过期时间
       Pinia 和 组件通信 的区别
       虽然Vue提供的父传子、子传父以及跨组件通信也可以用于状态共享,
       但在大型项目中,随着组件数量的增加,会导致以下问题:
       1.组件之间传递大量的props,会使项目变得非常繁琐和难以维护
       2.非父子组件间过度依赖provide/inject,使状态散落在各个组件之间

       Pinia 可以解决以下问题:
       1.全局状态管理
               所有组件都可以访问和修改状态,而不用在每个组件内部进行状态管理
       2.简化组件之间的通信
               避免在组件之间传递大量的props
       3.状态持久化
               可以将应用程序的状态保存到本地存储中,
               在应用程序重启后会保留状态,对于登录等场景非常有用
       总的来说,Pinia可以处理大型项目中复杂的状态管理需求,
       而父传子、子传父以及跨组件通信,可以解决一些简单的状态传递问题,
       更适合小型项目
       Pinia 和 localStorage 的区别
       localStorage
               LocalStorage只能存储字符串类型的数据
               LocalStorage有大小限制,通常为5MB左右
       Pinia
               Pinia可以存储任何类型的数据,包括对象、数组等
               Pinia没有大小限制,可以存储大量的数据
       总的来说,对于复杂的状态管理需求,使用Pinia是更好的选择,
       而对于简单的状态管理需求,使用localStorage是更简单的解决方案

2.安装 Pinia 以及定义和使用 Store

安装Pinia

       npm install pinia



main.js

import { createApp } from 'vue'

//导入Pinia的createPinia方法,用于创建Pinia实例(状态管理库)
import { createPinia } from 'pinia'

import App from './App.vue'

//创建一个Pinia实例,用于在应用中集中管理状态(store)
const pinia = createPinia()

//createApp(App).mount('#app')
const app = createApp(App)
app.use(pinia) //将Pinia实例注册到Vue应用中
app.mount('#app')


web.js

import { reactive, ref } from 'vue'
import { defineStore } from 'pinia'

/*
  定义一个基于 Pinia 的 Store
  第1个参数 web 是 useWebStore 在应用中的唯一标识符(ID)
  第2个参数是 Setup函数 或 Option对象
*/
export const useWebStore = defineStore('web', () => {
  //定义一个响应式对象，存储网站信息
  const web = reactive({
    title: "邓瑞编程",
    url: "dengruicode.com"
  })

  //定义一个响应式引用，存储用户数
  const users = ref(1000)
  
  //定义方法
  const userAdd = () => {
    users.value++
  }

  return {
    web,
    users,
    userAdd
  }
})


App.vue

<script setup>
    import { useWebStore } from './stores/web.js'

    const webStore = useWebStore()
    
    console.log("webStore.web:",webStore.web)
    console.log("webStore.users:",webStore.users)
script>

<template>
    {{ webStore.web.url }}

    {{ webStore.users }}

    <button @click="webStore.userAdd" >添加用户button>
template>

<style scoped>

style>

3.Pinia 持久化存储插件

官网
https://prazdevs.github.io/pinia-plugin-persistedstate/zh
安装
npm i pinia-plugin-persistedstate
注
pinia持久化插件也是存储到localStorage中,
为什么不直接使用localStorage?
自动状态同步
       持久化插件自动将Pinia的状态存储到localStorage中,
       无需手动处理状态的读取和写入
易用性
       无需手动处理localStorage的键值对存储、数据转换等繁琐过程
与Vue组件状态紧密集成
       持久化插件与Vue组件的响应式数据完美结合
       当状态改变时,依赖这些状态的组件会自动更新视图
       与仅仅从localStorage中读取静态数据相比更加灵活和强大

main.js

import { createApp } from 'vue'

//导入Pinia的createPinia方法,用于创建Pinia实例(状态管理库)
import { createPinia } from 'pinia'

//从 pinia-plugin-persistedstate 模块中导入 piniaPluginPersistedstate
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

import App from './App.vue'

//创建一个Pinia实例,用于在应用中集中管理状态(store)
const pinia = createPinia()

//将插件添加到 pinia 实例上
pinia.use(piniaPluginPersistedstate)

//createApp(App).mount('#app')
const app = createApp(App)
app.use(pinia) //将Pinia实例注册到Vue应用中
app.mount('#app')


web.js

import { reactive, ref } from 'vue'
import { defineStore } from 'pinia'

/*
  定义一个基于 Pinia 的 Store
  第1个参数 web 是 useWebStore 在应用中的唯一标识符(ID)
  第2个参数是 Setup函数 或 Option对象
*/
export const useWebStore = defineStore('web', () => {
  //定义一个响应式对象，存储网站信息
  const web = reactive({
    title: "邓瑞编程",
    url: "dengruicode.com"
  })

  //定义一个响应式引用，存储用户数
  const users = ref(1000)
  
  //定义方法
  const userAdd = () => {
    users.value++
  }

  return {
    web,
    users,
    userAdd
  }
},
{
  //持久化存储到 localStorage 中
  persist: true
})