• 初识Vue--生命周期


    初学Vue,写一些随记谨防忘记,不足之处谢谢指出!!!

    本文可以直接复制自行创建一个HTML页面,查看结果。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>生命周期</title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <button @click="dom()">点击</button>
        <hr/>
        <button @click="del()">销毁</button>
        {{msg}}
    </div>
    </body>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg: "我爱学Vue!!!"
            },
    
            /*创建之前,$el(并未接管#app) $data均为undefined*/
            beforeCreate() {
                console.log("---------------beforeCreate----------------")
                console.log("el:" + this.$el)
                console.log(this.$el)
                console.log("data:" + this.$data)
                console.log(this.$data)
                console.log(this)
            },
    
            /*创建,$el为undefined(并未接管#app)  $data已获取数据*/
            created() {
                console.log("---------------created----------------")
                console.log("el:" + this.$el)
                console.log(this.$el)
                console.log("data:" + this.$data)
                console.log(this.$data)
            },
            /*挂载之前,$el已接管#app  $data获取数据  但是并未将数据渲染*/
            beforeMount() {
                console.log("---------------beforeMount----------------")
                console.log("el:" + this.$el.innerHTML)
                console.log(this.$el)
                console.log("data:" + this.$data)
                console.log(this.$data)
            },
            /*挂载之前,$el已接管#app  $data获取数据  并将数据渲染  页面成型*/
            mounted() {
                console.log("---------------mounted----------------")
                console.log("el:" + this.$el.innerHTML)
                console.log(this.$el)
                console.log("data:" + this.$data)
            },
            beforeUpdate() {
                console.log("---------------beforeUpdate----------------")
                console.log("el:" + this.$el.innerHTML)
                console.log(this.$el)
                console.log("data:" + this.$data)
                console.log(this.msg)
            },
            updated() {
                console.log("---------------updated----------------")
                console.log("el:" + this.$el.innerHTML)
                console.log(this.$el)
                console.log("data:" + this.$data)
                console.log(this.msg)
            },
            beforeDestroy() {
                console.log("---------------beforeDestroy----------------")
                console.log("el:" + this.$el.innerHTML)
                console.log(this.$el)
                console.log("data:" + this.$data)
                console.log(this.msg)
            },
            destroyed() {
                console.log("---------------destroyed----------------")
                console.log("el:" + this.$el.innerHTML)
                console.log(this.$el)
                console.log("data:" + this.$data)
                console.log(this.msg)
            },
            methods: {
                dom() {
                    this.msg = "我爱Vue-初学!!!"
                    console.log(this)
                },
                del() {
                    this.$destroy();
                }
            }
    
        });
    </script>
    </html>
  • 相关阅读:
    Python面向对象高级编程(__slots__、多继承、定制类)-6
    CS231n Lecture6-Training Neural Networks, part I学习笔记
    CS231n Lecture5-Convolutional Neural Networks学习笔记
    CS231n Lecture4-Introduction to Neural Networks学习笔记
    Python面向对象编程(类与实例、数据封装、继承多态、type()、isinstance())-5
    Python模块-4
    alloc和初始化的定义
    块的定义和使用
    属性的定义以及@synthesize的使用
    实例方法和类方法的定义
  • 原文地址:https://www.cnblogs.com/itrencaoqi/p/12166985.html
Copyright © 2020-2023  润新知