首页 > 其他分享 >Vue入门记录(一)

Vue入门记录(一)

时间:2024-07-26 12:07:20浏览次数:15  
标签:axios 入门 记录 Vue element vue plus 组件

效果

本文为实现如下前端效果的学习实践记录:

实践

入门的最佳实践我觉得是先去看官网,官网一般都会有快速入门指引。

根据官网的快速上手文档,构建一个新的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函数的按钮。@clickv-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)、模块导入。

标签:axios,入门,记录,Vue,element,vue,plus,组件
From: https://www.cnblogs.com/mingupupu/p/18325040

相关文章

  • 计算机毕业设计django+vueblockly少儿编程在线学习网站【开题+论文+程序】
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景在数字化教育日益普及的今天,少儿编程教育作为培养学生逻辑思维、创造力和解决问题能力的重要手段,正受到越来越多的关注和重视。然而,传统的......
  • 计算机毕业设计django+vueee家教管理系统【开题+论文+程序】
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着教育市场的不断扩展和个性化学习需求的日益增长,家教服务作为一种灵活高效的教育补充形式,受到了广大学生及家长的青睐。然而,传统的家教......
  • 代码随想录算法训练营第45天 | 子序列入门
    300.最长递增子序列https://leetcode.cn/problems/longest-increasing-subsequence/代码随想录https://programmercarl.com/0300.最长上升子序列.html674.最长连续递增序列https://leetcode.cn/problems/longest-continuous-increasing-subsequence/description/代码随想录......
  • vue使用iframe @load指令
    <iframe id="customFunctionsWindow"          :src="iframeUrl"          width="100%"          height="400"          frameborder="0"          @load=&......
  • 组件保持存活/异步组件/依赖注入/Vue应用
    1.组件保持存活正常组件用按钮切换后被切换的组件会被销毁重建,而KeepAlive标签可以保持被切换的组件不被销毁例如:数据一被切换为新数据,切换组件后再切换回来还是新数据,若未用KeepAlive标签,切换组件后再切换回来还是数据一2.异步组件同步:有多个功能A/B/C时,功能运行是先运行A再......
  • 算法入门篇(四)之栈和队列
    目录一、顺序栈、链栈1、顺序栈1.定义与存储结构2.特点3.适用场景2、链栈1.定义与存储结构2.特点3.适用场景3、总结二、顺序队列、链式队列1、顺序队列1.定义与存储结构2.特点3.循环队列4.适用场景2、链式队列1.定义与存储结构2.特点3.适用......
  • 算法入门篇(三)之线性表
    目录一.顺序表1、静态顺序表2、动态顺序表3、顺序表的操作二.单链表、双向链表、循环链表、静态链表1、单链表2、双向链表3、循环链表4、静态链表三.UVA101、UVA11988、UVA126571.UVA101:木块问题(TheBlocksProblem)2.UVA11988:破损的键盘(BrokenKeyboard)......
  • (Javaweb)Vue
    目录一.Vue概述二Vue指令三.vue生命周期一.Vue概述1.model--数据模型:包含了很多的业务数据以及数据的处理方法2.view--视图层--数据的展示--DOM元素3.viewmodel--完成数据绑定的核心,实现model与viewmodel之间的数据连接其中,MVVM由三部分组成,model,view,viewmodelm......
  • 基于SpringBoot+Vue+uniapp的教学资料管理系统(源码+lw+部署文档+讲解等)
    文章目录前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我代码参考数据库参考源码获取前言......
  • 基于SpringBoot+Vue+uniapp的旅游推荐系统(源码+lw+部署文档+讲解等)
    文章目录前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我代码参考数据库参考源码获取前言......