(二)、vue基础精讲之---vue实例的生命周期

2018-12-16  本文已影响0人  读书的鱼

生命周期函数就是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>Vue生命周期</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        {{message}}
        <h2>常用的是8个生命周期函数</h2>
        <p>
            beforeCreate()
            created()
            beforeMount()
            mounted()
            beforeDestroy()
            destroyed()
            beforeUpdate()
            upDated()
        </p>
        <h2>不常用的还有三个</h2> 
        <p>
            activated() 
            deactivated()
            errorCaptured: (err, vm, info)
        </p>
    </div>

    <script>
       var vm = new Vue({
           el: '#app',
           data:{
               message: 'hello wolrd'
           },
           beforeCreate() {
               console.log('beforeCreate');
           },
           created() {
               console.log('created');
           },
           beforeMount() {
                console.log(this.$el);  // <div id="app"></div>
               console.log('beforeMount');
           },
           mounted() {
               console.log(this.$el);  // <div id="app">'hello wolrd</div>
               console.log('mounted');
           },
           beforeDestroy() {
               console.log('beforeDestroy'); //需要执行:vm.$destroy()函数才能出发
           },
           destroyed() {
               console.log('destroyed');//需要执行:vm.$destroy()函数才能出发
           },
           beforeUpdate() {
               console.log('beforeUpdate');  //需要更改data数据,才能出发(this.message = 'bye world')
           },
           updated() {
               console.log('updated');  //需要更改data数据,才能出发(this.message = 'bye world')
           },
       }) 
    </script>
</body>
</html>
上一篇下一篇

猜你喜欢

热点阅读