vue学习笔记day12 vue的生命周期

最新推荐文章于 2024-06-05 20:29:22 发布

桑丘紫言

最新推荐文章于 2024-06-05 20:29:22 发布

阅读量91

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_39209728/article/details/104575165

版权

vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

一 vue的生命周期
    1>beforeCreate
    2>created
    3>beforeMount
    4>Mounted===>window.onload
    5>beforeUpdate
    6>updated
    7>beforeDestory
    8>destoryed

例子1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <button @click="run">按钮</button> {{msg}}
    </div>

    <script src="../vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg: 123
            },
            methods: {
                run: function() {
                    this.msg = this.msg + 5;
                }
            },
            beforeCreate: function() {
                console.log("创建之前")
            },
            created: function() {
                console.log("创建之后")
            },
            beforeMount: function() {
                console.log("有el之前")
            },
            mounted: function() {
                console.log("有el之后")
            },
            beforeUpdate: function() {
                // this.msg = "hhaha"
                console.log("改变之前")
            },
            updated: function() {
                console.log("改变之后");
            },
            beforeDestory: function() {
                console.log("销毁之前")
            },
            destoryed: function() {
                console.log("销毁之后");
            }

        })
    </script>
</body>

</html>

例子2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="text" v-model="str">
        <p>{{str}}</p>
        <button @click="run">按钮</button>
        <ul>
            <li v-for="(item , index) in res">
                {{item}} --- {{index}}
            </li>
        </ul>
    </div>

    <script src="../vue.js"></script>
    <script src="../vue-resource.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                str: "",
                res: []
            },
            mounted: function() {
                this.run();
            },
            methods: {
                run: function() {
                    this.$http.get("http://localhost:8080/MyBlogSys/test/run", {
                        params: {
                            str: this.str
                        }
                    }).then(function(res) {
                        console.log(res)
                        if (res.data == null) {
                            this.res = res.bodyText
                        } else {
                            this.res.push(res.data);
                        }

                    }, function(err) {
                        console.log(err);
                    })
                }
            },

        })
    </script>
</body>

</html>

桑丘紫言

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习笔记day12 vue的生命周期

一 vue的生命周期 1>beforeCreate 2>created 3>beforeMount 4>Mounted===>window.onload 5>beforeUpdate 6>updated 7>beforeDestory 8>destoryed例子1&lt...
复制链接

扫一扫