vue做登陆页面

fht1

已于 2024-04-02 11:04:19 修改

阅读量393

点赞数 5

文章标签： vue.js javascript 前端

于 2024-04-02 10:49:56 首次发布

本文链接：https://blog.csdn.net/fhaitao2009/article/details/137262272

版权

本文介绍了如何使用Vue.js框架中的v-model实现双向数据绑定，并结合axios库进行HTTPPOST请求，展示了一个基础的表单提交功能

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>


</head>

<body>
  <div id="app">
    <!-- 9、双向数据绑定 -->
    <input v-model="username" />{{username}}
    <!-- 基本属性的响应式对象 -->
    <input v-model="password" /> {{password}}
    <button @click="refFun">提交</button>
  </div>


  <script>
    const { createApp, ref, reactive } = Vue;
    const username = ref('');
    const password = ref('');

    createApp({
      setup() {
        //写完函数也要去注册
        function refFun() {
          alert(username.value + password.value);
          axios.post('http://192.168.5.220:8083/system/register', {
            username: username.value,
            password: password.value
          })
            .then(function (response) {
              console.log(response);
            })
            .catch(function (error) {
              console.log(error);
            });

        }
        return {
          username,
          password,
          refFun,
        }
      }
    }).mount('#app')
  </script>


</body>

</html>