Vue.js开发基础 05

最新推荐文章于 2024-05-20 10:06:54 发布

梦梦的小斑鸠

最新推荐文章于 2024-05-20 10:06:54 发布

阅读量177

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/CP011522/article/details/126819728

版权

生命周期？

生命周期：vue实例从创建到销毁的一系列过程
在每个周期中被自动调用的函数叫做生命周期函数，也叫
钩子函数

作用：在实例被创建到被回收的整个过程中，会在不同
的时期有不同的钩子函数，我们可以使用不同时期的
钩子函数做完成不同的操作

vue中的生命周期分3个阶段：初始阶段，更新阶段，销毁阶段
生命周期中的this指向的都是实例本身

<body>
    <div id ="example">{{message}}</div>
    <script src="vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#example',
        data :{
            message:'match'
        },
        beforCreate(){
            //实例初始化之前，初始自己的生命周期
            console.log('beforCreate');
        },
        created() { 
            // 挂载data中的数据，响应式的数据变化，观察数据(getter,setter)
            console.log('created');
        },
        beforeMount() { 
            // dom元素挂载之前
            console.log('beforeMount'); 
        },
        mounted() { 
            // dom元素渲染之后
            console.log('mounted');
         },
          beforeUpdate() { 
            // 数据更新之前执行,前提是更新的数据被使用了.
            console.log('beforeUpdate');
        },
          updated() { 
            // 数据一更新就会触发
                console.log('updated');
        } ,
              
          beforeDestroy() { 
            // 销毁前触发
                console.log('beforeDestroy');
        },

          destroyed() { 
       //             销毁后执行
      // 此时销毁，响应式的数据没有了，实例还在
                    console.log('destroyed');
        }
        })
       
    </script>
    
</body>

<body>
  <div id="app">
 <button @click="msg ='哈哈哈哈'">修改msg的值</button> 

    <input type="text" v-model="msg"> 
    <p>{{ msg }}</p> 

    <select v-model="fruit"> 
      <option value="apple">苹果</option> 
      <option value="orange">橘子</option> 
      <option value="banana">香蕉</option> 
    </select>
 
    <input type="checkbox" v-model="chk">
  </div>

      <script src="./vue.js"></script> 
     <script> 
    new Vue({ 
      el:'#app', 
      data: {  msg: '',
               fruit:'',
               chk:true 
  }   
})
             </script>
    
</body>