- 博客(23)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 纯css旋转相册(源码)
效果图:<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body{ animation:play 20s linear 0s infinite alternate; } .box{ width: 200px; height: 300px;
2020-09-28 16:39:24
721
原创 前端js-------(数学Math()对象常用方法)
abs(X)返回X的绝对值random()返回0~1之间的随机数Math.random()*(y-x)+x随机生成x~y之间的随机数Math.random()*20随机生成0~20之间的数round()四舍五入ceil(x)向上取整floor(x)向下取整max(arr)返回数组中的最大数min(arr)返回数组中的最小数pow(x,y)返回,x的y次幂...
2020-09-28 14:29:39
256
原创 vue开发者模式Vue调试工具(浏览器为vue专门提供的扩展插件)vue-devTools
下载地址:vue-devTools安装步骤首先进入浏览器设置，点击扩展程序打开开发者模式点击加载以解压的扩展程序直接选择下载成功的文件夹加载成功后选择右下角开启是否安装成功通过npm run serve启动项目如果看到浏览器右上角的vue插件图片则成功安装,就可以使用了...
2020-09-28 10:39:02
1270
原创 vue项目移动端适配(flexible.js)
想要达到页面的自适应通过rem+淘宝的flexible.js第一步(cmd)输入命令npm install lib-flexible --save第二步(在main.js中引入lib-filexible)import 'lib-flexible/flexible.js'第三步(在项目根目录注释掉如下标签)<meta name="viewport" content="width=device-width, initial-scale=1.0">因为安装flexible会自动生
2020-09-28 08:32:58
844
原创 vue生命周期+钩子函数+各个钩子函数的作用
1.什么是vue生命周期?每个Vue实例再被创建之前都要经过一系列的初始化过程,这个过程就是Vue的生命周期。2.各个钩子函数之间的生命周期干的事在beforeCreate和create钩子函数之间的生命周期在这个生命周期之间,进行初始化,可以看到created的时候数据已经和data属性进行绑定(放在data中的属性值发生改变的同时,视图也会改变)此时还没有el选项created和beforeMount间的生命周期首先会判断对象是否有el选项,如果有的话就继续向下编译,如果没有el选
2020-09-27 22:56:48
1324
原创 vue路由跳转后高亮问题|active class(激活状态)linkActiveClass 和 linkExactActiveClass以及exact
linkActiveClass 是模糊匹配linkExactActiveClass 是精准匹配exact也是精准的意思问题看下边图片:当css样式为#nav a.router-link-exact-active { color: #42b983; }时,如果下边没有子路由不会有什么问题,但是如果有子集路由的话,当你点击小说下边的子集路由小说就不会高亮图片如下:解决这个问题只需要改变css为#nav a.router-link-active { color: #42b983; }对比初始的
2020-09-27 21:53:24
3610
原创 纯css太极动画(源码)
<html> <head> <title>过渡</title> <meta charset="utf-8"/> <style type="text/css"> body{ margin:0; background-color:#ddd; } .taiji{ display:flex; align-items:center; height:400px; wi
2020-09-26 21:31:21
325
原创 vue项目解决跨域问题(通过服务器代理)
使用的是服务器代理方式解决跨域第一步在vue项目根目录中创建文件夹vue.config.js文件(根目录就是项目名称目录就是根目录,直接在项目名称上右击创建文件)注意:文件名是固定的vue.config.js第二步打开文件vue.config.js写入如下代码:module.exports = {//搭建服务器 devServer: { //代理 proxy: { //代理名称 '/api': {
2020-09-26 13:18:19
1983
4
原创 js获取个屏幕鼠标盒子的距离(e.clientX,e.offsetX,e.pageX,e.screenX)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #box{ width: 200px; height: 200px; border: 1px solid red.
2020-09-23 09:02:11
634
原创 前端JS-------(时间Date()对象常用方法)
1.创建对象var d=new Date()2.方法getDate()获取当前日期对象是几日
2020-09-22 20:17:41
386
原创 前端JS-------(数组Array()对象常用方法)
push()像数组的末尾添加一个或读个元素,并返回数组新长度用法:arr.push(“西楠”);pop()删除数组的最后一个元素用法:arr.pop();//删除最后一个unshift()向数组前边添加一个或多个元素,并返回新数组长度用法:arr.unshift(“西”,“楠”);//添加多个shift()删除数组的第一个元素,并返回被删除的元素用法:arr.shift();//删除第一个元素forEach()遍历参数为一个回调函数用法:arr.forEach..
2020-09-22 20:12:47
174
原创 弹性盒子(display:flex)
1.属性flex-direction:指定了弹性容器中子元素的排列顺序属性值:row;(默认值) 水平显示,一行排列row-reverse;与row排列顺序相反column;垂直显示一列显示column-reverse;与column排列顺序相反initial;设置该属性为它的默认值inherit;从福原色继承该属性2.属性justify-content:设置弹性盒子元素在主轴(横)方向上的对齐方式属性值:flex-start(默认) 项目位于容器开头flex-end项目位于容器
2020-09-22 08:50:58
512
原创 css笔记(更新中)
1.什么是css层叠样式表标记语言2.css的作用①增强控制网页样式②样式与网页分离3.css语法格式选择器{ 属性1:属性值1; 属性2:属性值2; .....}4.HTML中导入css的三种方式1.)第一种方式内嵌样式<style type="text/css"> .选择器{ 属性1:属性值1; 属性2:属性值2; ..... } </style>2.)第二种方式
2020-09-21 20:52:56
104
原创 HTML(form表单)菜鸟笔记
标签1; <form></form>2; <selected><option></option>下拉项</selected>下拉菜单3;<textarea></textarea>文本域css样式:resize:none去除文本域的拉动效果border:noneoutline:none2.form标签属性action:用户提交的数据提交到的位置[指定的页面]method:用户的提交方式.
2020-09-21 19:49:22
285
原创 vue实现分页效果原生,升级为组件写法(两种)
需求:实现分页通过组件传参第一步:通过先不封装自己写出来效果(代码如下):<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
2020-09-21 10:52:25
324
原创 js正则表达式(随便写的笔记)
1.语法①构造函数的方法创建: var 变量=new RegExp(“正则表达式”,“匹配模式”);②字面量大方法创建:(直接双斜线创建)/一般都用这种方式 var 变量=/正则表达式/匹配模式;例子://构造函数var reg1=new RegExp("a","i");//这个
2020-09-17 19:52:45
211
原创 vue笔记(更新中-------)
1.v-text和v-html的区别相同点: 1.都覆盖掉所有元素的子节点 2.都可以去渲染数据不同点 1.text不能解析HTML标签 2.html可以解析HTML标签2.v-show和v-if的区别v-show:显示和隐藏 (相当于修改display:none)v-if :直接创建或者删除标签3.datadata命名不能使用 '$' , _ 开头数据可以在当前模板中直接使用(不需要`this`)4.什么是数据驱动视图1.监听指定的数据2.指定的数据发生改变
2020-09-17 08:01:52
310
2
原创 js原生冒泡排序
//冒泡排序（从小到大）function bubbleSortSmallToBig(arr){ for(var i = 1;i < arr.length;i ++){ for(var j = 0;j < arr.length - i;j ++){ if(arr[j] > arr[j + 1]){ var t = arr[j]; arr[j] = arr[j + 1];
2020-09-14 08:21:15
226
原创 html笔记(更新中------)
1.HTML标签标签分为:①单标签:<br/><meta/>…像这种就属于单标签②双标签:<head></head> <body></body> <html></html>…这种格式就是双标签2.HTML属性①一般存在于标签里②一个HTML标签里可以存在对个HTML属性③属性值放在属性引号里html属性语法格式:<!--<标签名 属性1="属性值1" 属性2="属
2020-09-13 19:34:52
276
原创 web菜鸟第一天使用博客(主体结构)
HTML的基本结构：<html>根控制标记（头） <head>头控制标记（头） <title>标题</title> 标题标记 </head>头控制标记（尾） <body>网页显示区域（一般要实现的代码都在这里写）</body></html>根控制标记（尾）（开头和结尾成对出现，双标签）...
2020-09-09 20:13:40
174
vue-devtools扩展
2020-09-28
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人