- 博客(76)
- 收藏
- 关注
RSS订阅原创 vue-awesome-swiper导航内容(横向滚动条)与内容是联动的，导航内容始终在可视区域内
vue-awesome-swiper导航内容(横向滚动条)与内容是联动的，导航内容始终在可视区域内
2022-11-08 17:31:20
1613
1
原创 VueRouter基础知识记录1
学习笔记记录有点乱，凑合看VueRouter定义路由的规则，是一个数组对象实例化路由对象, 使用new VueRouter()生成一个 router 实例let router = new VueRouter({ // 路由实例的配置项，主要是一个 routes 选项，这个选项就是路由规则})实例化Vue根组件时，也就是 new Vue() 的时候，需要配置 router 选项，选型的值 就是上一个步骤中生成VueRouter的实例 这时访问页面会发现url地址就会出
2022-04-22 10:56:47
289
原创 vue2 自定义事件 v-model .sync
vue-将原生事件绑定到组件 <div id="app"> <base-input v-on:focus="onFocus" v-model="message" label="姓名"></base-input> </div> <script> Vue.component('base-input', { inheritAttrs: false, prop
2022-04-19 11:15:14
1110
原创 vue2、vue3 v-model
vue2 vue3vue2vue2-官网 <!-- 原生组件 --> <input v-model="val" /> <input :value="val" @input="val = $event.target.value"> <!-- 自定义组件 --> <my-component v-model="val" /> <my-component :value="val" @input="
2022-04-18 16:41:41
1102
原创 git push时出现403,443
1.The requested URL returned error: 403remote: Write access to repository not granted.远程：未授予对存储库的写入访问权限。解决方法：让领导给你开push权限2.Failed to connect to github.com 443git config --global http.proxy3. OpenSSL SSL_read: SSL_ERROR_SYSCALL, error 10054git con
2022-01-17 11:22:34
5689
原创 小程序和网站中无限滚动的实现
小程序1.微信开发者工具页面上拉触底事件的处理函数onReachBottom: function () { //return // page+1 处理 // this.setData 修改 为了 触发虚拟dom对比，进而更新页面的效果 // this.data.page++; // console.log(this.data.datalist.length,this.total) if(this.data.datalist.length
2022-01-06 17:23:42
333
原创 第三方网站调用微信公众号的图片被禁止
第三方网站调用微信公众号的图片被禁止借助搜狗搜索的接口来处理，让后端转码，前端调用<meta name="referrer" content="no-referrer" />Referrer Policy
2022-01-06 17:21:22
572
原创 uCharts图表在小程序中的使用
1.uCharts简介高性能跨平台图表库，支持H5、APP、小程序（微信小程序、支付宝小程序、钉钉小程序、百度小程序、头条小程序、QQ小程序、360小程序）、Vue、Taro等更多支持canvas的框架平台，支持饼图、圆环图、线图、柱状图、区域图、雷达图、圆弧进度图、仪表盘、K线图、条状图、混合图、玫瑰图、漏斗图、词云图、时序图、散点图、气泡图、地图。uCharts—giteeuCharts—官网效果展示uCharts图表2.uCharts使用以及相关的配置1.快速上手快速上手2
2021-12-23 10:06:08
2193
2
原创 手写Vue-cli
1.实现自定义指令1.通过npm init --y初始化一个node项目2.创建一个JS文件, 并且在JS文件的头部通过#! /usr/bin/env node告诉系统将来这个文件需要在 NodeJS环境 下执行3.在package.json中新增bin的key, 然后这个key的取值中告诉系统需要新增什么指令, 这个指令执行哪个文件"bin": { "nue-cli": "./bin/index.js"}4.通过npm link将本地的包链接到全局2.编码规范检查
2021-09-23 17:04:16
402
1
原创 手写vuex
1.Vuex特点1使用Vuex的时候需要用到Vue的use方法我们都知道use方法是用于注册插件的所以VueX的本质就是一个插件所以实现VueX就是在实现一个全局共享数据的插件2.Vuex特点2在使用Vuex的时候我们会通过Vuex.Store创建一个仓库所以还需要在Vuex中新增Store属性, 这个属性的取值是一个类import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.S
2021-09-13 17:09:23
510
原创 手写vue---部分实现
let CompileUtil = { getValue(vm, value){ // 切割 time.h ==> time h return value.split('.').reduce((data, currentKey) => { // 第一次执行：data = $data, currentKey = time // 第二次执行：data = time, currentKey = h
2021-09-08 16:04:46
187
原创 Vue-Plugin开发插件
1.Vue.use()做了什么事情?Vue.use的作用是注册一个Vue插件(注册组件), Vue.use必须在new Vue之前使用2.什么时候需要定义插件?当某一个组件或者功能经常需要被使用到时, 我们就可以将这个组件或者功能定义成一个插件例如: 网络加载指示器3.如果自定义一个插件?开发插件...
2021-08-30 16:07:24
288
原创 SASS的相关内容
1.什么是SASS(Syntactically Awesome Stylesheets Sass)?SASS是一套利用Ruby实现的, 最早最成熟的CSS预处理器, 诞生于2007年.它扩展了 CSS 语言，增加了变量、Mixin(混合)、嵌套、函数和运算等特性，使 CSS 更易维护和扩展2.如何学习SASS?LESS是一套利用JavaScript实现的CSS预处理器, 诞生于2009年.由于LESS的诞生比SASS要晚, 并且LESS受到了Sass的影响, 所以在LESS中能看到大量SASS中的
2021-08-27 17:29:42
186
原创 LESS的相关内容
0、引子1）什么是CSS预处理器?CSS 预处理器就是用某一种语言用来为 CSS 增加一些动态语言的的特性(变量、函数、继承等)，CSS预处理器可以让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处简而言之: CSS预处理器就是升级版CSS2）常见的CSS预处理器Less、 Sass 、Stylus1.为什么需要less?1.1 CSS的语法虽然简单, 但它同时也带来一些问题1.2 CSS需要书写大量看似没有逻辑的代码, 不方便维护及扩展, 也不利于复用,1.3 造成这些原因
2021-08-27 15:30:16
181
原创 图像识别-百度AI开放平台
1.注册百度账号百度AI百度智能云使用百度AI开放平台，先创建应用。选择「图像识别」，创建一个新的应用。应用名称和应用描述自己随便填写。完成后会得到一个API KEY和SECRET KEY，这两个信息用于后面获取access_token。二、获取access_token三、使用图像识别的接口1.接口HTTP 方法：POST请求URL： https://aip.baidubce.com/api/v1/solution/direct/imagerecognition/combi
2021-08-25 17:19:28
1360
原创 手撕Promise
1.Promise特点11.1 创建时必须传入一个函数, 否则会报错1.2 会给传入的函数设置两个回调函数1.3 刚创建的Promise对象状态是pending1.4 状态一旦发生改变就不可再次改变1.5 可以通过then来监听状态的改变1.5.1 如果添加监听时状态已经改变, 立即执行监听的回调1.5.2 如果添加监听时状态还未改变, 那么状态改变时候再执行监听回调1.5.3 同一个Promise对象可以添加多个then监听, 状态改变时所有的监听按照添加顺序执行2.Promi
2021-08-23 18:00:47
144
原创 Promise基本概念和基本示例使用
0.引子1.什么是promise?promise是ES6中新增的异步编程解决方案, 在代码中的表现是一个对象2.promise作用企业开发中为了保存异步代码的执行顺序, 那么就会出现回调函数层层嵌套如果回调函数嵌套的层数太多, 就会导致代码的阅读性, 可维护性大大降低promise对象可以将异步操作以同步流程来表示, 避免了回调函数层层嵌套(回调地狱)例如：需求: 从网络上加载3个资源, 要求加载完资源1才能加载资源2, 加载完资源2才能加载资源3,前面任何一个资源加载失败, 后续资源
2021-08-23 14:44:07
378
原创 如何获取网页logo(favicon.ico)
如何获取网页logoF12或者鼠标右键点击检查，查看element内link favicon 的href,搜索框中输入：官网网址+href就可以获取到logo图例如：https://emitwise.com/favicon/favicon.ico
2021-08-20 10:57:48
6720
原创 vue识别不了.ico后缀的图片，显示[object Module]
1.vue识别不了.ico后缀的图片，显示[object Module]报错如下：2.vue.config.js配置module.exports = { chainWebpack: config => { config.module .rule('images') .test(/\.(png|jpe?g|gif|ico)$/i) .use('url-loader') .loader('url-loader') .t
2021-08-15 15:17:59
684
2
原创 JS数组的相关操作(循环、查找、过滤、排序等)
1. for…in…注意点: 在企业开发中不推荐使用for…in循环来遍历数组 let arr = [1, 3, 5, 7, 9]; for(let key in arr){ // console.log(key); // 数组索引 console.log(arr[key]); }不推荐的原因for…in循环是专门用于遍历对象的, 但是对象的属性是无序的, 所以forin循环就是专门用于遍历无序的东西的, 所以
2021-08-13 11:31:36
478
原创 JS面向对象
1.面向对象的基本概念面向对象1.1 面向对象思想面向对象(Object Oriented,OO)是软件开发方法面向对象是一种对现实世界抽象的理解，是计算机编程技术发展到一定阶段后的产物Object Oriented Programming-OOP ——面向对象编程1.2 面向对象和面向过程区别内容强调关注面向过程强调的是功能行为关注的是解决问题需要哪些步骤面向对象将功能封装进对象，强调具备了功能的对象关注的是解决问题需要哪些对象面向对象是基于
2021-08-11 16:58:42
159
转载 JS--对象的特性之一---继承性
继承性js中继承目的： 把子类型中共同的属性和方法提取到父类型中较少代码的冗余度, 提升代码的复用性实现继承的方法1.借用原型链实现继承直接将子类的原型对象修改为父类对象, 这样就能使用原型链上的属性和方法 function Person() { this.name = null; this.age = 0; this.say = function () { console.log(
2021-08-11 15:19:08
148
原创 JavaScript-bind-call-apply改变this指向
1.this是什么?谁调用当前函数或者方法, this就是谁2.这三个方法的作用是什么?这三个方法都是用于修改函数或者方法中的this的2.1.bind方法作用修改函数或者方法中的this为指定的对象, 并且会返回一个修改之后的新函数注意点: bind方法除了可以修改this以外, 还可以传递参数, 只不过参数必须写在this对象的后面 function test(a, b) { console.log(a, b); consol
2021-08-11 11:12:08
110
原创 prototype的相关注意点
1.prototype特点1.1存储在prototype中的方法可以被对应构造函数创建出来的所有对象共享1.2prototype中除了可以存储方法以外, 还可以存储属性1.3prototype如果出现了和构造函数中同名的属性或者方法, 对象在访问的时候, 访问到的是构造函数中的数据 function Person(myName, myAge) { this.name = myName; this.age = myAge;
2021-08-11 09:04:35
176
原创 JS中prototype、__proto__以及原型链
1.对象的三角恋1.1 概念1.每个"构造函数"中都有一个默认的属性, 叫做 prototypeprototype 属性保存着一个对象, 这个对象我们称之为"原型对象"2.每个"原型对象"中都有一个默认的属性, 叫做 constructorconstructor 指向当前原型对象对应的那个"构造函数"3.通过构造函数创建出来的对象我们称之为"实例对象"每个"实例对象"中都有一个默认的属性, 叫做protoproto指向创建它的那个构造函数的"原型对象"2.JS的Function函数
2021-08-10 17:09:26
200
原创 JavaScript-数组
1.数组的解构赋值1.1 什么是数组的解构赋值解构赋值是ES6中新增的一种赋值的方式1.2 数组解构赋值的注意点1.2.1 在数组的解构赋值中, 等号左边的格式必须和等号右边的格式一模一样, 才能完全解构let [a, b, c] = [1, 3, 5]// a = 1, b = 3, c = 51.2.2 在数组的解构赋值中, 左边的个数可以和右边的个数不一样let [a, b] = [1, 3, 5]// a = 1, b = 3let [a, b] = [1]// a =
2021-08-09 17:02:21
90
原创 JavaScript基础
1. JavaScript基础-基本概念1.1 什么是JavaScript？JavaScript简称JS，是前端开发的一门脚本语言(解释型语言)解释型语言：程序执行之前，不需要对代码进行编译，在运行时边解析边执行的语言浏览器中有一个解析器，它可以对写好的代码进行解析，解析好了可以直接执行浏览器工作原理2.JavaScript发展史JavaScript起源于Netscape（网景）公司的LiveScript,为了赶时髦，后面更改为JavaScript时间发生的事情
2021-08-09 14:49:17
192
原创 vue的ref
<div class="lyric" ref="lyric"></div>直接通过this.$refs.lyric.offsetHeight拿到的是undefined，因为this.refs.lyric拿到的vue组件，从组件中拿到原生的元素this.refs.lyric拿到的vue组件，从组件中拿到原生的元素 this.refs.lyric拿到的vue组件，从组件中拿到原生的元素this.refs.lyric.$el.offsetHeight...
2021-08-03 10:25:12
232
原创 vue-transition过渡动画
钩子函数实现transitions-js推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css=“false”，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。<transition :css="false" @enter="enter" @leave="leave" > </transition>实现npm install velocity-animatevelocity插件中文文档 metho.
2021-08-02 16:59:37
442
原创 SPA优缺点、解决单页面应用的SEO困难问题以及三种网页渲染方式
SPA特点优点缺点总结1. 单页Web应用（SPA - Single Page web Application）也就是说只有一个HTML文件的Web应用, 我们就称之为单页Web应用, 就称之为SPA应用我们通过Vue开发的项目其实就是典型的SPA应用2. SPA的特点:SPA应用只有一个HTML文件, 所有的内容其实都在这个页面中呈现的SPA应用只会加载一次HTML文件, 不会因为用户的操作而进行页面的重新加载当用户与应用程序交互时, 是通过动态更新页面内容的方式来呈现不同的内容3
2021-08-02 11:11:25
1786
1
原创 vue音乐项目歌手页面滚动、吸顶效果
总结singer页面：1.api中去获取 [‘热’,A-Z] 以及根据[‘热’,A-Z]获取的所有歌手的数据2.渲染数据2.1 渲染左边 字母title [‘热’,A-Z] + 该字母开头的歌手因为存储字母的下标 与 存储对应字母开头歌手的下标 是一致的[‘热’, A, B, C, D, E…][ ['热’门的所有的歌手], [字母A开头的歌手],[字母B开头的歌手],[字母C开头的歌手]，[字母D开头的歌手]…]直接循环存储对应字母开头歌手，获取index,根据存储字母数组的key...
2021-08-01 11:57:15
347
原创 vconsole在手机真机模拟器上显示console控制台
在手机真机模拟器上显示console控制台vconsole安装npm install vconsole// main.jsimport VConsole from 'vconsole'const vconsole = new VConsole()Vue.use(vconsole)PC上会显示这个vConsole按钮，在IOS真机模拟器上面也会有...
2021-07-31 15:12:58
882
原创 iScroll的相关使用
1.简介iScroll是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件。iScroll2.使用2.1 使用场景网易音乐详情页，下拉滚动数据的时候，图片放大默认状态放大后的效果2.2 使用2.2.1 安装npm install iscroll --save2.2.2 代码实现封装滚动组件<template> <div id="wrapper" ref="wrapper"> <slot><
2021-07-26 17:31:40
308
原创 小程序uniapp基础
介绍uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。uniapp安装官网安装详解在微信小程序中预览获取小程序AppID1.新建页面Hbuilder的uniapp无法自动打开微信开发者工具设置----安全------打开服务端口配置tabBartabBar"tabBar": { "border
2021-07-25 17:32:57
214
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人