首页 > 其他分享 >vue3 onMounted是一个生命周期钩子函数

vue3 onMounted是一个生命周期钩子函数

时间:2024-07-21 15:19:00浏览次数:15  
标签:生命周期 钩子 onMounted vue3 组件 挂载 message

  • onMounted 是一个生命周期钩子函数,在组件挂载到 DOM 后运行。在这里你可以执行需要在组件可用后进行的操作,比如获取数据、设置订阅或初始化第三方库。
  • 使用示例:
import { onMounted } from 'vue';

onMounted(() => {
  // 组件挂载后执行的代码
  console.log('组件已挂载!');
});
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const message = ref('你好,Vue 3!'); // 创建一个响应式引用

    // 更新消息的函数
    const updateMessage = () => {
      message.value = '你好,Composition API!';
    };

    // 组件挂载后执行的操作
    onMounted(() => {
      console.log('组件挂载时的消息:', message.value);
    });

    return {
      message,
      updateMessage,
    };
  },
};
</script>

<style>
/* 在这里添加你的样式 */
</style>

 

标签:生命周期,钩子,onMounted,vue3,组件,挂载,message
From: https://www.cnblogs.com/beichengshiqiao/p/18314489

相关文章

  • vue3 - 最新详细实现 “拖曳式课程表“ 日历课程排班功能,用鼠标拖拽课程放到日历课表
    效果图在vue3、nuxt3项目开发中,详解实现用鼠标拖拽排课的日历课程表,拖动课程名(学科)到日历课程表的某一节课中,拖放到课表上的时候自动沿边吸附贴合,vue3可视化拖拽生成课程表插件,左边是科目课程、右边是教学周课表,鼠标拖动把课程放到指定的日期时间上即可快速生成课表,数据......
  • vue3 - 最新详细实现 “日历课程表“ 上课时间表功能组件,教务系统专用老师排课表插件
    效果图在vue3、nuxt3项目开发中,详解实现学生每周“动态课程表(日历表展现)”功能实现,对学期的每周课程进行排课和准备工作,可自由切换本月的每周上课表情况、也可通过日期范围选择器进行筛选指定周的教学排班表、相同的课成可以合并(可不开启),课表数据结构支持调用后端服......
  • 【Django+Vue3 线上教育平台项目实战】购物车与订单模块的精简实现与数据安全策略
    文章目录前言一、购物车模块1.后端核心逻辑2.前端页面代码3.操作流程及演示二、订单模块1.订单模块模型类设计1.展示订单信息a.页面展示b.前端核心代码c.后端核心逻辑2.订单是否使用优惠券与积分a.页面展示b.前端核心代码3.订单支付方式a.页面展示b.前端核心代码4.......
  • vue3中mixin的使用方法
     <template><divclass="box">{{mData.name}}</div></template><scriptsetup>import{ref}from'vue'//导入importuserMixfrom"@/common/mixins/user";//拿到数据const{mData......
  • 基于Vue CLI 3构建Vue3项目(Vue2也可参考)
    天行健,君子以自强不息;地势坤,君子以厚德载物。每个人都有惰性,但不断学习是好好生活的根本,共勉!文章均为学习整理笔记,分享记录为主,如有错误请指正,共同学习进步。蜀国曾闻子规鸟,宣城还见杜鹃花。一叫一回肠一断,三春三月忆三巴。——《宣城见杜鹃花》文章目录使用......
  • Vue3的学习---2
    2.Vue基本语法2.1文本渲染指令v-html和v-textv-html:将数据当作html代码渲染到页面上v-text:将数据当作纯文本渲染到页面上<body><divid="app"><!--v-html和v-text指令的作用是将数据渲染到HTML元素或文本节点中,避免出现{{num}}--><pv-html="......
  • 学Vue3 看这篇就够了
    Vue3简介Vue3是一个流行的开源JavaScript框架,用于构建用户界面和单页面应用。它带来了许多新特性和改进,包括更好的性能、更小的打包大小、更好的TypeScript支持、全新的组合式API,以及一些新的内置组件。1.Vue3的新特性Vue3引入了许多新特性,包括:组合式API:这是Vue3......
  • vue2的老项目怎么改造为vue3,vite,前端的快速发展真让人上头
    Vue2Vue2是Vue.js的第二个主要版本,由尤雨溪于2016年发布。Vue2带来了许多新特性和改进,使其成为最受欢迎的前端框架之一。特点:响应式系统:Vue2的核心特性是响应式系统,它可以自动追踪依赖并在数据变化时更新DOM。组件化架构:Vue2鼓励开发者使用组件化的方式构......
  • Vue3学习(未完待续)
    Vue3vite全新的前段开发工具就是webpack的代替品npminitvite-appvue3testnpmi模板中可以没有根标签安装vue3的测试工具常用CompositionAPIsetup是vue3中的一个配置项<script>import{h}from'vue'//返回一个渲染函数exportdefault{ name:"app", setup(){......
  • Vue3+Elementplus 递归菜单展示
    这里只是做个笔记,js,css那些都没写子组件MenuItem<template><templatev-if="item.children"><el-sub-menu:index="item.value"><template#title>{{item.label}}</template><MenuItemv-for="childI......