第一部分 Vue讲解(1-10)（代码版）

已于 2024-04-18 00:07:14 修改
阅读量539 收藏 9
点赞数 28
分类专栏： vue开发 文章标签： vue.js 前端 javascript
于 2024-04-08 21:03:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64245578/article/details/137160164
版权

1.第一个vue实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>01.创建第一个Vue实例</title>
</head>
<body>
<!--创建Vue实例，初始化渲染-->
<!--1.容器（Vue所管理的范围）-->
<!--2.导包（开发版本包/生产版本包） 官网查找-->
<!--（1） 开发环境版本，包含了有帮助的命令行警告 （使用）-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>-->
<!--（2） 生产环境版本，优化了尺寸和速度 -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>-->
<!--3.实例（new对象）-->
<!--4.配置项（el：挂载点，data：数据）-->
<!--5.完成渲染-->

<!--1.容器-->
<div class="box"></div>
<div class="box2"></div>
<div id="app">
    <!--    编写用于渲染的代码逻辑-->
    <h1>{{msg}}</h1>
    {{count}}
</div>
<!--2.引入开发版本核心包，该包包含完整的注释和警告-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    <!--    一旦引入VueJS核心包，在全局环境中，就有了Vue构造函数，有了构造函数就可以创建实例-->
    //基于引入的核心包，创建实例对象,在对象中写入配置项（el，data）
    const app = new Vue({
        //通过el配置选择器(指定渲染的容器)，只当Vue管理的是哪个盒子
        el: "#app",
        //通过data提供数据
        data: {
            msg: "hello!!!",
            count: 666
        }
    })
</script>
</body>
</html>

2.插值表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>02.插值表达式</title>
</head>
<body>
<!--插值表达式：Vue的一种模板语法
作用：利用表达式，进行插值渲染
语法：{{表达式}}
使用的注意：
（1）不能在标签属性中使用{{}}
（2）使用的数据要存在
（3）支持的式表达式，不是语句 if for
-->
<div id="app">
   <p>{{nickname}}</p>
    <p>{{nickname.toUpperCase()}}</p>
    <p>{{nickname + '，hello!!!'}}</p>
    <p>{{age>=18?'成年':'未成年'}}</p>
    <p>{{nickname}}的朋友：{{friend.name}}</p>
    <p>{{friend.desc}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            nickname: "cc",
            age:22,
            friend:{
                name:"lucy",
                desc:"热爱学习"
            }
        }
    })
</script>
</body>
</html>

3.Vue响应式特性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>03.Vue的响应式特性</title>
</head>
<body>
<!--数据的响应式处理--》响应式：数据变化，视图自动更新-->
<!--使用Vue开发--》专注于业务核心逻辑即可-->
<div id="app">
    {{msg}}
    {{count}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            // 响应式数据
            msg: "你好，cc",
            count: 100
        }
    })
    //data中的数据，是会被添加到实例上
    //1.访问数据  实例.属性名

    //2.修改数据  实例.属性名=新值
</script>
</body>
</html>

4.Vue指令

4.1 vue-html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>04.Vue指令</title>
</head>
<body>
<!--指令：带有v-前缀的特殊标签属性，不同属性对应不同的功能-->
<!--vue-html：
作用：设置元素的innerHTML，可以解析标签中的数据；
语法：v-html="表达式"-->
<div id="app">
    <div v-html="msg"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",
        data:{
            //注：数据值要用''包裹
            msg:'<a href="https://www.baidu.com/">百度</a>'
            // msg:'<h3>百度</h3>'
        }
    })
</script>
</body>
</html>

4.2 v-show和v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>04.vue指令（2）</title>
</head>
<body>
<!--vue指令：v-show和v-if-->
<!--（1）v-show
作用：控制元素显示隐藏
语法：v-show="表达式",表达式值true显示，false隐藏
底层原理：切换css的display：none来控制显示隐藏
适用场景：频繁切换需要隐藏的场景-->

<!--（2）v-if
作用：控制元素显示隐藏（条件渲染）
语法：v-if="表达式",表达式值true显示，false隐藏
底层原理：根据判断条件 控制元素的创建和移除（条件渲染）
适用场景：要么显示，要么隐藏，不频繁切换的场景-->
<div id="app">
    <div v-show="flag" class="box">v-show控制</div>
    <div v-if="flag" class="box">v-if控制</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app=new Vue({
    el:"#app",
    data:{
        flag:true
    }
})
</script>
<style>
    .box{
        text-align: center;
        border-radius: 5px;
        box-shadow: 2px 2px 2px #ccc;
    }
</style>
</body>
</html>

4.3 v-else 和 v-else-if

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>04.Vue指令（3）</title>
</head>
<body>
<!--vue指令：v-else 和 v-else-if-->
<!--作用：辅助v-if进行判断渲染
语法：v-else  v-else-if="表达式"
注意：需要紧挨着v-if一起使用-->

<div id="app">
<p v-if="gender===1">性别：男</p>
<p v-else>性别：女</p>
    <hr>
    <p v-if="score>=90">成绩评定A：奖励电脑一台</p>
    <p v-else-if="score>=80">成绩评定B：奖励周末郊游</p>
    <p v-else-if="score>=70">成绩评定C：奖励零食礼包</p>
    <p v-else>成绩评定D：惩罚一周不能玩手机</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",
        data:{
           gender:0,
            score:80
        }
    })
</script>
</body>
</html>

4.4 v-on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>04.Vue指令（4）</title>
</head>
<body>
<!--vue指令：v-on
作用：注册事件，注册事件=添加监听+提供处理逻辑
语法：（1）v-on:事件名=“内联语句（可执行语句）"
     （2）v-on:事件名=”methods中的函数名“
 简写： @事件名
-->
<div id="app">
    <!--    （1）v-on:事件名=”内联语句“-->
    <button v-on:click="count--">-1</button>
    <span>{{count}}</span>
    <button v-on:click="count++">+1</button>
    <button v-on:click="count=count+2">+2</button>
    <!--    v-on简写方式：@事件名（将v-on:替换成@）-->
    <button v-on:click="count=count+2">+2</button>
    <hr>
    <!--    （2）v-on:事件名=”methods中的函数名"-->
    <button @click="fn">切换显示隐藏</button>
    <h1 v-show="isShow">hello</h1>
    <hr>
    <!--    v-on调用传参-->
    <button @click="price(-5)">-5</button>
    <span>{{count}}</span>
    <button @click="price(5)">+5</button>
    <hr>
    <div class="box">
        <h1>yueyue自动售货机</h1>
        <button @click="yueyue(5)">可乐5元</button>
        <button @click="yueyue(8)">牛奶10元</button>
        <button @click="yueyue(10)">咖啡10元</button>
    </div>
    <p>余额：{{money}}元</p>
    <hr>
    <div class="box2">
        <button @click="datasum(1,1)">{{param1}}+{{param2}}={{sum}}</button>
    </div>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        //提供数据
        data: {
            count: 100,
            isShow: true,
            money:100,
            param1:0,
            param2:0,
            sum:0
        },
        //提供方法
        methods: {
            //让提供的所有methods中的函数，this都指向当前实例
            fn() {
                // console.log("执行了fn",app.isShow)
                console.log(app === this)   //true
                app.isShow = !app.isShow
                this.isShow = !this.isShow
            },
            price(x){
                this.count+=x
                console.log("count=",this.count)
            },
            yueyue(x){
                this.money-=x
                if(this.money<0){
                    alert("余额不足，努力挣钱！！！")
                    return
                }
                console.log("money=",this.money)
            },
            datasum(x,y){
                this.param1=x
                this.param2=y
                this.sum=x+y
                console.log(this.param1,"+",this.param2,"=",this.sum(x,y))
            }
        }

    })
</script>
</body>
</html>

4.5 v-bind

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>04.Vue指令（5）</title>
</head>
<body>
<!--vue指令：v-bind-->
<!--作用：动态的设置html的标签属性->src  url
语法：v-bind:属性名="表达式"
简写:  :事件

-->
<div id="app">
    <img v-bind:src="imgUrl" v-bind:title="msg" alt=""/>
    <!--    简写-->
    <img :src="imgUrl" :title="msg" alt=""/>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            msg: "波仔",
            imgUrl: "../images/01.imgs/10-02.png"
        },
    })
</script>
</body>
</html>

4.6 v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>04.vue指令（6）</title>
</head>
<body>
<!--vue指令：v-for-->
<!--作用：基于数据循环，多次渲染整个元素->数组（常用）、对象、数字
语法：v-for="(item,index) in 数组"，item每一项，index下标
注意：v-for中使用的是()
-->
<!--v-for="(item,index) in 数组" :key="item.id"
语法：key属性="唯一标识"
作用：给列表项添加的唯一标识，便于vue进行列表项的正确排序复用
注意点：
（1）key的值只能是字符串或数字类型
（2）key的值必须具有唯一性
（3）推荐使用id作为key（唯一），不推荐使用index作为key（会变化，不对应）-->
<div id="app">
    <h3>yueyue水果店</h3>
    <ul>
<!--        v-for中的index是可以省略的，且当只有一个参数时，括号()也是可以省略的-->
        <li v-for="item in list">
            {{item}}
        </li>
        <hr>
        <li v-for="(item,index) in list ">
            {{item}}---{{index}}
        </li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            list: ['西瓜', '苹果', '香蕉']
        },
        methods: {}

    })
</script>
</body>
</html>

4.7 v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>04.Vue指令（7）</title>
</head>
<body>
<!--vue指令：v-model-->
<!--作用：给表单元素使用，双向数据绑定->可以快速获取或设置表单元素内容
（1）数据变化->视图自动更新
（2）视图变化->数据自动更新-->
<!--语法：v-model='变量'-->
<div id="app">
    账户：<input type="text" v-model="username"><br><br>
    密码：<input type="password" v-model="password"><br><br>
    <button @click="login">登录</button>
    <button @click="reset">重置</button>
    <hr>
    <hr>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            username: '',
            password: ''
        },
        methods: {
            login(username, password) {
                this.username = username,
                    this.password = password
                console.log(this.username, this.password)
            },
            reset() {
                this.username = '',
                this.password = ''
            }
        }
    })
</script>
</body>
</html>

4.8 案例

4.8.1 指令案例（yueyue书屋）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>01.yueyue书屋</title>
</head>
<body>
<!--需求：
（1）列表的渲染
（2）删除功能
-->
<div id="app">
    <h3>yueyue书屋</h3>
    <ul>
        <li v-for="(item,index) in bookList" :key="item.id">
            <span>{{item.name}}</span>
            <span>{{item.author}}</span>
            <button @click="del(item.id)">删除</button>
        </li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            bookList: [
                {id: 1, name: "《红楼梦》", author: "曹雪芹"},
                {id: 2, name: "《西游记》", author: "吴承恩"},
                {id: 3, name: "《水浒传》", author: "施耐庵"},
                {id: 4, name: "《三国演义》", author: "罗贯中"}
            ]
        },
        methods: {
            del(id) {
                // console.log("删除",id)
                //    通过id进行删除数组中的对应项->filter(不会改变原数组)
                //    filter:根据条件，保留满足条件的对应项，得到一个新数组
                // console.log(this.bookList.filter(item => item.id !== id));
                this.bookList=this.bookList.filter(item => item.id !== id)
            }
        }
    })
</script>
</body>
</html>

4.8.2 指令案例（yueyue记事本）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>02.yueyue记事本</title>
</head>
<body>
<!--需求：
（1）列表渲染
（2）删除功能
（3）添加功能
（4）底部统计和清空
-->
<!--主体区域-->
<section id="app">
<!--    输入框-->
    <header class="header">
        <h1>yueyue记事本</h1>
        <input v-model="todoName" placeholder="请输入任务" class="new-todo"/>
        <button @click="add()" class="add">添加任务</button>
    </header>

    <!--列表区域-->
    <section class="main">
        <ul class="todo-list">
            <li class="todo" v-for="(item,index) in list" :key="item.id">
                <div class="view">
                    <span class="index">{{index + 1}}.</span><label>{{item.name}}</label>
                    <button @click="del(item.id)" class="destroy"></button>
                </div>
            </li>
        </ul>
    </section>

    <!--统计和清空->如果没有任务了，底部隐藏掉（v-show）-->
    <footer class="footer" v-show="list.length>0">
        <!--    统计-->
        <span class="todo-count">合计：<strong>{{list.length}}</strong></span>
        <!--    清空-->
        <button @click="clear" class="clear-completed">
            清空任务
        </button>
    </footer>
</section>
<!--底部-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
//添加功能
//（1）通过v-model绑定输入框-》实时获取表单元素的内容
//（2）点击按钮，进行新增，往数组最前面加（unshift）
    const app = new Vue({
        // el: ".main",   //删除
        el: "#app", //添加
        data: {
            todoName:"",
            list: [
                {id: 1, name: "跑步一公里"},
                {id: 2, name: "跳绳200次"},
                {id: 3, name: "游泳100米"}
            ]
        },
        methods: {
            //删除
            del(id) {
                console.log(id)
                // filter():保留所有不等于该id的项
                this.list = this.list.filter(item => item.id !== id)
            },
            //添加
            add(){
                if(this.todoName.trim()==''){
                    alert("请输入任务名称")
                    return
                }
                this.list.unshift({
                    id: +new Date(),
                    name: this.todoName
                })
                this.todoName=''
            },
            //清空
            clear(){
                this.list=[]
            }
        }
    })
</script>
</body>
</html>

5.指令修改符

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>01.指令修饰符</title>
</head>
<body>
<!--指令修饰符：通过"."指明一些指令后缀，不同后缀封装了不同的操作->简化代码-->
<!--
（1）按键修饰符
    @keyup.enter：键盘回车监听
（2）v-model修饰符
    v-model.trim：去除首尾空格
    v-model.number：转数字
（3）事件修饰符
    @事件名.stop：阻止冒泡
    @事件名.prevent：阻止默认行为
-->

<!--主体区域-->
<section id="app">
<!--    输入框-->
    <header class="header">
        <h1>yueyue记事本</h1>
<!--        使用指令修饰符-->
        <input @keyup.enter="add" v-model="todoName" placeholder="请输入任务" class="text">
        <button @click="add" class="add">添加任务</button>
    </header>
<!--    列表区域-->
    <section class="main">
        <ul class="todo-list">
            <li class="todo" v-for="(item,index) in list" :key="item.id">
                <div class="view">
                    <span class="index">{{index + 1}}.</span><label>{{item.name}}</label>
                    <button @click="del(item.id)" class="destroy"></button>
                </div>
            </li>
        </ul>
    </section>
    <!--统计和清空->如果没有任务了，底部隐藏掉（v-show）-->
    <footer class="footer" v-show="list.length>0">
        <!--    统计-->
        <span class="todo-count">合计：<strong>{{list.length}}</strong></span>
        <!--    清空-->
        <button @click="clear" class="clear-completed">
            清空任务
        </button>
    </footer>
</section>
<!--底部-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    //添加功能
    //（1）通过v-model绑定输入框-》实时获取表单元素的内容
    //（2）点击按钮，进行新增，往数组最前面加（unshift）
    const app = new Vue({
        // el: ".main",   //删除
        el: "#app", //添加
        data: {
            todoName:"",
            list: [
                {id: 1, name: "跑步一公里"},
                {id: 2, name: "跳绳200次"},
                {id: 3, name: "游泳100米"}
            ]
        },
        methods: {
            //删除
            del(id) {
                console.log(id)
                // filter():保留所有不等于该id的项
                this.list = this.list.filter(item => item.id !== id)
            },
            //添加
            add(){
                if(this.todoName.trim()==''){
                    alert("请输入任务名称")
                    return
                }
                this.list.unshift({
                    id: +new Date(),
                    name: this.todoName
                })
                this.todoName=''
            },
            //清空
            clear(){
                this.list=[]
            }
        }
    })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>02.指令修饰符（1）</title>
</head>
<body>
<div id="app">
    <h3>@keyup.enter->监听键盘回车事件</h3>
    <input @keyup.enter="fn" v-model="username" type="text">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            username: ''
        },
        methods: {
            fn(e) {
                //     if(e.key==='Enter'){
                console.log('键盘回车时触发', this.username)
            }
            // }
        }
    })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>02.指令修饰符（2）</title>
    <style>
        .father {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-top: 20px;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
<div id="app">
    <h3>v-model修饰符 .trim // .number</h3>
    姓名：<input v-model.trim="username" type="text"><br>
    年纪：<input v-model.number="age" type="text"><br>


    <h3>@事件名.stop     →  阻止冒泡</h3>
    <div @click="fatherFn" class="father">
        <div @click.stop="sonFn" class="son">son</div>
    </div>

    <h3>@事件名.prevent  →  阻止默认行为</h3>
    <a @click.prevent href="http://www.baidu.com">阻止默认行为</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            username: '',
            age: '',
        },
        methods: {
            fatherFn () {
                alert('father被点击了')
            },
            sonFn (e) {
                // e.stopPropagation()
                alert('son被点击了')
            }
        }
    })
</script>
</body>
</html>

6.V-bind增强

6.1 v-bind对于样式控制

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>03.v-bind对于样式控制的增强</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            border: 3px solid #000;
            font-size: 30px;
            margin-top: 10px;
        }
        .pink {
            background-color: pink;
        }
        .big {
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
<!--v-bind对于样式控制的增强-->
<!--为了方便开发者进行样式控制，Vue拓展了v-bind的语法，可以针对class类名和style行内样式进行控制-->
<!--v-bind对于样式控制的增强--操作class -->
<!--语法：class="对象/数组"
(1)对象->键就是类名，值是布尔值，如果值为true，有这个类，否则没有这个类
<div class="box" :class="{类名1:布尔值，类名2:布尔值}"></div>
(2)数组->数组中所有的类，都会添加到盒子上，本质就是一个class列表
<div class="box" :class="[类名1,类名2,类名3]"></div>
-->

<div id="app">
    <div class="box" :class="{ pink: true, big: true }">黑马程序员</div>
    <div class="box" :class="['pink', 'big']">黑马程序员</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {

        }
    })
</script>
</body>
</html>

6.2 v-bind对于样式控制增强

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>03.v-bind对于样式控制的增强-操作style</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: rgb(187, 150, 156);
        }

         .progress {
             height: 25px;
             width: 400px;
             border-radius: 15px;
             background-color: #272425;
             border: 3px solid #272425;
             box-sizing: border-box;
             margin-bottom: 30px;
         }
        .inner {
            width: 50%;
            height: 20px;
            border-radius: 10px;
            text-align: right;
            position: relative;
            background-color: #409eff;
            background-size: 20px 20px;
            box-sizing: border-box;
            transition: all 1s;
        }
        .inner span {
            position: absolute;
            right: -20px;
            bottom: -25px;
        }
    </style>
</head>
<body>
<!--语法：:style="样式对象"
<div class="box" :style="{CSS属性名1:CSS属性值,CSS属性名2:CSS属性值}"></div>
适用场景：某个具体属性的动态设置
-->
<div id="app2">
    <div class="box" :style="{ width: '400px', height: '400px', backgroundColor: 'green' }"></div>
</div>

<div id="app">
    <!-- 外层盒子底色 （黑色） -->
    <div class="progress">
        <!-- 内层盒子 - 进度（蓝色） -->
        <div class="inner" :style="{ width: percent + '%' }">
            <span>{{ percent }}%</span>
        </div>
    </div>
    <button @click="percent = 25">设置25%</button>
    <button @click="percent = 50">设置50%</button>
    <button @click="percent = 75">设置75%</button>
    <button @click="percent = 100">设置100%</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            percent: 30
        }
    })
</script>
</body>
</html>

6.3 案例

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>03.案例—京东秒杀tab导航高亮</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            display: flex;
            border-bottom: 2px solid #e01222;
            padding: 0 10px;
        }
        li {
            width: 100px;
            height: 50px;
            line-height: 50px;
            list-style: none;
            text-align: center;
        }
        li a {
            display: block;
            text-decoration: none;
            font-weight: bold;
            color: #333333;
        }
        li a.active {
            background-color: #e01222;
            color: #fff;
        }

    </style>
</head>
<body>
<!--核心思路：
（1）基于数据动态渲染tab，->v-for
（2）准备下标高亮的是哪一个tab->activeIndex
（3）基于下标，动态控制class类名 v-bind:class
-->
<div id="app">
    <ul>
<!--        所谓高亮，其实就是修改下标-->
        <li v-for="(item, index) in list" :key="item.id" @click="activeIndex = index">
            <a :class="{ active: index === activeIndex }" href="#">{{ item.name }}</a>
        </li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            activeIndex: 2, // 记录高亮
            list: [
                { id: 1, name: '京东秒杀' },
                { id: 2, name: '每日特价' },
                { id: 3, name: '品类秒杀' }
            ]
        }
    })
</script>
</body>
</html>

7. v-model应用于其他表单

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>04.v-model应用于其他表单元素</title>
</head>
<body>
<!--常见的表单元素都可以用v-model绑定关联->快速获取或设置表单元素的值
它会根据控件类型自动选取正确的方法来更新元素-->
<div id="app">
  <h1>yueyue学习网</h1>
  姓名：<input type="text" v-model="username">
  <br><br>

  是否单身：<input type="radio">男
  <input type="radio">女
  <br><br>

<!--  所在城市：-->
  所在城市：
  <select>
    <option>北京</option>
    <option>上海</option>
    <option>河南省</option>
  </select>
    <!--
     前置理解：
       1. name:  给单选框加上 name 属性 可以分组 → 同一组互相会互斥
       2. value: 给单选框加上 value 属性，用于提交给后台的数据
     结合 Vue 使用 → v-model
   -->
    性别:
    <input v-model="gender" type="radio" name="gender" value="1">男
    <input v-model="gender" type="radio" name="gender" value="2">女
    <br><br>

    <!--
      前置理解：
        1. option 需要设置 value 值，提交给后台
        2. select 的 value 值，关联了选中的 option 的 value 值
      结合 Vue 使用 → v-model
    -->
    所在城市:
    <select v-model="cityId">
        <option value="101">北京</option>
        <option value="102">上海</option>
        <option value="103">成都</option>
        <option value="104">南京</option>
    </select>
    <br><br>

    自我描述：
    <textarea v-model="desc"></textarea>

    <button>立即注册</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            username: '',
            isSingle: false,
            gender: "2",
            cityId: '102',
            desc: ""
        }
    })
</script>
</div>
</body>
</html>

8.计算属性

8.1 计算属性的默认用法

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>05.计算属性</title>
    <style>
        table {
            border: 1px solid #000;
            text-align: center;
            width: 240px;
        }
        th,td {
            border: 1px solid #000;
        }
        h3 {
            position: relative;
        }
    </style>
</head>
<body>
<!--计算属性：基于现有的数据，计算出来的新属性，依赖的数据变化，自动重新计算
计算属性->可以将一段求值的代码进行封装-->
<!--语法：
（1）声明再computed配置项中，一个计算属性对应一个函数
（2）使用起来和普通属性一样使用{{计算属性名}}-->
<div id="app">
    <h3>小黑的礼物清单</h3>
    <table>
        <tr>
            <th>名字</th>
            <th>数量</th>
        </tr>
        <tr v-for="(item, index) in list" :key="item.id">
            <td>{{ item.name }}</td>
            <td>{{ item.num }}个</td>
        </tr>
    </table>

    <!-- 目标：统计求和，求得礼物总数 -->
    <p>礼物总数：{{ totalCount }} 个</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            // 现有的数据
            list: [
                { id: 1, name: '篮球', num: 1 },
                { id: 2, name: '玩具', num: 2 },
                { id: 3, name: '铅笔', num: 5 },
            ]
        },
        computed: {
            totalCount () {
                // 基于现有的数据，编写求值逻辑
                // 计算属性函数内部，可以直接通过 this 访问到 app 实例
                // console.log(this.list)

                // 需求：对 this.list 数组里面的 num 进行求和 → reduce
                let total = this.list.reduce((sum, item) => sum + item.num, 0)
                return total
            }
        }
    })
</script>
</body>
</html>

8.2.computed和methods

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>06.computed计算属性和methods方法</title>
    <style>
        table {
            border: 1px solid #000;
            text-align: center;
            width: 300px;
        }
        th,td {
            border: 1px solid #000;
        }
        h3 {
            position: relative;
        }
        span {
            position: absolute;
            left: 145px;
            top: -4px;
            width: 16px;
            height: 16px;
            color: white;
            font-size: 12px;
            text-align: center;
            border-radius: 50%;
            background-color: #e63f32;
        }
    </style>
</head>
<body>
<!--
作用方面：
（1）计算属性：封装了一段对于数据的处理，求得一个结果
（2）methods：给实例提供一个方法，调用以处理业务逻辑
语法方面：
（1）计算属性
    1）写在computed配置项中
    2）作为属性，直接使用->this.计算属性{{计算属性}}
（2）methods
    1）写在methods配置项中；
    2）作为方法，需要调用->this.方法名()  {{方法名()}}   @事件名=“方法名”

使用computed计算属性值的优势：缓存特性（提升性能）
计算属性会对计算出来的结果缓存，再次使用直接读取缓存，依赖项变化了，会自动重新计算->并再次缓存
-->
<div id="app">
    <h3>小黑的礼物清单🛒<span>{{ totalCountFn() }}</span></h3>
    <h3>小黑的礼物清单🛒<span>{{ totalCountFn() }}</span></h3>
    <h3>小黑的礼物清单🛒<span>{{ totalCountFn() }}</span></h3>
    <h3>小黑的礼物清单🛒<span>{{ totalCountFn() }}</span></h3>
    <table>
        <tr>
            <th>名字</th>
            <th>数量</th>
        </tr>
        <tr v-for="(item, index) in list" :key="item.id">
            <td>{{ item.name }}</td>
            <td>{{ item.num }}个</td>
        </tr>
    </table>

    <p>礼物总数：{{ totalCountFn() }} 个</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            // 现有的数据
            list: [
                { id: 1, name: '篮球', num: 3 },
                { id: 2, name: '玩具', num: 2 },
                { id: 3, name: '铅笔', num: 5 },
            ]
        },

        methods: {
            totalCountFn () {
                console.log('methods方法执行了')
                let total = this.list.reduce((sum, item) => sum + item.num, 0)
                return total
            }
        },

        computed: {
            // 计算属性：有缓存的，一旦计算出来结果，就会立刻缓存
            // 下一次读取 → 直接读缓存就行 → 性能特别高
            // totalCount () {
            //   console.log('计算属性执行了')
            //   let total = this.list.reduce((sum, item) => sum + item.num, 0)
            //   return total
            // }
        }
    })
</script>
</body>
</html>

8.3 计算属性的完整写法

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>07.计算属性完整写法</title>
    <style>
        input {
            width: 30px;
        }
    </style>
</head>
<body>
<!--计算属性完整写法
计算属性默认的简写：只能读取访问，不能“修改”
如果需要“修改”->需要写计算属性的完整写法

语法（默认写法）：
computed:{
  计算属性名(){
     一段代码逻辑（计算逻辑）
     return 结果
  }
}

语法（完整写法）：
computed:{
计算属性名:{
   get(){
      一段代码逻辑（计算逻辑）
      return 结果
     },
   set(修改的值){
      一段代码逻辑（修改逻辑）
     }
   }
}
-->
<div id="app">
    姓：<input type="text" v-model="firstName"> +
    名：<input type="text" v-model="lastName"> =
    <span>{{ fullName }}</span><br><br>

    <button @click="changeName">改名卡</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            firstName: '刘',
            lastName: '备',
        },
        methods: {
            changeName () {
                this.fullName = '黄忠'
            }
        },
        computed: {
            // 简写 → 获取，没有配置设置的逻辑
            // fullName () {
            //   return this.firstName + this.lastName
            // }

            // 完整写法 → 获取 + 设置
            fullName: {
                // (1) 当fullName计算属性，被获取求值时，执行get（有缓存，优先读缓存）
                //     会将返回值作为，求值的结果
                get () {
                    return this.firstName + this.lastName
                },
                // (2) 当fullName计算属性，被修改赋值时，执行set
                //     修改的值，传递给set方法的形参
                set (value) {
                    // console.log(value.slice(0, 1))
                    // console.log(value.slice(1))
                    this.firstName = value.slice(0, 1)
                    this.lastName = value.slice(1)
                }
            }
        }
    })
</script>
</body>
</html>

9.watch监听器

watch是一种用于监视数据变化并执行相应操作的机制，它通常用于Vue.js框架中，可以监视vue实例中的数据变化，并在数据变化时，执行相应的回调函数或触发其他操作；
在Vue.js中，可以通过在Vue实例的选项中定义一个watch对象来使用watch监视，watch对象的属性是要监视的数据属性，值是一个回调函数，用于在数据变化时执行相应的操作。

9.1 watch监听器（监视器）

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>08.watch侦听器（监视器）</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-size: 18px;
        }
        #app {
            padding: 10px 20px;
        }
        .query {
            margin: 10px 0;
        }
        .box {
            display: flex;
        }
        textarea {
            width: 300px;
            height: 160px;
            font-size: 18px;
            border: 1px solid #dedede;
            outline: none;
            resize: none;
            padding: 10px;
        }
        textarea:hover {
            border: 1px solid #1589f5;
        }
        .transbox {
            width: 300px;
            height: 160px;
            background-color: #f0f0f0;
            padding: 10px;
            border: none;
        }
        .tip-box {
            width: 300px;
            height: 25px;
            line-height: 25px;
            display: flex;
        }
        .tip-box span {
            flex: 1;
            text-align: center;
        }
        .query span {
            font-size: 18px;
        }

        .input-wrap {
            position: relative;
        }
        .input-wrap span {
            position: absolute;
            right: 15px;
            bottom: 15px;
            font-size: 12px;
        }
        .input-wrap i {
            font-size: 20px;
            font-style: normal;
        }
    </style>
</head>
<body>
<!--watch侦听器（监视器）
作用：监视数据变化，执行一些业务逻辑或异步操作
语法：
（1）简单写法->简单类型数据，直接监视
data:{
  word:'苹果',
  obj:{
     words:'苹果'
  }
},
watch:{
  //该方法会在数据变化时，触发执行
  数据属性名(newValue,oldValue){
    一些业务逻辑 或 异步操作
  },
  对象.属性名(newValue,oldValue){
    一些业务逻辑  或 异步操作
  }
}
（2）完整写法->添加额外配置项

-->

<div id="app">
    <!-- 条件选择框 -->
    <div class="query">
        <span>翻译成的语言：</span>
        <select>
            <option value="italy">意大利</option>
            <option value="english">英语</option>
            <option value="german">德语</option>
        </select>
    </div>

    <!-- 翻译框 -->
    <div class="box">
        <div class="input-wrap">
            <textarea v-model="obj.words"></textarea>
            <span><i>⌨️</i>文档翻译</span>
        </div>
        <div class="output-wrap">
            <div class="transbox">mela</div>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    // 接口地址：https://applet-base-api-t.itheima.net/api/translate
    // 请求方式：get
    // 请求参数：
    // （1）words：需要被翻译的文本（必传）
    // （2）lang： 需要被翻译成的语言（可选）默认值-意大利
    // -----------------------------------------------

    const app = new Vue({
        el: '#app',
        data: {
            // words: ''
            obj: {
                words: ''
            }
        },
        // 具体讲解：(1) watch语法 (2) 具体业务实现
        watch: {
            // 该方法会在数据变化时调用执行
            // newValue新值, oldValue老值（一般不用）
            // words (newValue) {
            //   console.log('变化了', newValue)
            // }
//用于监视obj中的words数据值的变化，如果变化了就执行console.log(...)方法,注意此处属性名监视属性要使用单引号''包裹，具体是否使用''或反引号``包裹看下面图片内容；
            'obj.words' (newValue) {
                console.log('变化了', newValue)
            }
        }
    })
</script>
</body>
</html>

在这里插入图片描述

9.2 watch监听器（简写）

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>08.watch简写-业务实现</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-size: 18px;
        }
        #app {
            padding: 10px 20px;
        }
        .query {
            margin: 10px 0;
        }
        .box {
            display: flex;
        }
        textarea {
            width: 300px;
            height: 160px;
            font-size: 18px;
            border: 1px solid #dedede;
            outline: none;
            resize: none;
            padding: 10px;
        }
        textarea:hover {
            border: 1px solid #1589f5;
        }
        .transbox {
            width: 300px;
            height: 160px;
            background-color: #f0f0f0;
            padding: 10px;
            border: none;
        }
        .tip-box {
            width: 300px;
            height: 25px;
            line-height: 25px;
            display: flex;
        }
        .tip-box span {
            flex: 1;
            text-align: center;
        }
        .query span {
            font-size: 18px;
        }

        .input-wrap {
            position: relative;
        }
        .input-wrap span {
            position: absolute;
            right: 15px;
            bottom: 15px;
            font-size: 12px;
        }
        .input-wrap i {
            font-size: 20px;
            font-style: normal;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 条件选择框 -->
    <div class="query">
        <span>翻译成的语言：</span>
        <select>
            <option value="italy">意大利</option>
            <option value="english">英语</option>
            <option value="german">德语</option>
        </select>
    </div>

    <!-- 翻译框 -->
    <div class="box">
        <div class="input-wrap">
            <textarea v-model="obj.words"></textarea>
            <span><i>⌨️</i>文档翻译</span>
        </div>
        <div class="output-wrap">
            <div class="transbox">{{ result }}</div>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    // 接口地址：https://applet-base-api-t.itheima.net/api/translate
    // 请求方式：get
    // 请求参数：
    // （1）words：需要被翻译的文本（必传）
    // （2）lang： 需要被翻译成的语言（可选）默认值-意大利
    // -----------------------------------------------

    const app = new Vue({
        el: '#app',
        data: {
            // words: ''
            obj: {
                words: ''
            },
            result: '', // 翻译结果
            // timer: null // 延时器id
        },
        // 具体讲解：(1) watch语法 (2) 具体业务实现
        watch: {
            // 该方法会在数据变化时调用执行
            // newValue新值, oldValue老值（一般不用）
            // words (newValue) {
            //   console.log('变化了', newValue)
            // }

            'obj.words' (newValue) {
                // console.log('变化了', newValue)
                // 防抖: 延迟执行 → 干啥事先等一等，延迟一会，一段时间内没有再次触发，才执行
                clearTimeout(this.timer)
                this.timer = setTimeout(async () => {
                    const res = await axios({
                        url: 'https://applet-base-api-t.itheima.net/api/translate',
                        params: {
                            words: newValue
                        }
                    })
                    this.result = res.data.data
                    console.log(res.data.data)
                }, 300)
            }
        }
    })
</script>
</body>
</html>

9.3 watch监听器（完整写法）

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>08.watch侦听器完整写法</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-size: 18px;
        }
        #app {
            padding: 10px 20px;
        }
        .query {
            margin: 10px 0;
        }
        .box {
            display: flex;
        }
        textarea {
            width: 300px;
            height: 160px;
            font-size: 18px;
            border: 1px solid #dedede;
            outline: none;
            resize: none;
            padding: 10px;
        }
        textarea:hover {
            border: 1px solid #1589f5;
        }
        .transbox {
            width: 300px;
            height: 160px;
            background-color: #f0f0f0;
            padding: 10px;
            border: none;
        }
        .tip-box {
            width: 300px;
            height: 25px;
            line-height: 25px;
            display: flex;
        }
        .tip-box span {
            flex: 1;
            text-align: center;
        }
        .query span {
            font-size: 18px;
        }

        .input-wrap {
            position: relative;
        }
        .input-wrap span {
            position: absolute;
            right: 15px;
            bottom: 15px;
            font-size: 12px;
        }
        .input-wrap i {
            font-size: 20px;
            font-style: normal;
        }
    </style>
</head>
<body>
<!--watch侦听器完整写法->添加额外配置项
（1）deep:true对复杂类型深度监视
（2）immediate:true初始化立刻执行一次handler方法
-->
<!--
data:{
 obj:{
   words:'苹果',
   lang:'italy'
 },
},
watch:{  //watch完整写法
 数据属性名:{
   deep:true,//深度监视
   handler(newValue){
     console.log(newValue)
   }
 }
}
-->
<div id="app">
    <!-- 条件选择框 -->
    <div class="query">
        <span>翻译成的语言：</span>
        <select v-model="obj.lang">
            <option value="italy">意大利</option>
            <option value="english">英语</option>
            <option value="german">德语</option>
        </select>
    </div>

    <!-- 翻译框 -->
    <div class="box">
        <div class="input-wrap">
            <textarea v-model="obj.words"></textarea>
            <span><i>⌨️</i>文档翻译</span>
        </div>
        <div class="output-wrap">
            <div class="transbox">{{ result }}</div>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    // 需求：输入内容，修改语言，都实时翻译

    // 接口地址：https://applet-base-api-t.itheima.net/api/translate
    // 请求方式：get
    // 请求参数：
    // （1）words：需要被翻译的文本（必传）
    // （2）lang： 需要被翻译成的语言（可选）默认值-意大利
    // -----------------------------------------------

    const app = new Vue({
        el: '#app',
        data: {
            obj: {
                words: '小黑',
                lang: 'italy'
            },
            result: '', // 翻译结果
        },
        watch: {
            obj: {
                deep: true, // 深度监视（对象中的数据可以全部进行监视）
                immediate: true, // 立刻执行，一进入页面handler就立刻执行一次
                handler (newValue) {
                    clearTimeout(this.timer)
                    this.timer = setTimeout(async () => {
                        const res = await axios({
                            url: 'https://applet-base-api-t.itheima.net/api/translate',
                            params: newValue
                        })
                        this.result = res.data.data
                        console.log(res.data.data)
                    }, 300)
                }
            }


            // 'obj.words' (newValue) {
            //   clearTimeout(this.timer)
            //   this.timer = setTimeout(async () => {
            //     const res = await axios({
            //       url: 'https://applet-base-api-t.itheima.net/api/translate',
            //       params: {
            //         words: newValue
            //       }
            //     })
            //     this.result = res.data.data
            //     console.log(res.data.data)
            //   }, 300)
            // }
        }
    })
</script>
</body>
</html>

10. Vue的生命周期

10.1 vue的四个生命周期

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>01.Vue生命周期（4个阶段）</title>
</head>
<body>
<!--vue生命周期：一个Vue实例从创建到销毁的整个过程；
生命周期的四个阶段：（1）创建；（2）挂载；（3）更新；（4）销毁
（1）创建阶段：new VUe(),初始化操作，将普通数据转化为响应式数据；
（2）挂载阶段：渲染模板，将数据放到标签模板中；
（3）更新阶段：数据修改，更新视图（用户使用）；
（4）销毁阶段：浏览器关闭；-->
<!--1）发初始化渲染请求要在创建阶段的最后，响应式数据完成之后才可以；
    2）操作dom：挂载阶段结束之后，模板数据渲染后；-->


<!--Vue生命周期函数（钩子函数）-->
<!--Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】，让开发者可以在【特定阶段】运行自己的代码。-->
<!--在生命周期4个阶段中会vue提供8个函数（钩子函数），分别位于每个阶段的前和后，每个钩子函数中可以写自己要执行的逻辑代码，这样可以实现开发者在特定阶段执行想要执行的代码-->
<!--钩子函数：就是承载vue生命周期中每个阶段要执行的代码，例如：在创建阶段后的钩子函数中可以写发送初始化请求的代码、在挂载阶段后可以写操作dom的代码-->
<!--钩子函数（8个）：
（1）before Create：
（2）created（常用）：发送初始化，渲染请求；
（3）before Mount
（4）mounted（常用）：操作dom
（5）before Update
（6）updated
（7）before Destroy：释放Vue以外的资源（清除定时器，延时器...（会配合组件使用））
（8）destroyed：销毁Vue实例
-->

<div id="app">
    <h3>{{title}}</h3>
    <div>
        <button @click="count--">-</button>
        <span>{{count}}</span>
        <button @click="count++">+</button>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            count: 100,
            title: '计数器'
        },
        //    1.创建阶段（准备阶段）
        beforeCreate() {
            console.log("beforeCreate 响应式数据准备好之前")
        },
        created() {
            console.log("created 响应式数据准备好之后",this.count)

            //this.数据名=请求回来的数据
        //    可以开始发送初始化渲染的请求
        },
        //    2.挂载阶段（渲染阶段）
        beforeMount() {
            console.log("beforeMount 模板渲染之前",document.querySelector('h3').innerHTML)
        },
        mounted() {
            console.log("mounted 模板渲染之后",document.querySelector('h3').innerHTML)
        },
        //    3.更新阶段
        beforeUpdate(){
            console.log("beforeUpdate 更新阶段之前（数据修改了，但视图还没更新）",document.querySelector('h3').innerHTML)
        },
        updated(){
            console.log("updated 更新之后（数据修改了，视图也更新了）",document.querySelector('h3').innerHTML)
        },

        //    4.销毁阶段
        beforeDestory() {
            console.log("beforeDestory (卸载vue实例)")
        },
        destoryed() {
            console.log("destoryed 销毁之后")
        }
    })
</script>
</body>
</html>

10.2 vue的生命周期—created

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>02.created应用</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .news {
            display: flex;
            height: 120px;
            width: 600px;
            margin: 0 auto;
            padding: 20px 0;
            cursor: pointer;
        }

        .news .left {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding-right: 10px;
        }

        .news .left .title {
            font-size: 20px;
        }

        .news .left .info {
            color: #999999;
        }

        .news .left .info span {
            margin-right: 20px;
        }

        .news .right {
            width: 160px;
            height: 120px;
        }

        .news .right img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
    <!--    created：响应式数据准备好了，可以开始发送初始化渲染请求-->
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(item,index) in list" :key="item.id" class="news">
            <div class="left">
                <div class="title">{{item.title}}</div>
                <div class="info">
                    <span>{{item.source}}</span>
                    <span>{{item.time}}</span>
                </div>
            </div>
            <div class="right">
                <img src="item.img" alt="">
            </div>
        </li>
    </ul>
</div>
<script src="./tools/vue.js"></script>
<script src="./tools/axios.js"></script>
<script>
    // 接口地址：http://hmajax.itheima.net/api/news
    // 请求方式：get
    const app = new Vue({
        el: '#app',
        data: {
            list: []
        },
        async created(){
            //1.发送请求，获取数据
            const res=await  axios.get('http://hmajax.itheima.net/api/news')
            //2.将数据更新给data中的list
            this.list=res.data.data
            // console.log(res)
        }
    })
</script>
</body>
</html>

10.3 vue的生命周期—mounted

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>03.mounted应用</title>
    <!--    mounted：模板渲染完成，可以开始操作DOM-->
    <!--    在mounted完成之后，就代表着dom模板已经渲染完成了,才可以操作dom-->
    <!-- 初始化样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset.css@2.0.2/reset.min.css">
    <!-- 核心样式 -->
    <style>
        html,
        body {
            height: 100%;
        }

        .search-container {
            position: absolute;
            top: 30%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }

        .search-container .search-box {
            display: flex;
        }

        .search-container img {
            margin-bottom: 30px;
        }

        .search-container .search-box input {
            width: 512px;
            height: 16px;
            padding: 12px 16px;
            font-size: 16px;
            margin: 0;
            vertical-align: top;
            outline: 0;
            box-shadow: none;
            border-radius: 10px 0 0 10px;
            border: 2px solid #c4c7ce;
            background: #fff;
            color: #222;
            overflow: hidden;
            box-sizing: content-box;
            -webkit-tap-highlight-color: transparent;
        }

        .search-container .search-box button {
            cursor: pointer;
            width: 112px;
            height: 44px;
            line-height: 41px;
            line-height: 42px;
            background-color: #ad2a27;
            border-radius: 0 10px 10px 0;
            font-size: 17px;
            box-shadow: none;
            font-weight: 400;
            border: 0;
            outline: 0;
            letter-spacing: normal;
            color: white;
        }

        body {
            background: no-repeat center /cover;
            background-color: #edf0f5;
        }
    </style>
</head>
<body>
<div class="container" id="app">
    <div class="search-container">
        <img src="https://www.itheima.com/images/logo.png" alt="">
        <div class="search-box">
            <input type="text" v-model="words" id="inp">
            <button>搜索一下</button>
        </div>
    </div>
</div>

<script src="./vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            words: ''
        },
        //    核心思路：
        //    1.等输入框渲染出来

        //    2.让输入框获取焦点
        mounted() {
            console.log(document.querySelector('#inp'));
            document.querySelector('#inp').focus()
        }
    })
    </script>
</body>
</html>

10.4 案例-yueyue记账清单

10.4.1 需求介绍

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>04.yueyue记账清单</title>
<!--    yueyue记账清单
   功能需求：
    （1）基本渲染；
    （2）添加功能；
    （3）删除功能；
    （4）饼图渲染；
    -->
    <!-- CSS only -->
    <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
    />
    <style>
        .red {
            color: red!important;
        }
        .search {
            width: 300px;
            margin: 20px 0;
        }
        .my-form {
            display: flex;
            margin: 20px 0;
        }
        .my-form input {
            flex: 1;
            margin-right: 20px;
        }
        .table > :not(:first-child) {
            border-top: none;
        }
        .contain {
            display: flex;
            padding: 10px;
        }
        .list-box {
            flex: 1;
            padding: 0 30px;
        }
        .list-box  a {
            text-decoration: none;
        }
        .echarts-box {
            width: 600px;
            height: 400px;
            padding: 30px;
            margin: 0 auto;
            border: 1px solid #ccc;
        }
        tfoot {
            font-weight: bold;
        }
        @media screen and (max-width: 1000px) {
            .contain {
                flex-wrap: wrap;
            }
            .list-box {
                width: 100%;
            }
            .echarts-box {
                margin-top: 30px;
            }
        }
    </style>
</head>
<body>
<div id="app">
    <div class="contain">
        <!-- 左侧列表 -->
        <div class="list-box">

            <!-- 添加资产 -->
            <form class="my-form">
                <input type="text" class="form-control" placeholder="消费名称" />
                <input type="text" class="form-control" placeholder="消费价格" />
                <button type="button" class="btn btn-primary">添加账单</button>
            </form>

            <table class="table table-hover">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>消费名称</th>
                    <th>消费价格</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>1</td>
                    <td>帽子</td>
                    <td>99.00</td>
                    <td><a href="javascript:;">删除</a></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>大衣</td>
                    <td class="red">199.00</td>
                    <td><a href="javascript:;">删除</a></td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="4">消费总计： 298.00</td>
                </tr>
                </tfoot>
            </table>
        </div>

        <!-- 右侧图表 -->
        <div class="echarts-box" id="main"></div>
    </div>
</div>
<script src="../echarts.min.js"></script>
<script src="../vue.js"></script>
<script src="../axios.js"></script>
<script>
    /**
     * 接口文档地址：
     * https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058
     *
     * 功能需求：
     * 1. 基本渲染
     * 2. 添加功能
     * 3. 删除功能
     * 4. 饼图渲染
     */
    const app = new Vue({
        el: '#app',
        data: {

        },
    })
</script>
</body>
</html>

10.4.2 删除功能

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>04.yueyue记账清单-删除功能</title>
    <!-- CSS only -->
    <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
    />
    <style>
        .red {
            color: red!important;
        }
        .search {
            width: 300px;
            margin: 20px 0;
        }
        .my-form {
            display: flex;
            margin: 20px 0;
        }
        .my-form input {
            flex: 1;
            margin-right: 20px;
        }
        .table > :not(:first-child) {
            border-top: none;
        }
        .contain {
            display: flex;
            padding: 10px;
        }
        .list-box {
            flex: 1;
            padding: 0 30px;
        }
        .list-box  a {
            text-decoration: none;
        }
        .echarts-box {
            width: 600px;
            height: 400px;
            padding: 30px;
            margin: 0 auto;
            border: 1px solid #ccc;
        }
        tfoot {
            font-weight: bold;
        }
        @media screen and (max-width: 1000px) {
            .contain {
                flex-wrap: wrap;
            }
            .list-box {
                width: 100%;
            }
            .echarts-box {
                margin-top: 30px;
            }
        }
    </style>
</head>
<body>
<div id="app">
    <div class="contain">
        <!-- 左侧列表 -->
        <div class="list-box">

            <!-- 添加资产 -->
            <form class="my-form">
                <input v-model.trim="name" type="text" class="form-control" placeholder="消费名称" />
                <input v-model.number="price" type="text" class="form-control" placeholder="消费价格" />
                <button @click="add" type="button" class="btn btn-primary">添加账单</button>
            </form>

            <table class="table table-hover">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>消费名称</th>
                    <th>消费价格</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item, index) in list" :key="item.id">
                    <td>{{ index + 1 }}</td>
                    <td>{{ item.name }}</td>
                    <td :class="{ red: item.price > 500 }">{{ item.price.toFixed(2) }}</td>
                    <td><a @click="del(item.id)" href="javascript:;">删除</a></td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="4">消费总计： {{ totalPrice.toFixed(2) }}</td>
                </tr>
                </tfoot>
            </table>
        </div>

        <!-- 右侧图表 -->
        <div class="echarts-box" id="main"></div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    /**
     * 接口文档地址：
     * https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058
     *
     * 功能需求：
     * 1. 基本渲染
     *    (1) 立刻发送请求获取数据 created
     *    (2) 拿到数据，存到data的响应式数据中
     *    (3) 结合数据，进行渲染 v-for
     *    (4) 消费统计 => 计算属性
     * 2. 添加功能
     *    (1) 收集表单数据 v-model
     *    (2) 给添加按钮注册点击事件，发送添加请求
     *    (3) 需要重新渲染
     * 3. 删除功能
     *    (1) 注册点击事件，传参传 id
     *    (2) 根据 id 发送删除请求
     *    (3) 需要重新渲染
     * 4. 饼图渲染
     */
    const app = new Vue({
        el: '#app',
        data: {
            list: [],
            name: '',
            price: ''
        },
        computed: {
            totalPrice () {
                return this.list.reduce((sum, item) => sum + item.price, 0)
            }
        },
        created () {
            // const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
            //   params: {
            //     creator: '小黑'
            //   }
            // })
            // this.list = res.data.data

            this.getList()
        },
        methods: {
            async getList () {
                const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
                    params: {
                        creator: '小黑'
                    }
                })
                this.list = res.data.data
            },
            async add () {
                if (!this.name) {
                    alert('请输入消费名称')
                    return
                }
                if (typeof this.price !== 'number') {
                    alert('请输入正确的消费价格')
                    return
                }

                // 发送添加请求
                const res = await axios.post('https://applet-base-api-t.itheima.net/bill', {
                    creator: '小黑',
                    name: this.name,
                    price: this.price
                })
                // 重新渲染一次
                this.getList()

                this.name = ''
                this.price = ''
            },
            async del (id) {
                // 根据 id 发送删除请求
                const res = await axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`)
                // 重新渲染
                this.getList()
            }
        }
    })
</script>
</body>
</html>

10.4.3 基本渲染

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>yueyue记账清单-基本渲染</title>
    <!-- CSS only -->
    <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
    />
    <style>
        .red {
            color: red!important;
        }
        .search {
            width: 300px;
            margin: 20px 0;
        }
        .my-form {
            display: flex;
            margin: 20px 0;
        }
        .my-form input {
            flex: 1;
            margin-right: 20px;
        }
        .table > :not(:first-child) {
            border-top: none;
        }
        .contain {
            display: flex;
            padding: 10px;
        }
        .list-box {
            flex: 1;
            padding: 0 30px;
        }
        .list-box  a {
            text-decoration: none;
        }
        .echarts-box {
            width: 600px;
            height: 400px;
            padding: 30px;
            margin: 0 auto;
            border: 1px solid #ccc;
        }
        tfoot {
            font-weight: bold;
        }
        @media screen and (max-width: 1000px) {
            .contain {
                flex-wrap: wrap;
            }
            .list-box {
                width: 100%;
            }
            .echarts-box {
                margin-top: 30px;
            }
        }
    </style>
</head>
<body>
<div id="app">
    <div class="contain">
        <!-- 左侧列表 -->
        <div class="list-box">

            <!-- 添加资产 -->
            <form class="my-form">
                <input type="text" class="form-control" placeholder="消费名称" />
                <input type="text" class="form-control" placeholder="消费价格" />
                <button type="button" class="btn btn-primary">添加账单</button>
            </form>

            <table class="table table-hover">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>消费名称</th>
                    <th>消费价格</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item, index) in list" :key="item.id">
                    <td>{{ index + 1 }}</td>
                    <td>{{ item.name }}</td>
                    <td :class="{ red: item.price > 500 }">{{ item.price.toFixed(2) }}</td>
                    <td><a href="javascript:;">删除</a></td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="4">消费总计： {{ totalPrice.toFixed(2) }}</td>
                </tr>
                </tfoot>
            </table>
        </div>

        <!-- 右侧图表 -->
        <div class="echarts-box" id="main"></div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    /**
     * 接口文档地址：
     * https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058
     *
     * 功能需求：
     * 1. 基本渲染
     *    (1) 立刻发送请求获取数据 created
     *    (2) 拿到数据，存到data的响应式数据中
     *    (3) 结合数据，进行渲染 v-for
     *    (4) 消费统计 => 计算属性
     * 2. 添加功能
     * 3. 删除功能
     * 4. 饼图渲染
     */
    const app = new Vue({
        el: '#app',
        data: {
            list: []
        },
        computed: {
            totalPrice () {
                return this.list.reduce((sum, item) => sum + item.price, 0)
            }
        },
        async created () {
            const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
                params: {
                    creator: 'yueyue'
                }
            })
            this.list = res.data.data
        }
    })
</script>
</body>
</html>

10.4.4 添加功能

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>04.yueyue记账清单-添加功能</title>
    <!-- CSS only -->
    <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
    />
    <style>
        .red {
            color: red!important;
        }
        .search {
            width: 300px;
            margin: 20px 0;
        }
        .my-form {
            display: flex;
            margin: 20px 0;
        }
        .my-form input {
            flex: 1;
            margin-right: 20px;
        }
        .table > :not(:first-child) {
            border-top: none;
        }
        .contain {
            display: flex;
            padding: 10px;
        }
        .list-box {
            flex: 1;
            padding: 0 30px;
        }
        .list-box  a {
            text-decoration: none;
        }
        .echarts-box {
            width: 600px;
            height: 400px;
            padding: 30px;
            margin: 0 auto;
            border: 1px solid #ccc;
        }
        tfoot {
            font-weight: bold;
        }
        @media screen and (max-width: 1000px) {
            .contain {
                flex-wrap: wrap;
            }
            .list-box {
                width: 100%;
            }
            .echarts-box {
                margin-top: 30px;
            }
        }
    </style>
</head>
<body>
<div id="app">
    <div class="contain">
        <!-- 左侧列表 -->
        <div class="list-box">

            <!-- 添加资产 -->
            <form class="my-form">
                <input v-model.trim="name" type="text" class="form-control" placeholder="消费名称" />
                <input v-model.number="price" type="text" class="form-control" placeholder="消费价格" />
                <button @click="add" type="button" class="btn btn-primary">添加账单</button>
            </form>

            <table class="table table-hover">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>消费名称</th>
                    <th>消费价格</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item, index) in list" :key="item.id">
                    <td>{{ index + 1 }}</td>
                    <td>{{ item.name }}</td>
                    <td :class="{ red: item.price > 500 }">{{ item.price.toFixed(2) }}</td>
                    <td><a href="javascript:;">删除</a></td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="4">消费总计： {{ totalPrice.toFixed(2) }}</td>
                </tr>
                </tfoot>
            </table>
        </div>

        <!-- 右侧图表 -->
        <div class="echarts-box" id="main"></div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    /**
     * 接口文档地址：
     * https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058
     *
     * 功能需求：
     * 1. 基本渲染
     *    (1) 立刻发送请求获取数据 created
     *    (2) 拿到数据，存到data的响应式数据中
     *    (3) 结合数据，进行渲染 v-for
     *    (4) 消费统计 => 计算属性
     * 2. 添加功能
     *    (1) 收集表单数据 v-model
     *    (2) 给添加按钮注册点击事件，发送添加请求
     *    (3) 需要重新渲染
     * 3. 删除功能
     * 4. 饼图渲染
     */
    const app = new Vue({
        el: '#app',
        data: {
            list: [],
            name: '',
            price: ''
        },
        computed: {
            totalPrice () {
                return this.list.reduce((sum, item) => sum + item.price, 0)
            }
        },
        created () {
            // const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
            //   params: {
            //     creator: '小黑'
            //   }
            // })
            // this.list = res.data.data

            this.getList()
        },
        methods: {
            async getList () {
                const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
                    params: {
                        creator: '小黑'
                    }
                })
                this.list = res.data.data
            },
            async add () {
                if (!this.name) {
                    alert('请输入消费名称')
                    return
                }
                if (typeof this.price !== 'number') {
                    alert('请输入正确的消费价格')
                    return
                }

                // 发送添加请求
                const res = await axios.post('https://applet-base-api-t.itheima.net/bill', {
                    creator: 'yueyue',
                    name: this.name,
                    price: this.price
                })
                // 重新渲染一次
                this.getList()

                this.name = ''
                this.price = ''
            }
        }
    })
</script>
</body>
</html>

10.4.5 静态结构

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>04.yueyue记账清单-静态结构</title>
    <!-- CSS only -->
    <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
    />
    <style>
        .red {
            color: red!important;
        }
        .search {
            width: 300px;
            margin: 20px 0;
        }
        .my-form {
            display: flex;
            margin: 20px 0;
        }
        .my-form input {
            flex: 1;
            margin-right: 20px;
        }
        .table > :not(:first-child) {
            border-top: none;
        }
        .contain {
            display: flex;
            padding: 10px;
        }
        .list-box {
            flex: 1;
            padding: 0 30px;
        }
        .list-box  a {
            text-decoration: none;
        }
        .echarts-box {
            width: 600px;
            height: 400px;
            padding: 30px;
            margin: 0 auto;
            border: 1px solid #ccc;
        }
        tfoot {
            font-weight: bold;
        }
        @media screen and (max-width: 1000px) {
            .contain {
                flex-wrap: wrap;
            }
            .list-box {
                width: 100%;
            }
            .echarts-box {
                margin-top: 30px;
            }
        }
    </style>
</head>
<body>
<div id="app">
    <div class="contain">
        <!-- 左侧列表 -->
        <div class="list-box">

            <!-- 添加资产 -->
            <form class="my-form">
                <input type="text" class="form-control" placeholder="消费名称" />
                <input type="text" class="form-control" placeholder="消费价格" />
                <button type="button" class="btn btn-primary">添加账单</button>
            </form>

            <table class="table table-hover">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>消费名称</th>
                    <th>消费价格</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>1</td>
                    <td>帽子</td>
                    <td>99.00</td>
                    <td><a href="javascript:;">删除</a></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>大衣</td>
                    <td class="red">199.00</td>
                    <td><a href="javascript:;">删除</a></td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="4">消费总计： 298.00</td>
                </tr>
                </tfoot>
            </table>
        </div>

        <!-- 右侧图表 -->
        <div class="echarts-box" id="main"></div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    /**
     * 接口文档地址：
     * https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058
     *
     * 功能需求：
     * 1. 基本渲染
     * 2. 添加功能
     * 3. 删除功能
     * 4. 饼图渲染
     */
    const app = new Vue({
        el: '#app',
        data: {

        },
    })
</script>
</body>
</html>

10.4.6 饼图渲染

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>04.yueyue记账清单-饼图渲染</title>
  <!-- CSS only -->
  <link
          rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
  />
  <style>
    .red {
      color: red!important;
    }
    .search {
      width: 300px;
      margin: 20px 0;
    }
    .my-form {
      display: flex;
      margin: 20px 0;
    }
    .my-form input {
      flex: 1;
      margin-right: 20px;
    }
    .table > :not(:first-child) {
      border-top: none;
    }
    .contain {
      display: flex;
      padding: 10px;
    }
    .list-box {
      flex: 1;
      padding: 0 30px;
    }
    .list-box  a {
      text-decoration: none;
    }
    .echarts-box {
      width: 600px;
      height: 400px;
      padding: 30px;
      margin: 0 auto;
      border: 1px solid #ccc;
    }
    tfoot {
      font-weight: bold;
    }
    @media screen and (max-width: 1000px) {
      .contain {
        flex-wrap: wrap;
      }
      .list-box {
        width: 100%;
      }
      .echarts-box {
        margin-top: 30px;
      }
    }
  </style>
</head>
<body>
<div id="app">
  <div class="contain">
    <!-- 左侧列表 -->
    <div class="list-box">

      <!-- 添加资产 -->
      <form class="my-form">
        <input v-model.trim="name" type="text" class="form-control" placeholder="消费名称" />
        <input v-model.number="price" type="text" class="form-control" placeholder="消费价格" />
        <button @click="add" type="button" class="btn btn-primary">添加账单</button>
      </form>

      <table class="table table-hover">
        <thead>
        <tr>
          <th>编号</th>
          <th>消费名称</th>
          <th>消费价格</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, index) in list" :key="item.id">
          <td>{{ index + 1 }}</td>
          <td>{{ item.name }}</td>
          <td :class="{ red: item.price > 500 }">{{ item.price.toFixed(2) }}</td>
          <td><a @click="del(item.id)" href="javascript:;">删除</a></td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
          <td colspan="4">消费总计： {{ totalPrice.toFixed(2) }}</td>
        </tr>
        </tfoot>
      </table>
    </div>

    <!-- 右侧图表 -->
    <div class="echarts-box" id="main"></div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
  /**
   * 接口文档地址：
   * https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058
   *
   * 功能需求：
   * 1. 基本渲染
   *    (1) 立刻发送请求获取数据 created
   *    (2) 拿到数据，存到data的响应式数据中
   *    (3) 结合数据，进行渲染 v-for
   *    (4) 消费统计 => 计算属性
   * 2. 添加功能
   *    (1) 收集表单数据 v-model
   *    (2) 给添加按钮注册点击事件，发送添加请求
   *    (3) 需要重新渲染
   * 3. 删除功能
   *    (1) 注册点击事件，传参传 id
   *    (2) 根据 id 发送删除请求
   *    (3) 需要重新渲染
   * 4. 饼图渲染
   *    (1) 初始化一个饼图 echarts.init(dom)  mounted钩子实现
   *    (2) 根据数据实时更新饼图 echarts.setOption({ ... })
   */
  const app = new Vue({
    el: '#app',
    data: {
      list: [],
      name: '',
      price: ''
    },
    computed: {
      totalPrice () {
        return this.list.reduce((sum, item) => sum + item.price, 0)
      }
    },
    created () {
      // const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
      //   params: {
      //     creator: '小黑'
      //   }
      // })
      // this.list = res.data.data

      this.getList()
    },
    mounted () {
      this.myChart = echarts.init(document.querySelector('#main'))
      this.myChart.setOption({
        // 大标题
        title: {
          text: '消费账单列表',
          left: 'center'
        },
        // 提示框
        tooltip: {
          trigger: 'item'
        },
        // 图例
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        // 数据项
        series: [
          {
            name: '消费账单',
            type: 'pie',
            radius: '50%', // 饼的半径
            data: [
              // { value: 1048, name: '球鞋' },
              // { value: 735, name: '防晒霜' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    },

    methods: {
      async getList () {
        const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
          params: {
            creator: '小黑'
          }
        })
        this.list = res.data.data

        // 更新图表
        this.myChart.setOption({
          // 数据项
          series: [
            {
              // data: [
              //   { value: 1048, name: '球鞋' },
              //   { value: 735, name: '防晒霜' }
              // ]
              data: this.list.map(item => ({ value: item.price, name: item.name}))
            }
          ]
        })
      },
      async add () {
        if (!this.name) {
          alert('请输入消费名称')
          return
        }
        if (typeof this.price !== 'number') {
          alert('请输入正确的消费价格')
          return
        }

        // 发送添加请求
        const res = await axios.post('https://applet-base-api-t.itheima.net/bill', {
          creator: '小黑',
          name: this.name,
          price: this.price
        })
        // 重新渲染一次
        this.getList()

        this.name = ''
        this.price = ''
      },
      async del (id) {
        // 根据 id 发送删除请求
        const res = await axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`)
        // 重新渲染
        this.getList()
      }
    }
  })
</script>
</body>
</html>
沪漂豫姑娘～
关注
专栏目录
vue的第一个版本
weixin_39349045的博客
09-26 103
vue create miaomiao
Vue.js学习
qingemengyue的博客
07-03 482
vue.js是一个JavaScript MVVM库。MVVM模式 ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。 首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。 从View侧看，ViewM
手把手教你用EZDML批量生成vue-element-admin前端页面代码
huzgd的专栏
02-20 1780
EZDML 3.26增加了vue-element-admin示例生成模板，本文就以它来讲解示范，如何从零开始用EZDML批量生成代码。
vue-element-admin的讲解
qq_51269815的博客
01-16 6446
一：文件结构讲解 1.文件价格 package.json文件防止模板所需要的各种依赖，npm install 就是安装这些 index.js文件放置的是路由 main.js文件放置初始化，加载所需要的插件 public下index.html 时一个模板文件，作用是生成项目的入口文件 二：登录模块 登录逻辑：当用户填写完账号密码后向服务端验证是否正确，验证通过后，服务端会返回一个token，拿到token后（可将token存到cookie中，保证页面刷新后可以记住用户登录状态），前端会根据token拉取一个
第一节 vue3 搭配 vue-cli vue-router 创建简易项目
muxianer的博客
03-14 2029
vue3 搭配 vue-cli vue-router 创建简易项目
使用vue实现grid-layout功能实例代码
08-28
onMouseDown 方法触发，在 `eventHandler` 中存储一些值之后，鼠标移动则触发 `onMouseMove` 方法，第一次进入时 `eventHandler.drag` 为 `false`，其中 `isDrag` 方法会根据位移来判断是否是拖拽行为（横向或纵向...
vue-next-libs-course:vue 3小视频
04-03
"vue-next-libs-course:vue 3小视频" 指的可能是一个教学课程，专注于讲解如何在Vue 3中使用最新的库和工具。 在项目设置中，`npm install` 是Node.js的包管理器命令，用于安装项目依赖。在Vue项目中，这会根据`...
图文讲解vue的v-if使用方法
10-17
然后刷新页面，Vue会重新评估`v-if`和`v-else`，此时`v-if`的条件不满足，所以第一个`div`不再渲染，而`v-else`的`div`因为其条件满足，所以会被渲染出来，显示文本“当flage为false时显示”。 `v-if`还有几个扩展...
大屏可视化项目之vue3-seamless-scroll无缝滚动组件（一）——基本使用_vue seamless scroll官网
2401_84411822的博客
04-27 2532
,setup() {title: “Vue3.0 无缝滚动组件展示数据第1条”,},title: “Vue3.0 无缝滚动组件展示数据第2条”,},title: “Vue3.0 无缝滚动组件展示数据第3条”,},title: “Vue3.0 无缝滚动组件展示数据第4条”,},title: “Vue3.0 无缝滚动组件展示数据第5条”,},title: “Vue3.0 无缝滚动组件展示数据第6条”,},
ppt课件-第1章 Vue入门.zip
03-22
本课件“第1章 Vue入门.pptx”将详细介绍以上概念，通过实例演示如何在实际项目中应用Vue.js，为学习者提供一个良好的起点，进一步深入探索这个强大的前端框架。无论是前端开发者还是希望转行进入Web开发的人，都能...
Vue使用query传参Boolean类型，刷新之后转换为String问题
q879936814的博客
09-12 377
要解决这个问题，不能直接Boolean处理，因为如果传入false，那么转换成字符串，Boolean(‘false’)会变成true；做项目时发现第一次进入页面时传参是正常的Boolean类型，刷新之后变成了String，这是浏览器进行的一次强制转换；解决方法：使用JSON.parse处理参数。
Vue CLI：初学者指南与深入理解
x15514104477的博客
09-10 1031
本文为初学者提供了一个关于如何使用 Vue CLI 的指南，并帮助读者深入理解其核心概念。Vue CLI 是一个用于快速搭建 Vue.js 项目的命令行工具，适用于所有水平的开发者。
Vue Router push方法的使用
最新发布
ithongchou的博客
09-13 700
是一个用于编程式导航的方法，它可以将用户导航到应用中的不同路由。它提供了灵活的路由控制能力，允许你在应用的逻辑中进行路由操作，例如在用户交互后进行页面跳转。
element-plus组件问题汇总
xiaoxian_xian的博客
09-12 382
element-plus组件问题汇总
美术|基于java+vue的美术外包管理信息系统(源码+数据库+文档)
weixin_66413741的博客
09-10 937
游戏美术管理信息系统。该系统基于B/S即所谓浏览器/服务器模式，应用java技术，选择MySQL作为后台数据库。系统主要包括系统首页，个人中心，用户管理，公司管理，作品信息管理，作品订单管理，外包需求管理，外包应征管理，流程追踪管理，在线交流管理，在线回复管理，管理员管理，留言反馈，系统管理等功能模块。本文首先介绍了游戏美术外包管理信息技术发展背景与发展现状，然后遵循软件常规开发流程，首先针对系统选取适用的语言和开发平台，
Vue接入高德地图并实现基本的路线规划功能
黄团团的个人博客
09-11 526
找到public目录下的index.html文件，把刚才申请好的2个密钥分别粘贴进去，第一个securityJsCode是填入安全密钥，第二个红框是填入Key。登录高德开放平台，点击我的应用，先添加新应用，然后再添加Key。如图所示填写对应的信息，系统就会自动生成。
有关 Element-ui 的一些思考
小白小白从不日别的博客
09-11 703
这里列举了一些我们在使用element-ui时的一些实用技巧，比如主题样式修改、el-form-item label宽度自适应等
大文件切片上传-vue3.0
m0_56416159的博客
09-12 521
大文件切片上传（也称为分片上传）是一种处理大文件上传的有效方法，它通过将大文件分割成多个较小的部分（即切片或分片），然后分别上传这些切片到服务器，最后在服务器上将这些切片合并成原始文件。以下是关于大文件切片上传的详细步骤和注意事项。onUploadInit： 文件初始化调用接口，用于后端创建存放切片文件的文件夹。SparkMD5：生成文件唯一的hash，用来验证文件的完整性。onUploadFinish：文件上传完成验证完整性的接口。onUploadChunk：分片上传接口。基于vue3.0代码实现。
Ai+若依（智能售货机运营管理系统---帝可得）--货道关联商品【08篇---0004：关联商品】
qq_60281421的博客
09-11 515
Ai+若依（智能售货机运营管理系统---帝可得）--货道关联商品【08篇---0004：关联商品】
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值