爱喝奶茶的小韩-CSDN博客

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

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

2021-03-02 10:54:28 181

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

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

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

2021-02-03 18:08:00 6384 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 14883 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 8959 4

原创 Element UI学习7--Form 表单

1、基础用法<template> <div>  <el-form :model="user" ref="form"> <el-form-item label="账号" prop="userNumber"> <el-input type="

2021-01-22 17:30:35 252

原创 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 15386 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 3287

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

原创 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 1764 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 1420

原创 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 1091 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 775

原创 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 466

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

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

2020-12-30 11:24:38 456

原创 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 389

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

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

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

原创实现轮播的原生js

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

2020-12-22 14:09:13 187

原创 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 961 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 1250

原创 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 153

原创 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 577 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 278

hanrabbit的博客