zoukankan      html  css  js  c++  java
  • vue--生命周期

    <!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">
    <h3 id="h3">{{message}}</h3>
    <input type="button" value="修改message" @click="message='No'">
    </div>
    </body>
    </html>
    <script src="vue.js"></script>
    <script>
    var xm=new Vue({
    el:"#app",
    data:{
    message:"OK"
    },
    methods:{
    show(){
    console.log('执行了show方法')
    }
    },
    // 未被初始化函数
    beforeCreate() { //这是我们遇到的第一个生命周期函数,表示实例完全被创建出来之前,会执行它;
    //在beforeCreate生命周期函数执行的时候,data和methods中的数据都还没有被初始化.
    },
    // 初始化完成的函数
    created() {//这是我们遇到的第二个生命周期函数
    // console.log(this.message)
    // this.show()
    // 在created中,data和methods都已经被初始化好了
    //如果要调用methods中的方法,或者操作data中的数据,最早只能在created中操作
    },
    // 即将挂载的函数
    beforeMount() {//这是我们遇到的第三个生命周期函数,表示模板已经在内存中编译完成了,但是还没有渲染到页面中
    // console.log(document.getElementById("h3").innerText)
    //在beforeMount执行的时候,页面中的元素,还没有被真正替换过来,只是之前写的模板字符串,还是旧的
    },
    // 挂载的函数
    mounted() {//这是我们遇到的第三个生命周期函数,表示内存中的模板已经挂载到了页面中
    // console.log(document.getElementById("h3").innerText)
    //mounted是实例创建期间的最后一个生命周期函数,当执行完mounted就表示实例已经被完全创建好了,
    //此时,如果没有其他操作的话,这个实例就在我们的内存当中

    //如果我们需要操作dom中的元素,我们必须在mounted完成之后才可以,mounted之后,我们已经脱离了创建阶段,
    //进入了运行阶段
    },
    // ---------------------------------------------------------------------------------------------------------------
    // 运行阶段的生命周期函数:
    beforeUpdate() {//页面还未被更新,但是数据被更新了
    // console.log('界面上的元素是'+document.getElementById("h3").innerText);
    // console.log('data中的message的数据是: '+ this.message);
    // 当执行 beforeUpdate()的时候,页面中显示的数据还是旧的,但是数据是新的
    },
    //渲染到页面的函数
    updated() {
    //updated()事件执行的时候,页面和data数据已经保持同步了,都是最新的
    },
    //即将销毁的函数
    beforeDestroy() {
    //当执行beforeDestroy()钩子函数的时候,vue实例就已经从运行阶段进行到销毁阶段,当执行beforeDestroy()
    },
    //销毁的函数
    destroyed() {
    // 此时实例身上所有的data,methods,过滤器,指令都已经销毁了
    },
    })
    </script>
  • 相关阅读:
    POJ3693 Maximum repetition substring —— 后缀数组 重复次数最多的连续重复子串
    SPOJ
    POJ2774 Long Long Message —— 后缀数组 两字符串的最长公共子串
    POJ3261 Milk Patterns —— 后缀数组 出现k次且可重叠的最长子串
    POJ1743 Musical Theme —— 后缀数组 重复出现且不重叠的最长子串
    SPOJ
    AC自动机小结
    HDU3247 Resource Archiver —— AC自动机 + BFS最短路 + 状压DP
    POJ1625 Censored! —— AC自动机 + DP + 大数
    Herding
  • 原文地址:https://www.cnblogs.com/lovels/p/11246420.html
Copyright © 2011-2022 走看看