Vue生命周期--四大阶段--8个钩子之mounted钩子的渲染

Vue生命周期:一个Vue实例从创建到销毁的整个过程。

生命周期四个阶段:创建(响应式数据)->挂载(渲染模板)->更新(修改数据,更新视图)->销毁(销毁实例)

eg:

const app = new Vue({
        el: '#app',
        data: {
            number: 33
        },
        //1.创建阶段(准备数据)
        beforeCreate(){//创建之前,还不能发送初始化的请求

        },
        created(){//创建之后,可以发送

        },
        //2.挂载阶段(渲染模板)
        beforeMount(){

        },
        mounted(){//开始操作dom

        },
        //3.更新阶段(修改数据->更新视图【才会触发这个阶段】)
        beforeUpdate(){

        },
        updated(){

        },
        //卸载阶段
        beforeDestroy(){//释放Vue以外的资源(清除定时器,延时器...)

        },
        destroyed(){

        }
    })

案例——记事本!

1.成果展示

Vue生命周期--四大阶段--8个钩子之mounted钩子的渲染_第1张图片2.需求:商品的添加与删除;价格超过500标红;统计计算总消费;消费账单使用饼图展示

3.思路分析:

(1).基本渲染  

- 立刻发送请求获取数据 created

- 拿到数据,存到data的响应式数据中

- 结合数据,进行渲染 v-for

- 消费统计  —> 计算属性

(2).添加功能

- 收集表单数据 v-model;使用指令修饰符处理数据

- 给添加按钮注册点击事件,对输入的内容做非空判断,发送请求

- 请求成功后,对文本框内容进行清空

- 重新渲染列表(把created内容封装成方法)

(3).删除功能

- 注册点击事件,获取当前行的id

- 根据id发送删除请求

- 需要重新渲染

(4).饼图渲染

- 初始化一个饼图 echarts.init(dom)    dom需要在mounted钩子中渲染

- 根据数据试试更新饼图 echarts.setOptions({...})

你可能感兴趣的:(vue.js,javascript,前端)