- 博客(21)
- 收藏
- 关注
RSS订阅原创 less的基本用法
less是css样式的一种预处理器，它能在一定程度上减少css的繁琐度1.引入less文件 @import '地址'; 注:一定要记得加分号2.less的最大特点 它能在父代的css代码中直接写入子代css代码，以此循环写入 解释:写在父代括号内的代码就代表父代的子代(避免了每次书写父代选择器)能省去很多不必要的代码3.less中伪类的选取 把一个伪类(例如::aft...
2021-11-27 08:30:00
605
原创 vue中父子传值问题
vue中父子传值通过props和$emit来执行，非父子传值利用vuex中的store执行(这是个插件，可以看我前面的博客) 父传子 父组件通过在子组件上进行值的绑定传递，子组件通过props接收父组件传递的值 写法: 父传子<template> <div> <h2>this is Father</h2> &...
2021-11-24 20:11:18
292
原创 css中伪元素的运用
::before与::after before是在之前添加，after是在之后添加 运用场景:例如①:一行文字下方添加一条下划线 可以利用box 的下边框，也可以利用after设置一条下划线。 ②:清除浮动(BFC)，// 待清除浮动的calss.floatfix:after { // 设置为块级元素 display: block; ...
2021-11-24 16:53:34
224
原创 Vue中路由管理router
router的基本作用： 重置路由地址，拦截路由(全局、局部) 缺点(个人为) ： 有/#不美观 使用方法： 安装vue-router npm i -S vue-routerimport Vue from 'vue'import Router from 'vue-router'// 因为要实现拦截所以引入的store组件获取token...
2021-11-11 11:00:00
189
原创 vue的安装与搭建
vue脚手架入门安装1.全局安装vue脚手架cnpm i -g @vue/cli@42.在需要新建项目的目录下打开cmdvue create 项目名 3.直接选择默认2版本安装即可项目目录介绍 1.在文件中删除掉.git，vue作者的仓库，对我们而言无用 2.作用分析...
2021-11-07 11:00:00
65
原创 vuex的基本使用
vuex的基本作用，将数据进行暂存处理，实现数据的全局存读取 缺点： 数据是暂存数据，刷新页面即消失 处理方法： 引入vuex-persistedstate，他能将数据存储到localStore中(key为vuex)，刷新页面，数据仍然存在使用方法： 安装vuex、vuex-persistedstate npm i -S vuex vuex-persiste...
2021-11-05 17:27:12
77
原创 初识Vue，文档部分
通过脚手架安装vuenpm i -g @vue/cli@4 全局安装脚手架 vue create vue-demo 创建vue项目=>嫌麻烦直接选择vue版本初识vue项目目录 node-modules npm插件存放位置 public 静态页面存放位置 s...
2021-11-03 16:15:00
57
原创 初识Vue，个人小记
监听数据变化 watch方法 能在数据变化后做任何操作 用法，数据名(参数1,参数2) 参数1是新数据，参数2是旧数据 computed方法 只能计算变化后的数据 用法，命名(不用在data中声明)(){ return 需要做的操作 }watch: { num(newValue, oldValue)...
2021-11-03 01:00:00
68
原创 浏览器的本地储存
高版本的浏览器中，js提供了sessionStorage和globalStorage。在html5中，提供了loaclStorage 取代globalStorage。html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。两者的区别，sessionStorage是临时储存，localStorage是长期储存前者存在一个会话中(通俗的讲就是存在于一组页面中浏览器)，后者只要不手动清理就一直存在如何把数据储存到Storage中被
2021-10-28 10:00:00
63
原创 Nodejs 实现后端数据到前端
nodejs安装应用框架，可以访问npmjs.com 进行查找进入需要编译的位置，打开cmd在项目目录下输入指令npm init -y，进行初始化得到一个json文件如下{ "name": "4day", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" &&...
2021-10-22 15:30:00
3752
原创 github仓库
个人小节1.初始化gitgit init2.将文件添加入暂存区git add .3.将文件加入本地仓库git commit -m "描述"4.设置本地账户密码git config --global user.name xiaoyuan9527git config --global user.email ***********5.绑定临时仓库(为了方便)git remote add temp 远程仓库地址6.提交本地至远程仓库git push temp ...
2021-10-18 00:00:00
71
原创 数据的动态渲染，JSON的运用
通过ajax 引用JSON中的数据，动态添加到html页面中该笔记包括 JSON文件，css，html，js创建基本的html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" co
2021-10-12 14:40:49
787
原创 原生ajax请求与查询添加到mysql的php
要实现前后端交互，最重要的就是实现数据之间的传递，本次笔记是关于原生ajax的书写以及对应连接到数据库的php代码此次只写了关键代码，ajax和php部分需要全代码的可以私聊获取原生ajax部分(发送请求)function ajax(user, pwd) { // 创建ajax let xhr = new XMLHttpRequest(); // 设置请求(传递方式，请求文件的路径) xhr.open('post', './lib/login.php')
2021-10-12 14:11:51
136
原创 js瀑流设计
css部分<style> * { position: relative; /* margin:0px; padding: 0px; */ } img { display: block; width: 220px; } #box { margin: 0px auto; } .item { box-shadow: 2px
2021-10-04 00:30:00
62
原创 放大镜特效，面向对象方法实现
难点: 鼠标位置与被显示区域的对应关系 鼠标在小图的位置的比例映射到大图中css部分<style> img { display: block; } * { margin: 0; padding: 0; } .box { width: 350px; height: 350px; margin: 100px; border: 1...
2021-09-28 19:20:04
57
原创 面向对象简易轮播图实现
思路: 根据图片遍历获得索引，利用索引创建绑定下方按钮， 通过移动图片父元素的左间距实现图片切换， 自动调用右切图方法实现自动轮播。css部分<style> * { margin: 0; padding: 0; } li { list-style: none; } ...
2021-09-28 17:49:48
147
原创 输入两个数，获取其之间的随机数
思路: 随机数的生成+获取页面input中的value+赋予最终值<input type="text" id="inputFn1" value=""> <input type="text" id="inputFn2" value=""> <button id="btn">生成随机数</button> <input type="text" id="inputFn3" value=""> <...
2021-09-27 20:13:56
466
原创 流氓广告弹窗
思路: 打开页面一段时间后弹出广告框 关闭一段时间后再弹出广告框利用方法 定时器css部分<style> div { width: 240px; height: 160px; position: fixed; left: 0; top: 0; right: 0; ...
2021-09-27 20:05:47
95
原创 简易点名系统
思路: 通过计时器实现名字的播放，索引联合随机数共同构成显示随机名字 给与一个状态变量控制一个按钮的两种功能css部分<style> #big { width: 240px; padding: 180px; } div { width: 240px; /* height: 180px; */ ...
2021-09-27 19:35:38
94
原创 点击按钮生成随机颜色
思路: 1.按钮 2.绑定事件 3.各种方法 4.拼接方法<input type="button" value="按钮"> <script> class colors{ constructor(){ //获取按钮页面节点 this.body = this.$("body"); ...
2021-09-27 19:27:22
390
原创 js实现简单画笔
画笔(目前只能画)功能实现的原理通过向页面中添加div的思路进行模拟画笔功能*生成指定范围随机数方法:Math.round(Math.random()*(max-min)+min);*代码还有点小bug<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=.
2021-09-07 19:14:31
776
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人