【JavaWeb】Vue下篇（Element）

最新推荐文章于 2024-05-16 01:50:44 发布
最新推荐文章于 2024-05-16 01:50:44 发布
阅读量792 收藏 23
点赞数 33
分类专栏： JavaWeb开发 文章标签： vue.js 前端 elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62511863/article/details/135951434
版权

🔥 本文由 程序喵正在路上 原创，CSDN首发！
💖 系列专栏：JavaWeb开发
🌠 首发时间：2024年2月2日
🦋 欢迎关注🖱点赞👍收藏🌟留言🐾

目录

Vue组件库Element

Element介绍

  • Element：是由饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
  • 什么是组件：组成网页的部件，例如 超链接、按钮、图片、表格、表单、分页条等等
  • 官网：https://element.eleme.cn/#/zh-CNListener

原始效果和使用Element效果对比：

在这里插入图片描述

快速入门

  1. 安装ElementUI组件库 （在当前工程的目录下）

    • 首先，先关闭 Vscode 中任务的执行
    • 在项目文件夹处右键，选择在集成终端中打开
      在这里插入图片描述
    • 执行指令：npm install element-ui@2.15.3
      在这里插入图片描述
    • 安装完成，element-ui 会存放在 node_modules 文件夹下
      在这里插入图片描述

  2. 引入ElementUI组件库

    • 打开 main.js 文件，添加以下代码：

      import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

      在这里插入图片描述

  3. 访问官网，复制组件代码，调整

    • 在 views 文件夹下新建一个文件夹 element，并在 element 中新建一个组件文件 ElementView.vue，命令建议使用驼峰命令法，不然可能会报错

      在这里插入图片描述

    • 填入基础框架

      在这里插入图片描述

    • 下面我们演示一下 element 的 button 按钮，在 element 的官网中，找到组件部分的 Button 按钮，选择我们想要的按钮，复制其代码即可

      在这里插入图片描述

    • 将复制的代码粘贴到 div 标签中，并使用快捷键 Shift+Alt+F 格式化一下代码，如果代码有相应的 CSS 样式，也要记得复制过来

      在这里插入图片描述

    • 在 App.vue 中导入 ElementView.vue 组件文件，先删去 App.vue 文件中 div 标签中的内容，然后敲出 <element，在提示框中按下向下的方向键到 ElementViewVue 选项，然后回车，最后再将 div 标签中的内容修改一下即可

      在这里插入图片描述

      最终结果：

      在这里插入图片描述

    • 启动

      在这里插入图片描述

常见组件

Table 表格

Table 表格：用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作

在这里插入图片描述

还是跟之前一样的套路，在 Element 官网找到 Table 表格，选择自己想要的表格样式，将其源代码复制到我们的工程中即可

在这里插入图片描述

效果：

在这里插入图片描述

在官网的 Table 表格最下方，有关于源代码中每个参数的介绍：

在这里插入图片描述

Pagination 分页

Pagination 分页：当数据量过多时，使用分页分解数据

在这里插入图片描述

我们下面演示的是带有背景色的分页

初始代码及效果：

在这里插入图片描述

在这里插入图片描述
我们查看 Pagination 分页的参数介绍，发现参数 layout 还有其它组件：

在这里插入图片描述

添加一些试试看：

在这里插入图片描述
在这里插入图片描述

除此之外，我们还可以给分页添加事件，我们主要学习两个事件即可：

在这里插入图片描述

在附加功能的源代码中，我们可以看到它是如何添加事件的，我们将其复制粘贴到我们的代码中即可：

在这里插入图片描述

在这里插入图片描述

添加后的代码及效果：

在这里插入图片描述

script 标签里面添加用于事件的方法，注意逗号：

在这里插入图片描述

警告不用管：

在这里插入图片描述

Dialog 对话框

Dialog 对话框：在保留当前页面状态的情况下，告知用户并承载相关操作

还是一样的套路，我们这里就演示一下自定义内容的对话框：

在这里插入图片描述

复制粘贴代码：

在这里插入图片描述
在这里插入图片描述

效果：

在这里插入图片描述

Form 表单

Form 表单：由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据

在这里插入图片描述

下面我们来使用一下典型的表单，我们模仿前面对话框的写法，实现点击页面上的按钮就可以了弹出表单的效果

我们将官网的代码复制粘贴并进行一定的改进，使其实现我们预期的效果，完整代码如下：

template 标签内添加的代码：

<!-- Dailog对话框-form表单 -->
<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>

<el-dialog title="活动" :visible.sync="dialogFormVisible">
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="活动名称">
      <el-input v-model="form.name"></el-input>
    </el-form-item>

    <el-form-item label="活动区域">
      <el-select v-model="form.region" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="活动时间">
      <el-col :span="11">
        <el-date-picker
          type="date"
          placeholder="选择日期"
          v-model="form.date1"
          style="width: 100%;"
        ></el-date-picker>
      </el-col>
      <el-col class="line" :span="2">-</el-col>
      <el-col :span="11">
        <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
      </el-col>
    </el-form-item>

    <el-form-item label="即时配送">
      <el-switch v-model="form.delivery"></el-switch>
    </el-form-item>

    <el-form-item label="活动性质">
      <el-checkbox-group v-model="form.type">
        <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
        <el-checkbox label="地推活动" name="type"></el-checkbox>
        <el-checkbox label="线下主题活动" name="type"></el-checkbox>
        <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
      </el-checkbox-group>
    </el-form-item>

    <el-form-item label="特殊资源">
      <el-radio-group v-model="form.resource">
        <el-radio label="线上品牌商赞助"></el-radio>
        <el-radio label="线下场地免费"></el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="活动形式">
      <el-input type="textarea" v-model="form.desc"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即创建</el-button>
      <el-button @click="dialogFormVisible = false">取消</el-button>
    </el-form-item>
  </el-form>
</el-dialog>

script 标签内添加的代码：

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ],
      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        }
      ],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      }
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    onSubmit() {
      alert(JSON.stringify(this.form));
    }
  }
};
</script>

效果：

在这里插入图片描述

案例

使用 Element 组件库实现下面这个界面，由于没有服务端的数据，所以请求数据部分可以不写：

在这里插入图片描述

步骤：

  • 创建页面，完成页面的整体布局规划
  • 布局中各个部分的组件实现

在工程的 views 文件夹下新建一个文件夹 tlias，再新建一个组件文件 EmpView.vue，将基础内容写入 EmpView.vue 文件中：

在这里插入图片描述

同时，要在 App.vue 文件中引用该组件，页面才会显示这个新组件：

在这里插入图片描述

接下来，我们开始来写页面

在 Element 中，存在着一个布局容器组件，可以帮助我们快速搭建页面：

在这里插入图片描述

找到适合案例的布局：

在这里插入图片描述

也就是第四个：

在这里插入图片描述

复制对应的代码到 EmpView.vue 中：

在这里插入图片描述

接下来，参考官网这个实例的代码，来完成页面的整体布局规划：

在这里插入图片描述

具体过程就是复制粘贴，再稍微修改一下就行，完整代码：

<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header style="font-size:40px; background-color: rgb(238, 241, 246)">tlias 智能学习辅助系统</el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu :default-openeds="['1']">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-message"></i>系统信息管理
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-1">部门管理</el-menu-item>
                <el-menu-item index="1-2">员工管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <el-table :data="tableData" border>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="image" label="图像" width="180"></el-table-column>
            <el-table-column prop="gender" label="性别" width="140"></el-table-column>
            <el-table-column prop="job" label="职位" width="140"></el-table-column>
            <el-table-column prop="entrydate" label="入职日期" width="180"></el-table-column>
            <el-table-column prop="updatetime" label="最后操作时间" width="230"></el-table-column>
            <el-table-column label="操作">
              <el-button type="primary" size="mini">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: []
    };
  }
};
</script>

<style>
</style>

效果：

在这里插入图片描述

接下来，参考官网 Form 表单中行内表单、DatePicker 日期选择器中的选择日期范围和前面我们所学的分页的源代码，将页面完善：

完善后代码：

<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header style="font-size:40px; background-color: rgb(238, 241, 246)">tlias 智能学习辅助系统</el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu :default-openeds="['1']">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-message"></i>系统信息管理
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-1">部门管理</el-menu-item>
                <el-menu-item index="1-2">员工管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <!-- 表单 -->
          <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="姓名">
              <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
            </el-form-item>

            <el-form-item label="性别">
              <el-select v-model="searchForm.gender" placeholder="性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="入职日期">
              <!-- 日期选择器 -->
              <el-date-picker
                v-model="searchForm.entrydate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>

          <!-- 表格 -->
          <el-table :data="tableData" border>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="image" label="图像" width="180"></el-table-column>
            <el-table-column prop="gender" label="性别" width="140"></el-table-column>
            <el-table-column prop="job" label="职位" width="140"></el-table-column>
            <el-table-column prop="entrydate" label="入职日期" width="180"></el-table-column>
            <el-table-column prop="updatetime" label="最后操作时间" width="230"></el-table-column>
            <el-table-column label="操作">
              <el-button type="primary" size="mini">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </el-table-column>
          </el-table>
          <br />

          <!-- Pagination 分页 -->
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="sizes, prev, pager, next, jumper, total"
            :total="1000"
          ></el-pagination>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      searchForm: {
        name: "",
        gender: "",
        entrydate: []
      }
    };
  },
  methods: {
    onSubmit() {
      alert("查询数据");
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
};
</script>

<style>
</style>

最终效果：

在这里插入图片描述

Vue路由

在这里插入图片描述

在前面的案例中，我们写的界面中有两个菜单，分别为部门管理和员工管理，它们分别由两个组件文件来实现，如果我们想实现在界面中点击哪个菜单就跳转到相应的界面，这就涉及到 Vue 路由的知识了

前面我们只写了员工管理页面的代码，这里我们给出部门管理的代码，后面需要用到，请在 tlias 文件夹下新建组件文件 DeptView.vue，并将代码复制到其中：

<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header style="font-size:40px; background-color: rgb(238, 241, 246)">tlias 智能学习辅助系统</el-header>
      <el-container>
        <el-aside width="230px" style="border: 1px solid #eee">
          <el-menu :default-openeds="['1', '3']">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-message"></i>系统信息管理
              </template>
              <el-menu-item index="1-1">部门管理</el-menu-item>
              <el-menu-item index="1-2">员工管理</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>

        <el-main>
          <!-- 表格 -->
          <el-table :data="tableData" border>
            <el-table-column prop="name" label="名称" width="250"></el-table-column>
            <el-table-column prop="updatetime" label="最后操作时间" width="250"></el-table-column>
            <el-table-column label="操作">
              <el-button type="primary" size="mini">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: "学工部",
          updatetime: "2010-01-01 12:00:00"
        },
        {
          id: 2,
          name: "教研部",
          updatetime: "2010-01-01 12:00:00"
        },
        {
          id: 3,
          name: "就业部",
          updatetime: "2010-01-01 12:00:00"
        },
        {
          id: 4,
          name: "人事部",
          updatetime: "2010-01-01 12:00:00"
        },
        {
          id: 5,
          name: "行政部",
          updatetime: "2010-01-01 12:00:00"
        }
      ]
    };
  },
  methods: {}
};
</script>

<style>
</style>

前端路由：URL 中的 hash（#号）与组件之间的对应关系

什么是Vue路由

  • 介绍： Vue Router 是 Vue 的官方路由
  • 组成：
    • VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件
    • <router-link>：请求链接组件，浏览器会解析成<a>
    • <router-view>：动态视图组件，用来渲染展示与路由路径对应的组件

在这里插入图片描述

如何使用 Vue 路由

  1. 安装 (创建Vue项目时已选择)，这一步在前面创建 Vue 工程时我们已经勾选，所以直接跳过

    指令：npm install vue-router@3.5.1

  2. 在 router 文件夹下的 index.js 中定义路由

    我们可以看到，在 index.js 中，已经向我们展示了如何来定义路由：

    在这里插入图片描述

    • 方式一：在前面导入要使用的组件文件，参数 path 设置为 ‘/’，component 设置为对应的组件名称
    • 方式二：参数 path 设置为 ‘/组件名缩写’，直接在 component 中导入要使用的组件文件
    • 两种方式都可以

接下来，我们来定义路由：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/emp',
    name: 'emp',
    component: () => import('../views/tlias/EmpView.vue')
  },
  {
    path: '/dept',
    name: 'dept',
    component: () => import('../views/tlias/DeptView.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

定义完路由，我们还需要修改一些代码，才能实现页面切换的效果：

将 DeptView.vue 和 EmpView.vue 中这两处地方都套上一层 router-link 标签，来实现当我们点击哪个文本就选择哪个路由的效果：

在这里插入图片描述

然后在 App.vue 中使用 router-view 标签来动态决定展示哪个页面：

在这里插入图片描述

最终效果：

在这里插入图片描述

在这里插入图片描述

但是，如果我们重新启动一下项目，会发现页面变成了空白：

在这里插入图片描述

这是因为系统默认一开始访问的路径是 '/'，但是我们并没有配置 '/' 的路由，所以访问不到页面，我们只需要配置一下就好了

在这里插入图片描述

我们给它配置当访问 '/' 时，重定向到 '\dept'，这样就可以访问到页面了

在这里插入图片描述

打包部署

在前后端分离开发中，前端人员开发前端程序，后端人员开发后端程序，这两部分程序需要分开部署在对应的服务器上

打包部署分为打包和部署两个步骤

打包

Vscode 中前端程序的打包很简单，我们只需要点击一下 NPM 脚本中的 build，然后就会自动打包到项目的 dist 文件夹中：

在这里插入图片描述

部署

Nginx

  • 介绍：Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。
  • 官网：https://nginx.org/

下面我们来安装 Nginx

点击下载：

在这里插入图片描述

选择稳定版本下载：

在这里插入图片描述

将其解压到一个路径没有中文没有空格的文件夹下：

在这里插入图片描述

这里简单介绍一下这个文件夹：

在这里插入图片描述

接下来，我们先将 html 目录下的内容删除，再将打包好的 dist 目录下的文件复制到 nginx 安装目录的 html 目录下：

在这里插入图片描述

然后就是启动 nginx，双击 nginx.exe 文件即可，Nginx服务器默认会占用 80 端口号

我们双击 nginx.exe，会发现什么都没有发生，按住 Ctrl + Shift + ESC 打开任务管理器，查看一下是否有 nginx.exe 这个进程：

在这里插入图片描述

如果没有，那应该是 80 端口已经被占用了，我们可以修改一下 nginx.exe 的默认占用端口：

打开 conf 目录下的 nginx.conf：

在这里插入图片描述

找到图中的内容，将 80 修改为一个没有占用的端口号即可：

在这里插入图片描述

nginx 启动后，我们来到浏览器，在地址栏输入 localhost:80（端口号和我不一样的要改），然后回车，就可以访问到部署在 nginx 服务器上的页面了

在这里插入图片描述

程序喵正在路上
关注
  • 33
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
java Javaweb Vue mysql宿舍管理系统
11-09
【标题】"java Javaweb Vue mysql宿舍管理系统"是一个基于Java、JavaScript框架Vue.js以及关系型数据库MySQL构建的学生宿舍信息管理平台。这个系统旨在帮助学校更有效地管理和维护学生的住宿信息，提供便捷的信息...
JavaWeb-Vue
10-08
JavaWeb-Vue是一个结合了JavaWeb技术和Vue.js前端框架的学习资源集合。Vue.js是一个轻量级的JavaScript库，被广泛用于构建用户界面，尤其适用于单页面应用（SPA）。它以其易学易用、灵活和高性能的特点深受开发者...
Java课题笔记~Element UI
qq_53142796的博客
08-22 665
Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。Element 提供了很多组件（组成网页的部件）供我们使用。例如 超链接、按钮、图片、表格等等~如下图左边的是我们编写页面看到的按钮，上图右边的是 Element 提供的页面效果，效果一目了然。我们学习 Element 其实就是学习怎么从官网拷贝组件到我们自己的页面并进行修改，官网网址是进入官网能看到如下页面。
Java-Vue基础
baidu_40924406的博客
10-11 560
//创建组件步骤//1.创建一个组件对象template:"<h1>欢迎来到王者荣耀</h1>"})//2.注册组件el:"#app",})
Vue在java项目中的使用——Vue基础_vue在哪个项目用的
最新发布
2401_85013639的博客
05-16 895
在cmd中直接使用npm来安装的一些工具的话会比较慢，所以我们使用淘宝的npm镜像：输入npm i -g cnpm --registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了 ，如果权限不够，请使用管理员运行命令提示符。与vue对象的el属性对应。>小于或等于20，姓名：{{item.name}},年龄：{{item.age}}大于20，姓名：{{item.name}}，年龄：{{item.age}}
Java自学——VUE简单入门
weixin_44501594的博客
06-02 225
Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。
Java炒饭之Vue简单入门
Java炒饭的博客
07-18 475
Vue入门
JavaWeb—Vue的简单介绍
weixin_45890113的博客
01-28 1695
概述数据渲染特点开发步骤①引入vue.js②定义一个div作为vue的容器③创建vue对象 3 Vue的格式 4 Vue指令介绍 概述 Vue指令就是带""前缀的特殊属性 , 比如: , , , … 5 Vue文本操作 概述 通过v-text, v-html, 插值表达式将vue数据插入到html标签内容中 v-text : 不能解析html标签 , 可以解决插值闪烁 v-html : 可以解析html标签 ,可以解决插值闪烁 插值表达式 : 不能解析html标签 , 不能解决插值闪烁
JavaWeb网页，vue+springboot+mybatisplus，老年管理平台
07-16
在本项目中，我们主要探讨的是一个基于JavaWeb技术栈的老年管理平台的构建，它融合了现代化的前端框架Vue.js、后端轻量级框架SpringBoot以及数据库操作组件MyBatisPlus。这个平台旨在为老年人提供一个集游戏、购物、...
基于javaweb+vue+mysql的课程管理系统源码.zip
08-22
基于javaweb+vue+mysql的课程管理系统源码.zip基于javaweb+vue+mysql的课程管理系统源码.zip基于javaweb+vue+mysql的课程管理系统源码.zip基于javaweb+vue+mysql的课程管理系统源码.zip基于javaweb+vue+mysql的课程...
基于vue3、Element-Plus、JavaWeb、MySQL技术实现的学生选课管理系统
05-07
这是一个使用现代化前端框架Vue3、UI库Element-Plus，以及后端JavaWeb技术和数据库管理系统MySQL构建的学生选课管理系统的项目。下面将详细讲解这个系统的关键技术及其应用。 **Vue3**： Vue3是Vue.js的最新版本，...
JavaWeb——Vue
mxyjsu2021的博客
04-30 1473
Vue.js是一个流行的前端JavaScript框架，用于构建单页应用程序和可重用组件。Vue.js的设计目标是提供一种简单的方法来构建Web应用程序，同时尽可能地灵活和高效。Vue.js也被称为MVVM(Model-View-ViewModel)框架，因为它将应用程序的状态和行为分离成模型(model)、视图(view)和视图模型(viewmodel)的组件。官网：Vue.js修改变量的值，标签值自动变化；反过来，修改标签的值，变量的值也跟着更新，这就是双向绑定。
前后端分手大师——MVVM 模式
weixin_34130389的博客
11-15 547
阅读目录简而言之组成部分没有什么是一个栗子不能解决的 简而言之 之前对 MVVM 模式一直只是模模糊糊的认识，正所谓没有实践就没有发言权，通过这两年对 Vue 框架的深入学习和项目实践，终于可以装B了有了拨开云雾见月明的感觉。 Model–View–ViewModel(MVVM) 是一个软件架构设计模式，由微软 WPF 和 Silverlight 的架构师 Ken Cooper 和 Ted Pet...
java-Vue
qq_40301475的博客
03-15 2814
标题
vue基础——java程序员版(vue入门)
陨石的博客
03-19 1546
​ 这是一个java程序员的vue学习记录。
【java+vue】前后端项目架构详细流程
weixin_68266674的博客
03-10 1927
1.在磁盘上创建文件（web），并移到Vscode的工作区2.进入该文件的终端3.检测node和vue是否正常，若不显示版本号，则自行下载4.生成vue1.执行命令：vue create project按空格选择，回车则进行下一步保存本次配置（y）取个合适的名字，下次创建vue的时候就可以选择这个名，会默认使用这次的配置等待下载。。。。。下载完成如下如图所示。
vue 基础（一）
youhaiguo的博客
07-26 301
VUE 一. 开发工具 VUE开发环境个人推荐使用VS code, 然后安装特定的插件即可开发，可用插件如下： Vetur —— 语法高亮、智能感知、Emmet等 EsLint—— 语法纠错 Auto Close Tag —— 自动闭合HTML/XML标签 Auto Rename Tag —— 自动完成另一侧标签的同步修改 Path Intelli...
Vue框架详解（适合Java学习者）
Coder Xu
03-23 1万+
文章目录一、前言二、Vue概述三、MVVM架构1.什么是MVVM2.MVVM的好处3.MVVM图解四、第一个Vue程序五、Vue七大属性六、常用指令1.绑定属性（v-bind）2.判断（v-if）3.循环（v-for）4.绑定事件（v-on）七、数据双向绑定八、Vue组件九、Vue生命周期1.Vue生命周期理解2.Vue生命周期图解3.钩子函数九、Axios异步通信十、计算属性十一、插槽slot十二、自定义事件内容分发十三、vue-cli脚手架1.什么是vue-cli2.使用vue-cli的环境前提3.创建
Vue在java项目中的使用——Vue基础
热门推荐
Jack__iT的博客
03-05 1万+
什么是MVVM框架？ View---ViewModel---Model之间的通讯 View:视图，dom ViewModel：通讯，观察者，能监听到数据的变化 Model：数据，JavaScript对象 常用的MVVM框架有angular.js、react.js、vue.js MVVM的应用场景： 复杂交互逻辑的前端应用 提供基础的架构抽象 通过Ajax数据持久化，保证前端用户体...
javaweb vue 期末作业
07-09
javaweb vue 期末作业是一项综合性作业，结合了JavaWeb和Vue的技术要求。这个作业要求我们设计并实现一个具有前后端交互的Web应用程序。 首先，我们需要使用JavaWeb技术来搭建后端环境。我们可以使用Java框架，如...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序喵正在路上

你的鼓励是我创作最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值