Vue入門記錄（一）

mingupupup發表於2024-07-26
Vue

效果

本文為實現如下前端效果的學習實踐記錄：

實踐

入門的最佳實踐我覺得是先去看官網，官網一般都會有快速入門指引。

根據官網的快速上手文件，構建一個新的Vue3+TypeScript，檢視新建的專案結構：

image-20240726084701804

現在先重點關注components、views、App.vue與main.ts。

components目錄通常用於存放可複用的Vue元件。

views目錄用於存放頁面級別的元件。這些元件通常對應應用的不同頁面或路由檢視。

App.vue是Vue應用的根元件。它通常包含應用的全域性樣式和結構，是Vue例項掛載的起點，所有的其他元件都是從這個根元件開始渲染的。

main.ts是Vue應用的入口檔案。它負責建立Vue例項並將其掛載到DOM中。

學習Vue不單單學習Vue框架還要學習相關生態，作為剛開始學習Vue的人，自己寫css或許不是一個好的選擇，但是沒關係，現在市面上已經有很多元件庫了，一般只需要用這些元件庫就滿足絕大多數需求了。

剛開始學習可以使用element-plus。

image-20240726090609568

GitHub地址：https://github.com/element-plus/element-plus

官網地址：https://element-plus.org

在官網上了解其使用方式，這裡簡單學習，可以完整引入，在main.ts中新增：

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

app.use(ElementPlus)

如下所示：

image-20240726091526559

現在就可以開始用ElementPlus的元件了。

觀察App.vue：

image-20240726091708592

只有views下的HomeView.vue。

再來看下HomeView.vue：

image-20240726091924491

只有來自components的Kuakua.vue。

再來看下Kuakua.vue：

<script setup lang="ts">
import { ref } from 'vue'
import axios from 'axios'

const prompt1 = ref('')
const fetchData = async () => {
      try {
        const response = await axios.get('https://192.168.1.6:7101/Semantickernel');
        prompt1.value = response.data;
      } catch (error) {
        console.error('There was a problem with the Axios request:', error);
      }
    };
</script>

<template>
    <div>
     <el-row>
    <el-col :span="24">
    <el-space direction="vertical">       
    <el-text type="primary" size="large">誇誇</el-text>        
    <el-input
    v-model="prompt1"
    style="width: 300px"
     :rows="8"
    type="textarea"
    placeholder="Please input"
    clearable
    />  
    <el-button type="primary" round @click="fetchData">誇誇</el-button>
    </el-space>
    </el-col>
    </el-row>
    </div>
</template>

使用了ElementPlus中的UI元件進行佈局。

使用v-model將prompt1繫結到el-input。

v-model的文件：https://cn.vuejs.org/guide/components/v-model.html#component-v-model

image-20240726093140157

剛開始不需要全部看完，知道是為了實現雙向繫結即可。

<el-button type="primary" round @click="fetchData">誇誇</el-button>

表示一個點選會觸發fetchData函式的按鈕。@click是v-on:的簡寫：

image-20240726093528032

在這個事件處理函式中我們需要向後端介面傳送一個get請求，可以使用axios來傳送http請求。

安裝axios，引入axios，使用axios傳送請求：

import axios from 'axios'

const fetchData = async () => {
      try {
        const response = await axios.get('https://192.168.1.6:7101/Semantickernel');
        prompt1.value = response.data;
      } catch (error) {
        console.error('There was a problem with the Axios request:', error);
      }
    };

即可實現開頭的效果。

總結

Vue框架相關：瞭解Vue專案結構各個部分的作用，瞭解元件化開發思想，學習v-model、v-on。

前端生態相關：瞭解element-plus與axios。

TypeScript相關：型別註解和型別推斷、箭頭函式、非同步函式（async/await）、模組匯入。

相關文章