526互联

单页html+vue3+element-plus+axios

发布时间 2023-07-22 16:36:20作者: Lotos
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, viewport-fit=cover" />
    <title></title>
    <script src="new/flexible.js"></script>
    <script src="new/axios.min.js"></script>
    <link rel="stylesheet" href="new/element-plus.css" />
    <script src="new/vue3.js"></script>
    <script src="new/element-plus.js"></script>
    <script src="new/element-plus-icon.js"></script>
  </head>
  <body>
    <div class="page flex-col" id="app">
            <div><el-button type="primary">{{lists.CName}}</el-button></div>
            <div>
              <el-icon color="#409EFC" class="no-inherit">
                <Share />
              </el-icon>
          </div>
    </div>

    <script lang="ts">
      const { ref, onMounted } = Vue;
  
      const app = Vue.createApp({
        setup() {
          const lists = ref([]);

　　　　　　onMounted(fetchData);

　　　　　　const fetchData = () => {
            console.log('fetchData');
            let data = {
              ID: 9
            };
            axios.get("/Product/Get", { params: data })
              .then(res => {
                if (res.data.code === 0) {
                  lists.value = res.data.data;
                  console.log('lists', lists.value);
                }
              })
              .catch(error => {
                console.log(error);
              });
          };
  
          return {
            lists
          };
        }
      });
  
      app.use(ElementPlus);
      app.mount('#app');
    </script>

  </body>
</html>