vue组件生命周期使用方法

来源：懂视网责编：小采时间：2020-11-27 19:54:52

vue组件生命周期使用方法

vue组件生命周期使用方法:这次给大家带来vue组件生命周期使用方法，vue组件生命周期使用的注意事项有哪些，下面就是实战案例，一起来看一下。分为4个阶段： create/mount/update/destroy 每一个阶段都对应着有自己的处理函数 create: beforeCreate created 初始

推荐度：

点击下载本文 文档为doc格式

导读vue组件生命周期使用方法:这次给大家带来vue组件生命周期使用方法，vue组件生命周期使用的注意事项有哪些，下面就是实战案例，一起来看一下。分为4个阶段： create/mount/update/destroy 每一个阶段都对应着有自己的处理函数 create: beforeCreate created 初始

这次给大家带来vue组件生命周期使用方法，vue组件生命周期使用的注意事项有哪些，下面就是实战案例，一起来看一下。

分为4个阶段：

create/mount/update/destroy

每一个阶段都对应着有自己的处理函数

create: beforeCreate created

初始化

mount: beforeMount mounted

和挂载相关的处理

update: beforeUpdate updated

根据要更新的数据做逻辑判断

destroy:beforeDestroy destroyed

清理工作

代码：

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>生命周期</title>
 <script src="js/vue.js"></script>
 </head>
 <body>
 <p id="container">
 <p>{{msg}}</p>
<!--点击的时候isShow进行取反 -->
 <button @click="isShow = !isShow">切换是否显示组件</button>
 <my-component v-if="isShow"></my-component>
 </p>
 <script>
 Vue.component("my-component",{
 template:`
 <p>
 <button @click="handleClick">Click Me</button>
 <h1>component:{{count}}</h1>
 </p>
 `,
 data:function(){
 return {
 count:0
 }
 },
 methods:{
 handleClick:function(){
 this.count++;
 }
 },
 beforeCreate: function () {
 console.log('准备创建组件');
 },
 created: function () {
 console.log('组件创建完毕');
 },
 beforeMount: function () {
 console.log('组件的模板准备挂载到DOM');
 },
 mounted: function () {
 console.log('挂载完毕');
 },
 beforeUpdate: function () {
 console.log('准备更新了');
 },
 updated:function(){
 console.log('更新完成');
 },
 beforeDestroy: function () {
 console.log('准备destroy');
 },
 destroyed: function () {
 console.log('destroy完成');
 }
 })
 new Vue({
 el:"#container",
 data:{
 msg:"Hello VueJs",
 isShow:true
 }
 })
 </script>
 </body>
</html>

生命周期练习，需要那阶段写那个阶段

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>生命周期练习</title>
 <script src="js/vue.js"></script>
 </head>
 <body>
 <p id="container">
 <p>{{msg}}</p>
 <my-component></my-component>
 </p>
 <script>
 Vue.component("my-component",{
 data:function(){
 return {
 myOpacity:0
 }
 },
 template:` <h1 v-bind:style="{opacity:myOpacity}">透明度将改变
 </h1>`,
 mounted:function(){
 setInterval(function(){
 this.myOpacity += 0.1;
 if(this.myOpacity>1){
 this.myOpacity = 0;
 }
 }.bind(this),1000)
 }
 })
 new Vue({
 el:"#container",
 data:{
 msg:"Hello VueJs"
 }
 })
 </script>
 </body>
</html>

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

vue组件生命周期使用方法

推荐度：

点击下载本文 文档为doc格式

标签：方法使用 VUE

热门焦点

vue组件生命周期使用方法

vue组件生命周期使用方法

vue组件生命周期使用方法

最新推荐

猜你喜欢

热门推荐