zoukankan      html  css  js  c++  java
  • 初识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>
  • 相关阅读:
    存储过程
    数据库中的锁
    数据库事务
    三大范式
    IOC(一)
    rabbitmq部署
    配置SQLServer2012,允许远程连接
    6种常见的Git错误以及解决的办法
    灵活使用Win+R快捷键提高工作效率
    sql 创建视图常用的几种sql函数
  • 原文地址:https://www.cnblogs.com/itrencaoqi/p/12166985.html
Copyright © 2011-2022 走看看