自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(23)
  • 收藏
  • 关注

原创 微信小程序学习1--环境准备

开发微信小程序,需要有相应的环境准备1、注册账号进入小程序注册页 根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号。2、获取AppID小程序的 AppID 相当于小程序平台的一个身份证,后续你会在很多地方要用到 AppID登录成功后进入下面这个页面点击左侧菜单栏里的开发管理,再点击开发设置就可以看到自己的AppID3、安装开发工具前往 开发者工具下载页面 ,根据自己的操作系统下载对应的安装包进行安装...

2021-03-02 10:54:28 169

转载 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 661

原创 鼠标悬浮导航栏显示下拉菜单

在这里介绍鼠标悬停导航栏显示下拉菜单得两种方法,html和css样式就不贴代码了。1、原生js<script> // window.onload = function(){ // 获取需要悬浮的对象 let show = document.getElementById("businessarea"); // 获取被隐藏的菜单 let menu = document.getEl

2021-02-03 18:08:00 6347 2

原创 鼠标悬停时,图片切换的方法

在我们写前端页面时,经常会遇到这种情况,就是鼠标悬停某个图标或者图片时,图片颜色发生了变化或者图片发生改变。这种情况如何实现?1、直接在html样式里进行切换<div class="container"> <img src="../img/icon-social-ip-white.png" onmouseover="this.src='../img/icon-social-ip-blue.png'" onmouseout="this

2021-02-02 14:15:01 14702 3

原创 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 8877 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 235

原创 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 15158 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 3258

原创 [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 1058

原创 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 1731 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 1405

原创 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 1081 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 757

原创 Flex布局--子项常见属性

1、flex:子项目占的份数定义子项目分配剩余空间,默认值为0<section> <div class="item1"></div> <div class="item2"></div> <div class="item3"></div></section>section{ width: 60%; height: 150px; background-color: pink; m

2020-12-30 15:54:45 445

原创 Flex布局--父项常见属性

文章目录前言一、Flex布局是什么?二、基础用法1.display:flex;2.父项常见属性前言flex 是常用的 css3 布局方式,可以用少量的代码高效的实现各种页面布局,是一个基础的但是必须会的基本技能一、Flex布局是什么?Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。二、基础用法1.display:flex;如果你想用flex布局,首先得在父盒子里填写 display:flex;属性,来控制子盒子的属性和排列方式。<

2020-12-30 11:24:38 436

原创 mongoose的增删改查

文章目录一、mongoose是什么?二、使用步骤1.下载2.引入库3.数据库监听4.创建数据类型5.添加6.删除7.更新8.查找一、mongoose是什么?mongoose 是一个操作 mongodb 的nodejs 驱动库。mongodb 是数据库,nodejs 是js的一个运行环境,凭什么nodejs 可以操作 mongodb,所以这个时候就需要相应的驱动程序来提供接口。二、使用步骤1.下载初始化项目 npm init -y下载 npm i mongoose --save2.

2020-12-28 15:12:51 375

原创 用css隐藏页面元素的六种方法

用css隐藏页面元素的六种方法1.display: none;真正意义上的隐藏,页面源码都不显示隐藏的页面源码,隐藏的元素不占用任何空间,元素的盒空间都不生成,好像元素就不存在,但是可以通过DOM操作访问到2.visibility: hidden;显示不可见,元素位置处显示一块空白,会影响布局,不过不会影响交互操作。3.opacity:0设置元素的透明度,会影响页面布局 但只是不可见 元素位置显示一块空白,会影响页面交互操作4. position: absolute; top: -9999px

2020-12-23 20:30:26 309 2

原创 实现轮播的原生js

文章目录前言一、轮播图是什么?二、代码1.html2.css3.js总结前言小韩同学昨天去面试前端开发工程师的时候,面试官让我用原生js写一个轮播图,由于最近都是用框架写项目,原生的都不太记得了。回来之后查了一下资料,写了一个简单的。一、轮播图是什么?任何的一个网站,一个网页,都会出现一个轮播图。而轮播图的基本功能有自动切换下一张图片,通过点击左右按钮切换以及点击下方的状态指示器(小圆点)切换。二、代码1.html首先要搭建一个基础页面代码如下:<div id="containe

2020-12-22 14:09:13 175

原创 node.js常见面试题

node.js常见面试题1、node的特点单线程非阻塞I/O事件驱动event-driven是一个JavaScript的运行环境依赖于Chrome V8 引擎进行代码解释轻量,适用于实时数据交互2、node的核心模块fs,事件,流,网络3. exports和module.exports的区别module.exports 初始值为一个空对象 {}2.exports 是指向的 module.exports 的引用3.require() 返回的是 module.exports 而不

2020-12-19 11:08:02 950 1

原创 node.js中复制粘贴文件的方法

node.js中复制粘贴文件的方法方法一fs.copyFile('./01.txt','./02.txt',(err)=>{ if(err){ console.log(err) }else{ console.log('copy file succeed') }})方法二fs.readFile('./01.txt',(err,data)=>{ if(err){ console.log(err) }else{ fs.writeFile('./03.txt',da

2020-12-17 16:57:02 1220

原创 node.js中文件的操作

node.js中文件的操作文章目录node.js中文件的操作前言一、文件是什么?二、使用步骤1.加载fs2.读取文件3.相对路径转成绝对路径4.文件重命名5.写文件总结前言浏览器中的js没有文件操作能力node.js有文件操作能力一、文件是什么?fs是file-system的简写,文件系统在node中想要进行文件操作,必须引入fs这个核心模块在fs这个核心模块中,提供了所以文件操作相关的API二、使用步骤1.加载fs代码如下(示例):var fs = require('fs')

2020-12-17 16:51:45 143

原创 tab栏切换

tab栏切换1、jquery方式首先引入 jquery.js 文件<style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; } .wrapper { width: 1000px; height: 475px; margi

2020-12-16 16:15:48 568 1

原创 vue.js面试题1

vue.js面试题11、你知道v-model的原理?v-model本质可以看成是value + input方法的语法糖。 可以通过model属性的prop和event属性来进行自定义。原生的v-model,会根据标签的不同生成不同的事件和属性(绑定数据并且监听数据改变)2、你知道vue2.0兼容IE哪个版本以上吗?不兼容IE8及以下的因为vue的响应式原理是基于es5的Object.defineProperty的,而这个方法不支持ie8及以下的3.v-once的使用场景有哪些?其作用是只渲染

2020-12-15 17:01:52 267

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除