本文介绍: 在Vue3中,onMounted是一个生命周期钩子函数,它会在组件挂载后立即被调用。与Vue2的mounted钩子非常相似,但onMounted在Vue3中是一个独立的函数而不是一个选项,这使得开发更加灵活。

1、main.js

import { createApp } from 'vue'
import App from './App.vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

let app = createApp(App);
app.use(ElementPlus, {
    locale: zhCn,
})
app.mount('#app')

2、util/request.js

import axios from "axios";

let request = axios.create({
    baseURL: "http://localhost:8080",
    timeout: 50000
});

export default request

3、api/schedule.js

import request from "../util/request.js";

export let getScheduleList = () => {
    return request.get('/schedule')
};

4、App.vue

<template&gt;

  <el-container&gt;
    <el-table :data="scheduleList" style="width: 100%"&gt;
      <el-table-column label="编号" width="180"&gt;
        <template #default="scope"&gt;
          <div style="display: flex; align-items: center"&gt;
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="学习计划" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.title }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="是否完成" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.completed?'完成':'未完成' }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="其他操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)">Edit</el-button>
          <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogFormVisible" title="Shipping address">
      <el-form :model="form">
        <el-form-item label="标题">
          <el-input v-model="form.title" autocomplete="off" />
        </el-form-item>
        <el-form-item label="Zones" >
          <el-radio-group v-model="form.completed">
            <el-radio :label="true">完成</el-radio>
            <el-radio :label="false">未完成</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          Confirm
        </el-button>
      </span>
      </template>
    </el-dialog>
  </el-container>

</template>

<script lang="ts" setup>
import {getScheduleList} from './api/schedule.js';
import {onMounted, reactive, ref} from 'vue';

let dialogFormVisible = ref(false);

let form=reactive({
  id: 0,
  title: '',
  completed: false
})

let scheduleList=reactive([])


onMounted(()=>{
    getScheduleList().then(response=>{
          Object.assign(scheduleList,response.data.data)
    })
})

interface scheduleList {
  id: Number
  title: string
  completed: boolean
}

const handleEdit = row => {
  dialogFormVisible.value = true;
  Object.assign(form, row);
}
const handleDelete = (index: number, row: scheduleList) => {
  console.log(index, row)
}
</script>

5、ScheduleController.java

package com.atguigu.schedule;
import com.atguigu.schedule.controller.Result;
import com.atguigu.schedule.pojo.Schedule;
import com.atguigu.schedule.service.ScheduleService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
@CrossOrigin
@RestController
@RequestMapping("/schedule")
public class ScheduleController {

    @Autowired
    private ScheduleService scheduleService;

    @GetMapping
    public Result list() {
        return Result.ok(scheduleService.getScheduleList());
    }

    @PostMapping
    public Result save(@RequestBody Schedule schedule) {
        scheduleService.add(schedule);
        return Result.ok();
    }

    @PutMapping
    public Result update(@RequestBody Schedule schedule) {
        scheduleService.update(schedule);
        return Result.ok();
    }

    @DeleteMapping("/{id}")
    public Result del(@PathVariable Integer id) {
        scheduleService.del(id);
        return Result.ok();
    }
}

 6、onMounted

onMounted是在Vue.js中经常使用的一个钩子函数,它在组件挂载完成后被调用。这个钩子函数可以我们组件已经挂载到DOM后执行某些操作,比如访问组件的DOM元素等。在onMounted钩子中返回对象可以包含组件实例需要使用的数据方法和生命周期钩子等。

      在Vue3中,onMounted是一个生命周期钩子函数,它会在组件挂载后立即被调用。与Vue2的mounted钩子非常相似,但onMounted在Vue3中是一个独立的函数而不是一个选项,这使得开发更加灵活。

      当组件挂载到DOM后,onMounted函数将立即被调用,这时候我们可以执行许多操作,例如发送请求操作DOM元素初始化数据等。在onMounted中,我们通常可以在组件第一次渲染请求接口更新组件中的数据。这样,当组件第一次渲染时,我们就可以获取我们需要数据

      在Vue3中,onMounted是一个生命周期钩子函数,用于在组件渲染后执行。当组件挂载到DOM后,onMounted函数将立即被调用。与Vue2的mounted钩子非常相似,但在Vue3中,它是一个独立的函数而不是一个选项,这使得开发更加灵活。在onMounted中,我们可以执行许多操作,例如发送请求操作DOM元素,初始化数据等。

     在Vue3中,onMounted是一个生命周期钩子函数,它在组件挂载到DOM后立即调用,类似于Vue2的mounted钩子函数。

     onMounted的作用是在组件挂载到DOM后执行一些初始化操作或者发送网络请求异步操作。例如,可以使用onMounted钩子函数来初始化某些数据绑定事件监听器、创建定时器操作

在Vue3中,onMounted钩子函数的用法如下:

import { onMounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      // 在组件挂载到DOM后执行的逻辑
      console.log('组件已经挂载到DOM了')
      // 其他初始化操作或异步请求等等
    })
  }
}

原文地址:https://blog.csdn.net/m0_65152767/article/details/134630758

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

如若转载,请注明出处:http://www.7code.cn/show_2667.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注