Vue2基础四、生命周期

这篇具有很好参考价值的文章主要介绍了Vue2基础四、生命周期。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

零、文章目录

Vue2基础四、生命周期

1、生命周期

  • Vue生命周期:一个Vue实例从 创建销毁 的整个过程。
  • 生命周期四个阶段:① 创建 ② 挂载 ③ 更新 ④ 销毁
    • 创建阶段:创建响应式数据
    • 挂载阶段:渲染模板
    • 更新阶段:修改数据,更新视图
    • 销毁阶段:销毁Vue实例

Vue2基础四、生命周期,大前端,vue.js,javascript,前端

2、生命周期钩子

  • Vue生命周期过程中,会自动运行一些函数,被称为【生命周期钩子】
  • 让开发者可以在【特定阶段】运行自己的代码

Vue2基础四、生命周期,大前端,vue.js,javascript,前端

<!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>Document</title>
</head>

<body>

    <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 响应式数据准备好之前', this.count)
            },
            created() {
                console.log('created 响应式数据准备好之后', this.count)
                    // this.数据名 = 请求回来的数据
                    // 可以开始发送初始化渲染的请求了
            },

            // 2. 挂载阶段(渲染模板)
            beforeMount() {
                console.log('beforeMount 模板渲染之前', document.querySelector('h3').innerHTML)
            },
            mounted() {
                console.log('mounted 模板渲染之后', document.querySelector('h3').innerHTML)
                    // 可以开始操作dom了
            },

            // 3. 更新阶段(修改数据 → 更新视图)
            beforeUpdate() {
                console.log('beforeUpdate 数据修改了,视图还没更新', document.querySelector('span').innerHTML)
            },
            updated() {
                console.log('updated 数据修改了,视图已经更新', document.querySelector('span').innerHTML)
            },

            // 4. 卸载阶段
            beforeDestroy() {
                console.log('beforeDestroy, 卸载前')
                console.log('清除掉一些Vue以外的资源占用,定时器,延时器...')
            },
            destroyed() {
                console.log('destroyed,卸载后')
            }
        })
    </script>
</body>

</html>

3、案例-mounted获取焦点

  • mounted应用:输入框获取焦点

Vue2基础四、生命周期,大前端,vue.js,javascript,前端

<!DOCTYPE html>
<html lang="zh-CN">

<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>示例-获取焦点</title>
    <!-- 初始化样式 -->
    <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="./img/logo.png" alt="">
            <div class="search-box">
                <input type="text" v-model="words" id="inp">
                <button>百度一下</button>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                words: ''
            },
            // 核心思路:
            // 1. 等input框渲染出来 mounted 钩子
            // 2. 让input框获取焦点 inp.focus()
            mounted() {
                document.querySelector('#inp').focus()
            }
        })
    </script>

</body>

</html>

4、案例-小黑记账清单

(1)功能需求

Vue2基础四、生命周期,大前端,vue.js,javascript,前端

(2)实现细节

1.基本渲染

  • 拿到数据,存到data的响应式数据中
  • 结合数据,进行渲染 v-for
  • 消费统计 —> 计算属性

2.添加功能

  • 收集表单数据 v-model,使用指令修饰符处理数据
  • 给添加按钮注册点击事件,对输入的内容做非空判断
  • 添加成功后,对文本框内容进行清空

3.删除功能

  • 注册点击事件,获取当前行的id
  • 根据id删除数据

4.饼图渲染文章来源地址https://www.toymoban.com/news/detail-609854.html

  • 初始化一个饼图 echarts.init(dom) mounted钩子中渲染
  • 根据数据试试更新饼图 echarts.setOptions({…})
(3)代码实现
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</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>
        const app = new Vue({
            el: '#app',
            data: {
                list: JSON.parse(localStorage.getItem('list')) || [],
                name: '',
                price: ''
            },
            computed: {
                totalPrice() {
                    return this.list.reduce((sum, item) => sum + item.price, 0)
                }
            },
            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)'
                            }
                        }
                    }]
                })

                this.refreshChart()
            },
            watch: {
                //数据变化存入本地
                list: {
                    deep: true,
                    handler(newValue) {
                        // 需要将变化后的 newValue 存入本地 (转JSON)
                        localStorage.setItem('list', JSON.stringify(newValue))
                    }
                }
            },
            methods: {
                // 更新图表
                refreshChart() {
                    this.myChart.setOption({
                        // 数据项
                        series: [{
                            data: this.list.map(item => ({
                                value: item.price,
                                name: item.name
                            }))
                        }]
                    })
                },
                add() {
                    if (!this.name) {
                        alert('请输入消费名称')
                        return
                    }
                    if (typeof this.price !== 'number') {
                        alert('请输入正确的消费价格')
                        return
                    }

                    this.list.push({
                        id: new Date,
                        name: this.name,
                        price: this.price
                    })

                    // 重新渲染图标
                    this.refreshChart()

                    this.name = ''
                    this.price = ''
                },
                del(id) {

                    //删除数据
                    this.list = this.list.filter(item => item.id != id)

                    // 重新渲染图标
                    this.refreshChart()
                }
            }
        })
    </script>
</body>

</html>

到了这里,关于Vue2基础四、生命周期的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue2和Vue3生命周期映射关系及异同

    beforeCreate - 使用 setup() created - 使用 use setup() beforeMount -onBeforeMount mounted - onMounted beforeUpdate - onBeforeUpdate updated - onUpdated beforeDestroy- onBeforeUnmount destroyed -onUnmounted activated - onActivated deactivated - onDeactivated errorCaptured - onErrorCaptured beforeCreate - 使用 setup() 函数替代 Vue 2 中的 beforeCrea

    2024年01月24日
    浏览(42)
  • vue2 生命周期,工程化开发入门

    1.生命周期 生命周期介绍 生命周期的四个阶段 生命周期钩子 声明周期案例 2.工程化开发入门 工程化开发和脚手架 项目运行流程 组件化 组件注册 思考:什么时候可以发送初始化渲染请求?(越早越好)什么时候可以开始操作dom?(至少dom得渲染出来) Vue生命周期:就是一

    2024年02月11日
    浏览(57)
  • vue2的生命周期详解(代码演示+源码)

            生命周期是指从开始创建、初始化数据、编译模版、挂载 Dom - 渲染、更新 - 渲染、卸载等一系列过程,我们称这是 Vue 的生命周期,它主要强调一个时间段。用一句话来概括就是: Vue实例的生命周期: 从创建到销毁的整个过程 Vue框架内置函数,随着组件的生命周期阶

    2024年02月04日
    浏览(46)
  • Vue2 的@hook 、 hook: 与生命周期

    优点:简单易上手 缺点:此种方法子组件必须是自己编写的组件,若引用第三方库这种方式则不可行 官方文档并没有太多相关解释,只在处理边界情况 #程序化的事件侦听器— Vue.js (vuejs.org)里有出现。 子组件无需相关处理就能实现侦听,这块的实现原理可以从源码里探究部

    2024年02月05日
    浏览(45)
  • Vue2(生命周期,列表排序,计算属性和监听器)

    前言 上一章博客我们讲解了Vue基础 这一章我们来讲Vue生命周期,列表过滤,计算属性和监听器 一,生命周期 通常也叫生命周期回调函数、生命周期函数、生命周期钩子 vue初始化时在不同的阶段调用的不同函数 生命周期函数的 this 指向为vue实例,名字不能更改 1.1,生命周期函

    2024年02月13日
    浏览(49)
  • Vue2-收集表单数据、过滤器、内置指令与自定义指令、Vue生命周期

    🥔:我徒越万重山 千帆过 万木自逢春 更多Vue知识请点击——Vue.js 1、不同标签的value属性 若: input type=\\\"text\\\"/ 普通输入框,则v-model收集的是value值,用户输入的就是value值。 若: input type=\\\"radio\\\"/ 单选框,则v-model收集的是value值,且要给标签配置value值。 若: input type=\\\"checkb

    2024年02月13日
    浏览(43)
  • 【Vue2.0源码学习】生命周期篇-初始化阶段(initState)

    本篇文章介绍生命周期初始化阶段所调用的第五个初始化函数—— initState 。 从函数名字上来看,这个函数是用来初始化实例状态的,那么什么是实例的状态呢?在前面文章中我们略有提及,在我们日常开发中,在 Vue 组件中会写一些如 props 、 data 、 methods 、 computed 、 watc

    2024年02月09日
    浏览(52)
  • Vue2技能树(3)-声明式渲染、指令大全、生命周期函数

    👍 点赞,你的认可是我创作的动力! ⭐️ 收藏,你的青睐是我努力的方向! ✏️ 评论,你的意见是我进步的财富! Vue2技能树(1)-介绍、导入使用、响应式数据绑定、组件化开发 vue2技能树(2)-模板语法、vue的工具链、渐进式框架 Vue2技能树(3)-声明式渲染、指令大全、生命周

    2024年02月07日
    浏览(49)
  • 【Vue2.0源码学习】生命周期篇-初始化阶段(initInjections)

    本篇文章介绍生命周期初始化阶段所调用的第四个初始化函数—— initInjections 。从函数名字上来看,该函数是用来初始化实例中的 inject 选项的。说到 inject 选项,那必然离不开 provide 选项,这两个选项都是成对出现的,它们的作用是:允许一个祖先组件向其所有子孙后代注

    2024年02月09日
    浏览(48)
  • #Uniapp:uni-app中vue2生命周期--11个

    uni-app中vue2生命周期 生命周期钩子 描述 H5 App端 小程序 说明 beforeCreate 在实例初始化之后被调用 详情 √ √ √ created 在实例创建完成后被立即调用 详情 √ √ √ beforeMount 在挂载开始之前被调用 详情 √ √ √ mounted 挂载到实例上去之后调用 详情 注意:此处并不能确定子组件

    2024年02月02日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包