砂糖小刀j-优快云博客

原创页面滑入控制显示隐藏

实现根据页面滚动到指定位置让相应位置的元素显示与隐藏CSS部分 * { margin: 0; padding: 0; } .display-box { margin: 1000px auto 500px; width: 800px; height: 300px; position: relative;

2021-05-25 09:24:38 300

一个简洁明了的思路，记录下来function duplicates(arr) { var newArr=arr.sort()//先将数组排序 var res=[]//结果数组 for(var i=0;i<newArr.length;i++){ //判断数组每一位和它后面的那一位是否相等 //判断数组它是否已经放入容器 if(newArr[i]===newArr[i+1]&&newArr[i]!==newArr[i-1]){

2021-05-22 15:03:49 139

原创网页图片放大镜

基本思路：大图片盒子包裹大图片，小图片盒子包裹小图片，遮盖层位于小图片盒子里，用鼠标的移动事件，让遮盖层跟随鼠标移动，移动遮盖层的同时让大图片跟着移动相应比例的距离，注意大图片移动的方向和遮盖层的方向相反，难点为获取相应距离1.html代码<body> <div class="container"> <div class="smallbox"> <img src="./images/small.jpg" class

2021-05-17 19:06:38 366

原创旋转立方体小程序

基本思路：立方体由六个div拼接而成，大盒子中的六个div分别代表立方体六个面（使用css3过渡属性调整方向和位置），最后使用css3动画属性将大盒子进行旋转即可第一步，在html中进行基本布局 <div class="box"> <div class="top"><img src="./images/1.jpg"></div> <div class="bottom"><img src="./images/

2021-05-16 14:52:23 447

原创 Vuex

概念Vuex是什么：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtoolsVueX和全局对象的区别：1.Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。2.你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显

2021-05-10 17:03:35 111

原创 TypeScript

概念TypeScript是JavaScript类型的超集，它可以编译成纯JavaScript。TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行，并且是开源的。使用手动编译为jsts文件可以在终端输入tsc index.ts//ts文件编译生成一个新的js代码的文件vscode自动编译为js在终端输入tsc --init生成一个tsconfig.json文件，把文件中的 "outDir": "./", /* 改为 */ "outDir": "./js",

2021-05-10 14:10:31 120

原创封装自己的axios

1.创建utils文件夹并新建request文件（js）//封装axios//引入axios和querystring以及routeimport axios from "axios";import qs from "querystring";import router from "../router/index";//创建axios实例对象instancevar instance = axios.create({ timeout: 5000 });// instance.defaults.he

2021-04-12 22:10:50 165

原创 vue过渡和动画

过渡例子<template> <div> 动画组件 <button @click="isshow = !isshow">显示隐藏</button> <transition name="fade">//用transition标签包起来，加上name用来指定过渡 <p v-show="isshow">动画</p> </transition> </div&g

2021-04-10 21:12:07 107

原创 vue路由的配置

一级路由的配置1.0 在入口文件main.js中引入并配置router模块import Vue from "vue";import App from "./App.vue";import router from "./router";//引入routerVue.config.productionTip = false;new Vue({ router,//配置router render: (h) => h(App),}).$mount("#app");1.1 在view

2021-04-07 22:19:20 381

原创 vue自定义指令

<div id="app"> <div v-bgcolor="'blue'">red</div>//指令名前加v- </div> <script> Vue.directive("bgcolor",{//指令名 inserted(el,bind){//指令生命周期-创建 //el：当前标签的dom //bind：..

2021-04-04 22:36:27 99

原创 vue兄弟组件传递数据

vue兄弟组件传递数据的方式例子： <div id="app"> <zuozhe></zuozhe> <yonghu></yonghu> </div> <script> var bus=new Vue()//实例化一个vue，作为中央事件总线，利用它完成两个组件的交互 Vue.component("zuozhe",{

2021-04-04 15:45:01 165

原创用vue的双向绑定来实现全选和全不选

如题，在一个教程里学到的方法，感觉这思路很受用，记载下来，以下是源码（没写样式有点丑）<body> <div id="app"> <ul> //全选按钮框，与数据isALLChecked（该值为布尔）双向绑定，change事件为allChecked <input type="checkbox" v-model="isALLChecked" @change="allChecked">全选/全不选

2021-04-03 18:50:08 436

原创 axios

axios是一个基于promise用于浏览器和node.js的http客户端基本用法去官网下载axios.js后引入 axios.get('http://127.0.0.1:80/user') .then(function (ret) { console.log(ret.data);//data的名称是固定的，用于获取后台响应数据 })常用API1.get2.post3.put4.deleteget传递

2021-04-02 17:55:33 121

原创接口调用-fetch用法

基本特性1.简单的数据获取方式，可以看做是xhr的升级版2.基于promise实现语法结构fetch(url).then(fn2) .then(fn3) ......基本用法 fetch("url").then(function(data){ //text方法属于fetchAPI的一部分，返回一个promise实例对象，用于获取后台返回的数据 return data.text(); }).then(f

2021-03-31 19:26:41 300

原创 webpack

webpack一.webpack起步1.1基本原理创建两个文件夹，分别为src和dist，其中，src文件夹用于存放开发的源码，dist文件夹用于存放打包后的文件src文件夹中创建main.js文件与其它依赖文件，webpack会自动将相关的文件都处理成浏览器可以解析的文件（bundle.js文件）dist文件夹中创建bundle.js文件，该文件在设置webpack后为自动生成，项目最终就是引用的这个文件1.2设置webpack的入口，出口文件const path = require("pa

2021-03-28 15:49:23 581

原创 ES6模块化的导入与导出

html部分例：<script src="./export.js" type="module"></script>//导出的模块<script src="./import.js" type="module"></script>//导入的模块导出导入部分方式一导出：function sum(a,b){ return a+b}//这个方法可以在{}内放入需要向外暴露的内容，变量，函数，类等等都可以 export{ sum

2021-03-20 21:34:46 253

原创 DOM复习篇

此文章为自我复习，在下学识浅薄，经验不足，文章中可能出现错误或语义不对的地方，欢迎指正。长期更新中（什么时候学到了新的再补充）…DOMDOM节点操作getAttribute()获取，只能通过元素节点调用，不能被document调用setAttribute()新增/设置，需要传入两个参数，属性名称和内容操作节点childNodes：获取所有子节点children：获取所有元素子节点parent：获取父节点firstchild：获取第一个子节点lastchild：获取最后一个子节点firs

2021-03-13 22:36:48 140

原创 JS基础复习篇

此文章为自我复习，在下学识浅薄，经验不足，文章中可能出现错误或语义不对的地方，欢迎指正。长期更新中（什么时候学到了新的再补充）…浏览器的控制台1.element：用于查看结构样式2.console：用于查看输出结果和报错信息3.sources：可在此处查看项目源码4.network：用于查看当前网站所有资源的请求信息5.application：当前网站的数据储存和资源文件，可盗图（笑）JS的组成1.ECMAscript：js的语法规范2.DOM（document object model）

2021-03-13 17:08:19 152

原创高度塌陷与垂直外边距重叠的解决方式

高度塌陷意思是：文档流中父元素高度默认被子元素撑开，但子元素设置浮动以后，就会脱离文档流，导致子元素无法撑起父元素高度，父元素则会高度塌陷，父元素下的所有元素都会向上移动，导致页面布局混乱解决方式：1.为将元素的over-flow设置为一个非visible（默认）的值 over-flow：hidden；（元素内有相对定位时容易出问题）2.在高度塌陷的父元素最后添加一个空白div，这个div并没有浮动,所以可以撑开父元素高度，然后此div进行清除浮动，达到效果clear：both/left/right

2021-03-12 19:37:57 160

原创 css3复习篇

此文章为自我复习，在下学识浅薄，经验不足，文章中可能出现错误或语义不对的地方，欢迎指正。长期更新中（什么时候学到了新的再补充）…选择器属性选择器[attr] 表示存在attr属性即可；[attr=val] 表示属性值完全等于val；[attr*=val] 表示在属性值的“任意”位置包含val字符；[attr^=val] 表示在属性值的“开始”位置包含val字符；[attr$=val] 表示在属性值的“结束”位置包含val字符；伪类选择器以某元素相对于其父元素或兄弟元素的位置:first

2021-03-12 19:27:36 208

原创 HTML5复习篇

此文章仅为自我复习，因此文章中省略了大量我已熟练掌握的，未知的，只留下对我而言需要经常查阅或者不太熟的（毕竟只是自我复习嘛，要是什么细节都写到那能写本书了…），在下学识浅薄，经验不足，文章中可能出现错误或语义不对的地方，欢迎指正。长期更新中（什么时候学到了新的再补充）…网站优化三大标签title标题Description网站说明keywords关键字（这个好像没什么用。。。。？）meta标签设置网页关键字< meta name=“keywords” content=“HTML5

2021-03-11 22:28:46 471

jjabcde48的博客