最朴素的vue3代码了

最新推荐文章于 2025-06-03 14:52:24 发布

众乐乐_2008

最新推荐文章于 2025-06-03 14:52:24 发布

阅读量194

点赞数

CC 4.0 BY-SA版权

分类专栏： VUE 文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/liuruiaaa/article/details/132102032

VUE 专栏收录该内容

26 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
  <title>Your Vue 3 App</title>
  <!-- 引入 Vue 3 的 CDN 文件 -->
  <script src="https://unpkg.com/vue@3.2.26/dist/vue.global.js"></script>
  <!-- 引入 axios 的 CDN 文件 -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<!-- Vue 3 应用的根元素 -->
<div id="app">
  <!-- 表单 -->
  <form @submit.prevent="submitForm">
    <!-- 输入用户名 -->
    <label for="username">用户名:</label>
    <input type="text" id="username" v-model="username" />

    <!-- 输入密码 -->
    <label for="password">密码:</label>
    <input type="password" id="password" v-model="password" />

    <!-- 提交按钮 -->
    <button type="button" @click="submitForm">登录</button>
  </form>
</div>

<script>
  // 创建 Vue 3 应用
  const app = Vue.createApp({
    data() {
      return {
        username: '',
        password: ''
      };
    },
    methods: {
      submitForm() {
        // 构造请求参数
        const data = {
          username: this.username,
          password: this.password
        };

        // 创建带有基本URL的 Axios 实例
        const api = axios.create({
          baseURL: 'http://127.0.0.1:18885' // 你的后端API的基本URL
        });

        // 发起 POST 请求
        api.post('/huarun/test',data)
        .then(response => {
          // 请求成功处理
          console.log(response.data);
        })
        .catch(error => {
          // 请求失败处理
          console.error(error);
        });

        // 发起 GET 请求
        // api.get('/huarun/test',{
        //   params: {
        //     username: this.username,
        //     password: this.password
        //   }
        // })
        // .then(response => {
        //   // 请求成功处理
        //   console.log(response.data);
        // })
        // .catch(error => {
        //   // 请求失败处理
        //   console.error(error);
        // });

        
      }
    }
  });

  // 挂载 Vue 3 应用到根元素
  app.mount('#app');
</script>
</body>
</html>

最朴素的vue3代码了