szuwaterbrother的博客

原创 手把手教你用VUE搭建一个旅游网站以及给你优化方案

阶段一： 轮播图实现实现过程VUE快速搭建轮播图VUE实现css样式以及图片防抖动优化开源源码轮播图———swiperlist

原创 手把手教你用Vue搭建一个商品页面

vue的一些零散知识一.VUE对象和vue实例如何使用Vue实例开始编写Vue应用程序，以及如何将基本数据加载到网页上。 Vue实例是每个Vue应用程序的根Vue实例插入到DOM中的一个元素中Vue实例的数据可以使用称为表达式的类似于mustache的语法{{}}来显示。（放data然后再处理）Vue是响应式的，原例改变后面跟着变二.VUE属性绑定比如 data我放了product的text和一个image和link，在html页面时候 我就直接{{}}框出文字。

原创 小城的测试

已经开源链接 https://github.com/waterbrother2019122132/wb_store菜鸡日记 day1#想试试看，如果没有队友git工具来帮忙，自己来做，能做成什么样子#bug ☞轮播图重复了，一开始以为是key绑定错误，但看了下，好像返回的数据就只有一张图…☞pc端明明有四个栏目，但移动端测试少了一个，好像是component出错了emm菜...

原创 怎么去使用git

git被隐藏用git管理工程，默认.git问价是隐藏的。由于从git远程仓库下载下来的代码,如果.git文件隐藏，在需要用命令行进行git管理代码时，可能拿捏不准要cd到哪层，如果能看到.git文件就很轻易知道工作空间的路径了(即cd到.git所在的文件夹即可)。让.git目录显示的命令（两条）如下：defaults write com.apple.finder AppleShowAllFi...

转载 那些大佬是怎么入门编程的

我在入门计算机时候 走了很多弯路 这是我太上会长share过的一篇文章 可操作性很强 毕竟不是谁都是轮子哥 现在重新来看 感悟很多 我找到了文章出处 并注明在文末学习编程, 既要考虑诗和远方, 也要考虑眼前的苟且。每年像你这样的学生不计其数，大一刚进校，一门C语言，学校发一本垃圾C语言教材，按...

原创 你可能不知道的游戏机制以及游戏元素

看了天国的资源分享，想记录下这些有趣的机制橡皮筋机制游戏机制中有个东西叫Rubberbanding(或者叫橡皮筋机制)☞多用在赛车游戏，就是当你的车子速度落后到一定程度时，领先的电脑选手车子速度会小幅度下降，而相应的，玩家的车子速度会上调狂战士机制还有一个机制，我英文名记不清楚，我姑且叫它为“最后一滴血机制”，有些游戏最后的一丝血比你想象的还要耐抗(狂战士上线)，刺客信条有这种设定，主要是...

原创 看网课录播时候老师讲得太慢而app没有加速功能怎么办？

## step1 想办法拿到网站链接，然后去网页打开比如先点开某链接我点的是数学，复制它的链接，如下图然后在浏览器打开（我选的是谷歌浏览器）然后按下F12（笔记本电脑可能需要点Fn+F12）,再点击Console，输入代码document.querySelector(‘video’).playbackRate =2;注意*这个数字2，是两倍速，速度可以自己调节~...

原创 零知识证明：STARKs vs SNARKs

新技术之间的冲突纵观历史，总是有类似的技术在同一时间上市，它们寻求相似的结果，但以不同的方式解决问题。当这种市场现象发生时，我们应该尝试客观地评估每项技术。由于 STARK 阵营和 SNARK 阵营都对各自的技术充满热情，我们认为对这两种技术进行客观比较会很有趣。零知识证明零知识证明的想法最初是在1980年的一份学术论文中——《交互性证明系统的知识复杂度》中被提出。论文中提到：证明者可以在不披露信息本身的情况下向验证者证实信息的真实性。从更技术的角度说，ZKP 是证明者与验证者两方之间的一个协议，

原创 产品经理应该如何为 Web3 做准备

产品经理应该如何为 Web3 做准备所以现在我们知道 Web3 将改变用户探索和体验互联网的方式……但我们仍然不完全确定如何。一种理论是，无论 Web3 带来什么，它都会与 Web2 一起工作，而不是取代它。因此，Web3 的元素不太可能在不久的将来极大地扰乱您的行业。很难谈论产品经理需要掌握哪些技能来应对这种潮起潮落的技术。当您不知道海浪的大小时，很难知道您需要冲浪板还是潜水艇。然而，显而易见的是，所有产品人员都需要随时了解即将到来的潜在趋势。如果您的领导团队很快就想赶上任何值得头条新闻的潮流，那

原创 电商的AIPL，FAST和RFM到底是什么

AIPLAIPL模型指的是来源于美国的一个营销模型，AIPL的意思分别是认知(awareness)、兴趣（interest）、购买（purchase）和忠诚（loyalty），就是用户从看到你→点你→产生兴趣→购买的过程。AIPL其实就是从认知→兴趣→购买→忠诚的过程，如果用淘宝的角度去看，就是从展现→点击→收藏加购货比→成交→复购或者转介绍的过程。AIPL模型可以帮助商家通过不同的付费工具，匹配不同的场景，加上溢价和创意，分别匹配不同的策略，满足不同阶段的客户需求。AIPL模型是一个可以把品牌在阿

原创 如何判断产品经理是否合格

​如果这些指标您没一个达到要求，那可能产品经理不适合你有许多经理声称接手了某个产品，但实际上没有详细了解产品甚至不清楚产品经理概念。在我职业生涯初期，我就是这个人。列出您在产品管理职业生涯中需要注意的一些要点，以确保您成为产品经理，而不仅仅是产品工具人。1.如果您让业务利益相关者决定如何构建功能If you let Business Stakeholders dictate How to build features在您的日常运营中，您会遇到许多与您一样对产品充满热情的业务利益相关者。在讨论.

翻译 什么是Saas，以及什么是PLG下的Saas

SaaS vs PaaS vs IaaS: What’s The Difference & How To Choose从小型企业乃至全球企业，“云”都是一个覆盖到许多领域的宽泛概念。特别当你把业务转到“云”上时候，无论用于应用程序还是基础架构部署，了解各种云服务差异优势就显得更重要。尽管即服务类型（as-a-service）每天都在增长，但通常有三种云服务模型可供比较：软件即服务 (SaaS)平台即服务 (PaaS)基础设施即服务 (IaaS)对于其中的每一个，我们将着眼于概念、好处

原创 nft术语解释

NFT 爱好者（原文用的是nerds，翻译作书呆子？我感觉不太合理，我写成爱好者）在谈论这个东西时候总是会有一堆让人眼花缭乱的术语，对非圈内人来说会感觉难以理解，这里整理了23个术语解释来帮助你理解。作为nerds的其中之一，我过滤掉了一些技术性更强的术语，既是因为你不需要了解智能合约是如何加入 NFT 空间的，也是因为我可能还无法提供一个很好的解释。说了这么多，这里有 23 个重要的术语供你了解，接下来是 9 个比较基础的术语，我希望能让你觉得有趣并会心一笑。10k 项目一个 10k 项目是一.

翻译 内容持久化

内容持久性从广义上讲，今天的Web浏览是通过所谓的位置寻址来操作的（就是通过url跳转）。位置寻址从 Web 上的特定位置检索在线信息，即从 URL 跳转检索。但是，这有其明显的缺点。位置寻址是中心化的，这意味着控制该位置的任何人都控制内容。位置寻址URL跳转后的任何内容都可以更改：文章的语言，数字图稿中使用的颜色或记录身份的属性。简而言之，位置寻址的网址是可被人为利用的.此问题的解决方案从内容寻址（content addressing）开始。基于内容的寻址允许您基于唯一的一串hash值 ;无论它存储在

翻译 Content addressing（内容寻址技术）

内容寻址（Content addressing ）（Content addressing ）内容寻址是一种在信息系统中组织和定位数据的技术，其中用于定位内容的键派生自内容本身。在本概念指南中，我们将介绍内容寻址的工作原理以及为什么它对NFT很重要。基本问题想象一下，一个键值存储具有如下界面：// This example uses TypeScript to annotate the parameters and return types of our methods.// We won't do

翻译 nft是什么

nft是什么

原创 2020-08-24

深圳大学电子协会社团简介深圳大学电子协会，简称电协，自90年代成立至今已20多年，现隶属电子与信息工程学院，电协成立的目的在于为广大电子制作及编程爱好者提供交流学习的平台，营造良好的学术探讨氛围，同时带动更多的同学参加实践以及相关比赛。电协还会帮助同学们了解自己的专业，加深对电子设计的兴趣，并从中挑选出实力强劲、兴趣浓厚的成员，备战全国大学生电子设计大赛、广东省电子设计大赛及小程序设计大赛等赛事。部门架构微信公众号...

原创 【css面筋系列】——圣杯布局+双飞翼

什么是父元素塌陷什么是BFC方法清除浮动圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局圣杯布局+双飞翼...

原创 电协小便签实现--用typescript和vue脚手架

1. 需要的知识储备2.搭建环境3. 模型设计4.datahelper实现数据类的封装 实现数据的增删查改// DataHelper类 - 负责 localStorage 操作class DataHelper { dataKey: string; primaryKey: string; // 一、构造函数 --作用：为对象 添加 各种属性-------------------------- constructor(dataK

原创 详细页的banner实现

Banner的实现首先是整个组件的页面布局然后Banner 的代码如下<template> <div> <div class="banner" @click="handleBannerClick"> <img class="banner-img" src="//img1.qunarzz.com/sight/p0/1505/be/be4802e10f3b3107.water.jpg_600x330

原创 Vuex 的基本入门操作流程

vuex实现当地的数据存储使用的api叫 localstorage用localstorage时候可以用try catch来抓取异常项目中 需要对vuex进行拆分以便后期维护mapstate把vuex的数据映射到这个组件的computed里面mapmutation改写前改写后mapgetter声明它使用它当数据足够冗杂，就要模块化...

原创 vue网页性能优化

keep-alive进行页面缓存当页面keep-alive进行页面缓存vuex状态管理activated页面刷新变化时候重新渲染变化

原创 Vue去实现搜索框的业务逻辑

涉及到的知识点数据双向绑定父子组件传值事件监听数据节流数据接收和渲染滚动条引入v-show的用法代码的优化（计算逻辑放入computed里面）

原创 VUE实现字母列表点击以实现屏幕定位

事件绑定发送给父组件事件监听定义事件父组件传给子组件接收父组件监听器

原创 VUE如何用axios渲染json数据

涉及到的知识点脚手架接口请求的默认地址设置生命周期函数的使用父级向子级组件传值脚手架接口请求的默认地址设置在后端的接口尚未做出来之前，可以通过默认地址的设置让他人看懂我们的接口请求数据动态渲染的操作过程其实我也不太理解，但就是会用，下面拿个数组和对象赋值的例子来演习吧先data数据创一个对象和数组触发生命周期然后触发传值操作再把对象和数组父级传到子级子级组件去取值后循环渲染父级组件的操作子级组件的操作props接收数组和声明类型v-for实现动态渲染

原创 icon图标实现轮播效果和页面切换

VUE如何快速做一个轮播图温馨提示==>>大家先看这个，再来理解下面的实现以及优化的思路引入轮播图组件，嵌套两层 swiper 和 swiper-slider，然后写里面就可以套图片和文字实现轮播图效果但是数据（文字以及图片信息）放在template是很不好的，难维护不方便更新。因此我们要弄一个类似json数据的东西写在data里面当图标容量超过了单页面容量时候，就会溢出，所以要用特定的computed prop去把溢出内容放入下一页面层级具体操作1. 套入swiper和s

原创 VUE组件实现一个防抖动效果

问题防抖动问题顾名思义，由于html加载最后才会加载图片,所以如果没有提前设置高度的话,就会出现窗口抖动,用户体验很不好.如果固定死高度的话，又不能于宽等比例缩放如果是vue里面出现这种问题要怎么解决思路给template加< div >套起来，然后绑定class=“wrape”给wrape写百分比 让图片在文字出来前就能撑开一个空间（有浏览器兼容问题，所以待会介绍两种写法）具体操作先套个div针对div的样式来写注明：这里宽和高是一个百分比的关系，

原创 VUE如何快速做一个轮播图

1. 第三方插件https://github.com/surmon-china/vue-awesome-swipernpm install swiper vue-awesome-swiper --save或者yarn add swiper vue-awesome-swiper2. 全局注册注明！ 全局配置我写在了main.js里面了3. 局部注册我没用过import { Swiper, SwiperSlide, directive } from 'vue-awesome-s

原创 VUE中引入stylus的一些需要注意的地方以及优化方法

VUE如何设置全局的css/stylus/less直接写 import就好了很多文件的路径都很冗长，如何缩短打开下面的文件然后找出 resolve其中需要注意的地方是，以这种缩写的方法引入css的时候，要写 ~...

原创 高级程序设计

原创 小水牛23年的面试准备

考点一. 变量提升

原创 水牛的es6日记第七天【事件机制】

介绍每个可用的事件都会有一个事件处理器，也就是事件触发时会运行的代码块。当我们定义了一个用来回应事件被激发的代码块的时候，我们说我们注册了一个事件处理器。注意事件处理器有时候被叫做事件监听器——从我们的用意来看这两个名字是相同的，尽管严格地来说这块代码既监听也处理事件。监听器留意事件是否发生，然后处理器就是对事件发生做出的回应。不同编程环境的事件机制是不同的行内事件处理器【尽量避免】...

原创 水牛的es6日记第五天【结构赋值】

解构赋值语法是一种JavaScript表达式，可以将数组中的值或对象中的属性解压缩为不同的变量。let a, b, rest;[a, b] = [10, 20];console.log(a);// expected output: 10console.log(b);// expected output: 20[a, b, ...rest] = [10, 20, 30, 40, ...

原创 水牛的es6日记第四天【展开运算符】

ES6引入了spread运算符，它使我们可以在需要多个参数或元素的地方扩展数组和其他表达式。 下面的ES5代码使用apply（）来计算数组中的最大值：var arr = [6, 89, 3, 45];var maximus = Math.max.apply(null, arr); // returns 89我们必须使用Math.max.apply（null，arr），因为Math.max（...

原创 水牛的es6日记第三天【不定参数的用法】

JavaScript Demo: Functions Rest Parameters为了帮助我们创建更灵活的功能，ES6引入了rest参数作为功能参数。使用rest参数，您可以创建带有可变数量参数的函数。这些参数存储在一个数组中，以后可以从函数内部进行访问。 查看以下代码：function howMany(...args) { return "You have passed " + arg...

原创 水牛的es6日记第二天【箭头函数Arrow Functions】

在JavaScript中，我们通常不需要命名函数，尤其是在将一个函数作为参数传递给另一个函数时。相反，我们创建内联函数。我们不需要命名这些函数，因为我们不会在其他任何地方重用它们。为此，我们经常使用以下语法：const myFunc = function() { const myVar = "value"; return myVar;}ES6为我们提供了语法糖，而不必以这种方式编...

原创 水牛的es6日记第一天【let和const】

介绍ES6ECMAScript是JavaScript的标准化版本，目标是统一该语言的规范和特性。由于所有主要的浏览器和JavaScript运行时都遵循这个规范，所以ECMAScript这个术语可以与JavaScript这个术语互换。freeCodeCamp上的大多数挑战都使用该语言的ECMAScript 5 (ES5)规范，该规范于2009年定稿。但JavaScript是一门不断发展的编程语言...

原创 什么是API

什么是API函数(application programming Interface)刚才看到论坛有一段很有意思的话，大意是:劫匪(操作系统)劫走了一个倒霉蛋(程序)的所有钱财(硬件资源以及相关信息)，要挟程序拿????(请求) 来换，程序想直接去匪窝(操作系统内部)进行交换，劫匪认为倒霉蛋直接进匪窝会暴露内部地址信息和带来安全隐患，就弄了两个盒子，倒霉蛋把???? 放入盒子一，然后过段时间过来看盒子二，里...

原创 git 删掉远程仓库的内容文件

在github上只能删除仓库,却无法删除文件夹或文件, 所以只能通过命令来解决首先进入你的master文件夹下, Git Bash Here ,打开命令窗口$ git --help 帮助命令 $ git pull origin master 将远程仓库里面的项目拉下来$ dir 查看有哪些文件夹$ git rm -r --cached target 删除target文件夹...

原创 git commit执行时候卡了很久甚至报错

就没报错 但是卡了 很久很痛苦后面我加入这条命令 就舒服了git config --global http.postBuffer 524288000