vue
文章平均质量分 57
爱喝奶茶的小韩
路漫漫其修远兮
展开
-
Vue项目里 this.$router.push、replace、go的区别
1、this.$router.push描述:跳转到不同的url,但这个方法会向history添加一个记录,点击后会返回到上一个页面相当于 <router-link :to="...">用法//字符串this.$router.push('home')//对象this.$router.push({path:'home'})//命名的路由this.$router.push({name:'user',params:{userId:123}})//带查询参数,变成/register转载 2021-02-04 17:49:57 · 652 阅读 · 0 评论 -
Element UI学习8--this.$prompt,this.$message,this.$confirm,this.$notify
1、this.$prompt输入框弹窗if (object == undefined) { this.$prompt('请输入', '添加优惠券分类', { confirmButtonText: '确定', cancelButtonText: '取消' }).then(async ({ value }) => { })如图:2、this.$message消息提示if (re原创 2021-01-26 11:18:16 · 8842 阅读 · 4 评论 -
Element UI学习7--Form 表单
1、基础用法<template> <div> <!-- model 表单数据对象 --> <el-form :model="user" ref="form"> <el-form-item label="账号" prop="userNumber"> <el-input type="原创 2021-01-22 17:30:35 · 229 阅读 · 0 评论 -
Element UI学习6--Carousel 走马灯
轮播是前端页面运用的比较广泛的一个功能。在有限空间内,循环播放同一类型的图片、文字等内容。今天主要学习了Element UI中Carousel 走马灯这一功能的使用方法。1、基础用法1、默认 Hover 指示器触发<template> <div> <el-carousel> <el-carousel-item v-for="item in imgwrap" :key="item.url"> <im原创 2021-01-20 17:24:05 · 14936 阅读 · 2 评论 -
Element UI学习5--Tabs 标签页
在很多网页中都运用了标签页,也就是选项卡的功能。之前介绍了用 jquery和 vant组件实现tab栏切换的方法,接下来介绍一下Element UI中Tabs 标签页的使用。1、基础用法示例如下:<template> <div> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="推荐" name="first"原创 2021-01-18 14:31:25 · 3234 阅读 · 0 评论 -
[vue-router] Duplicate named routes definition
[vue-router] Duplicate named routes definition当vue项目控制台出现[vue-router] Duplicate named routes definition: { name: “login”, path: "/login}这样的警告时,说明重复命名了路由找到router文件夹示例:{ path: '/', name: 'login', component: () => import('@/views/Lo原创 2021-01-18 10:12:46 · 1044 阅读 · 0 评论 -
Element UI学习4--NavMenu 导航菜单
1、顶栏导航菜单默认为垂直模式,通过mode属性可以使导航菜单变更为水平模式。在菜单中通过submenu组件可以生成二级菜单。<tamplate><div><el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> <!-- s原创 2021-01-07 17:03:22 · 1713 阅读 · 1 评论 -
Element UI学习3--Cascader 级联选择器
1、基础用法1、默认 click 触发子菜单<div class="block"> <span class="demonstration">默认 click 触发子菜单</span> <el-cascader v-model="value" :options="options" @change="handleChange"> </el-c原创 2021-01-07 11:54:53 · 1399 阅读 · 0 评论 -
Element UI学习2--input输入框
1、基础用法<template> <div> <el-input v-model="input" placeholder="请输入内容"></el-input> </div></template><script>export default { name:'input', data(){ return{ input:''原创 2021-01-06 17:02:29 · 1065 阅读 · 1 评论 -
Element UI学习1--select选择器
文章目录一、Element UI是什么?二、使用步骤1.安装2.select选择器总结一、Element UI是什么?Element 饿了么前端出品的一套 基于 Vue 2.0 的桌面端组件库二、使用步骤1.安装1、npm 安装npm i element-ui -S2、CDN<!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"&原创 2021-01-05 18:34:24 · 746 阅读 · 0 评论