首页 > 其他分享 >11-Vue-生命周期

11-Vue-生命周期

时间:2024-03-28 16:24:09浏览次数:26  
标签:11 opacity 生命周期 log 0.01 vm Vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引出生命周期</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
    <!--小案例,标签实现逐渐透明-->
    <!--<h2 style="opacity: 0.5">欢迎学习Vue前端框架</h2>-->
    <h2 :style="{opacity}">欢迎学习Vue前端框架</h2>
</div>

<script type="text/javascript">
    // 阻止 vue 在启动时生成生产提示
    Vue.config.productionTip = false

    const vm = new Vue({
        el:"#root",
        data(){
            return{
                opacity:1,
            }
        },
        methods:{

        },
        // 生命周期函数
        // Vue完成模板的解析,并把初始的真实DOM元素放入页面后(挂载完毕)调用mounted
        mounted(){
            // 定时器
            setInterval(function(){
                console.log(vm.opacity)
                vm.opacity -= 0.01

                // 如果透明度变为0时,重新设置为1
                if(vm.opacity <= 0){
                    vm.opacity = 1
                }
            },20)

            // 简化定时器
            // setInterval(()=>{
            //     // 这里的this是 Vue 实例对象
            //     console.log(this.opacity)
            //     this.opacity -= 0.01
            //     // 如果透明度变为0时,重新设置为1
            //     if(this.opacity <= 0){
            //         this.opacity = 1
            //     }
            // },20)
        }
    })
</script>
</body>
</html>

 

 

 

 

标签:11,opacity,生命周期,log,0.01,vm,Vue
From: https://www.cnblogs.com/REN-Murphy/p/18101983

相关文章

  • ONLYOFFICE 文档 Vue 组件
    ONLYOFFICE文档Vue组件ONLYOFFICEDocsVue.js 组件 集成ONLYOFFICEDocs到 Vue.js 项目。先决条件此过程需要 Node.js(和npm)。使用ONLYOFFICE文档编辑器创建演示Vue.js应用程序此过程创建一个基本Vue.js应用程序 并在其中安装ONLYOFFICE文档编辑器。......
  • ARC112F 做题记录
    link主要记录一下这种题的做题过程。第一步我们发现第\(j\)种牌每满\(2j\)张就会向下一位进一,考虑套路:我们用第\(1\)种牌来表示第\(j\)种牌,权值为\(W_{j-1}=\prod\limits_{i=1}^{j-1}2i\)。这样我们可以只用第\(1\)种牌的数量,即一个数来代替一组牌,不妨设初始数......
  • 若依RuoYi-Vue创建菜单并添加自定义页
    全文见:若依管理系统RuoYi-Vue(一):项目启动和菜单创建添加菜单和页面是若依管理系统最核心的功能,也是使用者最关心的事情,这里涉及到核心中的核心功能:权限,先不考虑那么多,直接新增页面,看看能否生效。下面演示新闻列表页添加的过程,这里如果想要新增新闻列表菜单,需要先新增“新闻”父菜......
  • 在Vue项目中使用Vuex进行状态管理是一种常见做法。下面是一个简单的示例,展示了如何创
    步骤1:创建VuexStore首先,你需要创建一个Vuexstore。通常,这是在你的项目的store目录下完成的。//store.jsimportVuefrom'vue';importVuexfrom'vuex';Vue.use(Vuex);conststore=newVuex.Store({state:{count:0},mutations:{increment(......
  • (毕业设计)基于Java+Vue+Mysql的网上订餐系统
    前言:网上订餐系统是一个综合性的在线服务平台,旨在为用户提供便捷的点餐、支付、配送等一体化服务。下面是对系统列出的各个功能模块的详细解释:一、个人中心个人中心是用户登录后的主要界面,展示用户的个人信息、订单记录、优惠券、积分等。用户可以在此查看并管理自己的账户......
  • (毕业设计)基于Java+Vue+Mysql的大学生租房平台
     前言:大学生租房平台是一个专门为大学生提供租房服务的在线平台。这个平台不仅简化了租房流程,还提供了多种功能,如房源搜索、在线沟通、合同签订等,让大学生能够轻松、安全地找到适合自己的房源。以下是针对系统列出的七个平台功能的详细解释:一、个人中心个人中心是用户在使......
  • (毕业设计)基于Java+Vue+Mysql的学生心理咨询评估系统
     前言:学生心理咨询评估系统是一个集成了多个功能模块的综合性系统,旨在为学生提供心理咨询服务和评估。以下是对系统的五个主要功能模块的详细解释:一、个人中心个人中心是用户的个人空间,主要用于展示和管理用户的基本信息、心理评估记录、咨询历史等。学生可以在这里查看自......
  • 在Vue.js框架中,activated和created的区别
    在Vue.js框架中,activated和created两个钩子函数都是在组件被创建时执行的函数,但它们的使用场景略有不同。createdcreated钩子函数是在组件被创建(即实例化)时执行的,可以用它来初始化组件的数据、监听事件、调用方法等操作。它是组件生命周期中的第一个钩子函数,通常用于组件初......
  • vue实例的data属性,可以在哪些生命周期中获取到
    Vue实例的data属性可以在beforeCreate、created和beforeMount生命周期中获取到。在Vue实例的生命周期中,data属性在不同的阶段有着不同的可访问性:beforeCreate:在实例初始化之后,数据观测(dataobserver)和事件配置之前被调用。在这个阶段,data属性已经可以被访问,但是事件监听器......
  • vue3子组件给父组件传参,父组件给子组件传参,在父组件中直接调用子组件中的某个方法
    vue3子组件给父组件传参,父组件给子组件传参,在父组件中直接调用子组件中的某个方法1、子传父,以传递id为例子:constemit=defineEmits(['passId']);//在需要传递的参数的地方写,id为需要传递的参数emit('passId',id); 父://引入子组件constSonPage=defineAsyncCo......