目录一、Vue概述二、Vue快速入门三、Vue指令3.1 v-bind和v-model3.2 v-on3.3 v-if和v-show3.4 v-for3.5综合案例四、Vue生命周期 一、Vue概述先来分析下页面的组成:一个完整的html页面包括了视图和数据,数据是通过请求从后台获取的,那么意味着我们需要将后台获取到的数据呈现到页面上,很明显, 这就需要我们使用DOM操作。正因为这种开发流程,所
【前端UI框架】VUE ElementUI 离线文档 可不联网打开。
原创
2024-09-14 17:42:27
735阅读
背景:后端程序员只专注于后端逻辑,服务,组件,对于前端就成了短板,所谓术业有专攻,不求专业水准,但求略懂皮肤,平时做点小工具也是必要的,例如工具的DashBoard界面,能快速构建,能腾出更多时间关注后端逻辑,就可以事半功倍,下面要介绍的是MVVM模式的VUE+Element UI,VUE非常常见,具有双向绑定功能,无需刷新即见即所得,对构建前端UI能节省不少时间,Element UI也相当简单,
转载
2024-03-14 07:24:04
78阅读
表单验证在我们前端开发中是经常要用到的业务需求,在日常开发中会大量的使用!那么,我们每天都在使用的这种验证表单是如何封装实现的呢?今天我们就对这个组件的封装来进行研究学习。首先看下elementui的效果 使用方法就不说了,可以仔细阅读使用文档 宇宙门: elementui官网下面是我们今天要展示的自己封装的效果,是此次的重点! 相关的技术栈是vue3.0+ts+bootsrap(借用她的样式)正
转载
2024-07-29 23:23:58
108阅读
element-ui-verify是对ElementUI原本的校验封装之后的插件,并不会影响使用ElementUI的原生校验。使用环境为vue+element-ui+webpack模块环境,首先使用淘宝镜像安装cnpm install -s element-ui-verify,安装之后在main.js中引入并使用 1 import elementUIVerify from 'elem
转载
2024-02-22 11:42:05
147阅读
ElementUI简介 我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的, 所以饿了吗推出了基于VUE2.0的组件库,它的名称叫做element-ui,提供了丰富的PC端组件Vue+ElementUI安装CDN方式: <!-- 1. 导入css -->  
转载
2024-02-19 11:05:24
42阅读
文章目录1、vue的生命周期2、Vue2.x 双向绑定原理3、Vue3.x 响应式原理4、v-for 为什么要加上 key5、Vdom的理解6、vuex 的结构,以及 actiion 和 mutation 的区别7、axios 的原理以及优点,如何终止 axios 请求8、vue 的缺点9、vue 和 react 区别10、computed 和 watch 区别,以及 computed 如何实现缓
表格中我们经常需要动态加载数据, 如果有多个页面都需要用到表格, 那我希望可以有个组件, 只传数据过去显示, 不用每个页面都去写这么一段内容: 1 <el-table :data="tableData" border size="mini" fit highlight-current-row height="500">
2 <el-table-column ty
转载
2024-04-23 10:37:58
686阅读
安装脚手架终端执行命令:npm install -g @vue/cli创建vue项目**方法一:**基于交互式命令行的方式,创建新版vue项目,执行命令:Vue create my-project //my-projec为项目名。按照提示内容选择创建方式。创建完成后cd到项目中可以执行npm run serve命令运行项目运行完成后可以访问生成的地址查看创建的项目**方法二:**图形化方式创建vu
转载
2024-04-14 21:01:30
54阅读
目录ElementUI简介Node.js是什么npm是什么Vue+ElementUI安装一、CDN方式二、NPM(需要配置NodeJs环境) ElementUI简介我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的, 所以饿了吗推出了基于VUE2.0的组件库,它的名称叫做element-ui,提供了丰富的PC端组件 Elemen
转载
2024-04-15 13:23:46
102阅读
1、安装vue cli3/4 2、创建项目 1)vue create project 或可视化创建vue ui 2)vue init webpack project vue ui方式 3、vue cli2 与vue cli3/4的生成目录区别 1)build文件夹配置webpack,基础配置、开发环
原创
2021-07-13 16:56:41
276阅读
核心知识点关于 v-show属性的相关使用大致效果图其中上方文头部导航,左边为菜单选项,中间为index页面。前提前提需要阅读上一篇,使用Vue UI 方式创建 Hello World Vue 项目。教程进行组件化新建目录如下,新建文件如下其中分为两个文件夹,一个为views文件夹,一个为components文件夹,一个存放相关文件页面信息,一个存放相关的组件信息。创建相关的url创建相关的页面u
转载
2024-07-30 19:06:28
81阅读
一、介绍:el-tree在element文档中有查询全树的代码,本文主要是在此基础上添加了增加、删除、修改的界面样式与功能。二、具体来说:1、鼠标移动到树上显示删除和修改: 点击删除,当前节点删除; 点击修改,树的选中节点变成input可以重新输入名称并且右边出现取消或确认的icon。2、点击底部添加按钮,如果未选中树
转载
2024-04-06 08:04:15
828阅读
文章目录1. 引言2. ElementUI案例2.1 创建项目2.2 安装依赖2.3 创建页面2.4 配置路由2.5 运行程序1. 引言通过前面的章节
原创
2022-01-25 17:44:37
1644阅读
div、Flex、element-ui-layout页面布局一、div页面布局1、页面布局标签属性2、定位属性3、盒子模型(1)标准盒模型(2)怪异盒模型二、Flex页面布局1、基本概念2、容器的属性3、项目的属性三、element-ui —— layout布局1、基本概念2、gutter属性3、offset属性4、对齐方式 一、div页面布局1、页面布局标签属性(1)标签 无意义块状标签<
转载
2024-04-07 15:45:07
2399阅读
直接先说最常用的一、使用组件以el-input为例1. Attributes:attributes属性直接在组件上引用,前面的checkbox表示引用的标签,比如:<template>
<el-input type="number"></el-input>
// type为字符串的话可以直接写
<el-input :type="inputType"&
转载
2024-04-03 16:18:40
1522阅读
表格中我们经常需要动态加载数据, 如果有多个页面都需要用到表格, 那我希望可以有个组件, 只传数据过去显示, 不用每个页面都去写这么一段内容:1 <el-table :data="tableData" border size="mini" fit highlight-current-row height="500">
2 <el-table-column type
转载
2024-06-08 21:39:44
301阅读
ElementUI(vue UI库)、iView(vue UI库)、ant design(react UI库)中组件的区别: 事项 | ElementUI | iView | ant design | | | 全局加载进度条 | 使用第三方 | 自带组件 | 使用第三方
转载
2018-04-01 00:24:00
285阅读
2评论
接上篇《22.使用Mint UI的infinite-scroll实现上拉分页加载》上一篇我们讲解
原创
精选
2023-03-18 10:05:59
983阅读