Vue入门记录(一)

简介: Vue入门记录(一)

效果

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

实践

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

根据官网的快速上手文档,构建一个新的Vue3+TypeScript,查看新建的项目结构:

现在先重点关注components、views、App.vue与main.ts。

components目录通常用于存放可复用的Vue组件。

views目录用于存放页面级别的组件。这些组件通常对应应用的不同页面或路由视图。

App.vue是Vue应用的根组件。它通常包含应用的全局样式和结构,是Vue实例挂载的起点,所有的其他组件都是从这个根组件开始渲染的。

main.ts是Vue应用的入口文件。它负责创建Vue实例并将其挂载到DOM中。

学习Vue不单单学习Vue框架还要学习相关生态,作为刚开始学习Vue的人,自己写css或许不是一个好的选择,但是没关系,现在市面上已经有很多组件库了,一般只需要用这些组件库就满足绝大多数需求了。

刚开始学习可以使用element-plus。

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)

如下所示:

现在就可以开始用ElementPlus的组件了。

观察App.vue:

只有views下的HomeView.vue。

再来看下HomeView.vue:

只有来自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

刚开始不需要全部看完,知道是为了实现双向绑定即可。

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

表示一个点击会触发fetchData函数的按钮。@clickv-on:的简写:

在这个事件处理函数中我们需要向后端接口发送一个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)、模块导入。

目录
相关文章
|
6天前
|
JavaScript
vue中使用@scroll不生效的问题
vue中使用@scroll不生效的问题
|
1天前
|
JavaScript 算法 前端开发
vue学习(1)
vue学习(1)
186 62
|
1天前
|
JavaScript
vue学习(3)模板语法
vue学习(3)模板语法
19 10
|
1天前
|
存储 JavaScript 前端开发
vue学习(2)
vue学习(2)
10 8
|
1天前
|
JavaScript
vue键盘事件
vue学习(11)键盘事件
|
5天前
|
数据采集 JavaScript 搜索推荐
我们一起聊聊如何对Vue项目进行搜索引擎优化
【9月更文挑战第4天】Vue 项目的搜索引擎优化(SEO)较为复杂,因其内容默认由 JavaScript 渲染,部分搜索引擎难以索引。为提升 SEO 效果,可采用服务器端渲染(SSR)或预渲染,使用 Nuxt.js 或 Vue Server Renderer 实现 SSR,或利用 Prerender SPA Plugin 预渲染静态 HTML。此外,动态管理 Meta 标签、优化静态内容与 Sitemap、懒加载、图片优化、提升页面速度、设置正确的路由模式、使用结构化数据及构建良好外链均有益于 SEO。
39 11
|
4天前
|
JavaScript 前端开发 搜索推荐
推荐5款免费、开箱即用的Vue后台管理系统模板
推荐5款免费、开箱即用的Vue后台管理系统模板
|
6天前
|
缓存 JavaScript 前端开发
vue中使用keep-alive的问题
vue中使用keep-alive的问题
|
8天前
|
JavaScript 前端开发
VUE技术栈-Vue的基本使用
尹正杰在其博客中介绍了Vue.js框架,它是一个渐进式JavaScript框架,由尤雨溪开发,结合了AngularJS的模板语法和数据绑定以及React的组件化和虚拟DOM技术,适合构建高效、轻量化的用户界面。
22 4
|
9天前
|
缓存 JavaScript 容器
vue动态组件化原理
【9月更文挑战第2天】vue动态组件化原理
26 2
下一篇
DDNS