十一、Vue3

失败才是人生常态

已于 2023-06-10 08:45:06 修改

阅读量88

点赞数

分类专栏： Java开发文章标签： vue.js javascript 前端

于 2023-06-07 10:37:13 首次发布

本文链接：https://blog.csdn.net/qq_43751506/article/details/131082612

版权

Java开发专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一、Vue介绍

Vue.js 是一个构建用户界面的 JavaScript 框架，Vue.js 的核心思想是“数据驱动视图”。它通过简单、灵活的 API 和响应式的数据绑定方式，实现了组件化、模块化的开发方式，使得开发者可以更加高效地构建 Web 应用程序。

二丶第一个vue程序

1、下载node.js
node.js是javascript运行时环境
在这里插入图片描述
2、安装vue3，即安装vue-cli

npm install -g @vue/cli@3.2.1

3、创建一个项目
方法一

vue create my-project

运行

npm run serve

方法二(推荐)

npm create vite@latest

接下来会提示你输入项目名称
运行

npm run dev

运行成功页面
在这里插入图片描述

三、Axios

Vue并没有提供通信功能，所以要使用axios来实现前后端通信

import axios from 'axios';
axios.get('/api/data')
  .then(function (response) {
    // 处理请求成功时的逻辑
    console.log(response.data);
  })
  .catch(function (error) {
    // 处理请求失败时的逻辑
    console.log(error);
  });

四、Router

在前端开发中，页面的跳转导航和状态管理都是非常重要的功能。Vue框架提供了一个名为Vue Router的插件，可用于方便地实现单页Web应用（Single Page Application）的导航和路由。

<template>
  <div>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

//定义路由规则
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

//创建路由实例
const router = createRouter({
  history: createWebHistory(),
  routes: routes
})

export default {
  name: 'App',
  router, //将路由实例添加到Vue实例中
};
</script>

五、ElementUI

ElementUI是一个基于Vue.js的UI组件库，提供了一套常用的UI组件和交互方式，包括表单、弹窗、日期选择、分页、下拉框等，还支持国际化、自定义主题等功能。

下面是一个使用ElementUI进行表单提交和校验的基本示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>ElementUI Demo</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  </head>
  <body>
    <div id="app">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('form')">提交</el-button>
        </el-form-item>
      </el-form>
    </div>