Day17(yapi插件，vue、ElementUI、springboot与elementUI整合、前后端代码分离(代码生成器、前端工程、后端工程、前后端端口调整)、前端页面调整)

最新推荐文章于 2024-06-04 16:59:14 发布

weixin_39919087

最新推荐文章于 2024-06-04 16:59:14 发布

阅读量1k

点赞数

分类专栏： web工程杂文 springboot 文章标签： vue ElementUI 前后端分离前端页面调整

本文链接：https://blog.csdn.net/weixin_39919087/article/details/106614483

版权

人人开源官网

https://www.renren.io/guide/

下面讲解的项目来源于人人开源网

yapi 插件问题

https://cloud.tencent.com/developer/article/1517980

浏览器插件不能使用问题

什么是vue?

vue是js体系，相当于jquery，jquery 操作dom元素,vue的设计模是mvvm，实质上是mvc加强版，vue最核心的是数据双向绑定。

读取vue数据：{ {}}、v-model、：等等

使用vue有两种方式：

第一种传统方式:在js标签中导入vue.js,使用时 new vue({})

第二种方式：webpackage 分包模式 ,需要nodejs, npm install等

ElementUI介绍

ElementUI官网地址：https://element.eleme.cn/#/zh-CN/component/button

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k4uI5lGu-1591584009644)(C:\Users\wys\AppData\Roaming\Typora\typora-user-images\image-20200323104820187.png)]$

elementUI是饿了么团队开发的一款基于vue的前端组件库，提供了配套设计资源，帮助页面快速成型

elementUI 使用的vuejs语法+自定义组件库

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

elementUI自动代码提醒插件：vscode-element-helper

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ivl5rKhC-1591584009646)(Day17.assets/image-20200516095627887.png)]

elementUI布局器

element UI布局器地址： http://lowcode.magicalcoder.com/magicaldrag/index-page.html

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XgIaGojD-1591584009648)(C:\Users\wys\AppData\Roaming\Typora\typora-user-images\image-20200323104753233.png)]$

方法绑定加@符号

属性绑定加：符号

实例演示：

动态table添加html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入ElementUI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入ElementUI组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
	    <el-button size="mini" @click="tableAdd">add</el-button>
        <el-table :data="tableData" stripe>
            <el-table-column prop="date" label="日期"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
            <el-table-column label="操作" align="center">
                <!--
                    slot-scope：作用域插槽，可以获取表格数据
                    scope：代表表格数据，可以通过scope.row来获取表格当前行数据，scope不是固定写法
                -->
                <template slot-scope="scope">
                    <el-button type="danger" size="mini"  @click

最低0.47元/天解锁文章

weixin_39919087

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Day17(yapi插件，vue、ElementUI、springboot与elementUI整合、前后端代码分离(代码生成器、前端工程、后端工程、前后端端口调整)、前端页面调整)

人人开源官网https://www.renren.io/guide/下面讲解的项目来源于人人开源网yapi 插件问题https://cloud.tencent.com/developer/article/1517980浏览器插件不能使用问题什么是vue?vue是js体系，相当于jquery，jquery 操作dom元素,vue的设计模是mvvm，实质上是mvc加强版，vue最核心的是数据双向绑定。读取vue数据：{{}}、v-model、：等等使用vue有两种方式：第一种传统方式:在js
复制链接

扫一扫