![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web开发
szuwaterbrother
WeChat☞Y13425347606
19届新生
还在摸索
展开
-
【css面筋系列】——圣杯布局+双飞翼
什么是父元素塌陷什么是BFC方法清除浮动圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局圣杯布局+双飞翼...原创 2020-07-22 11:41:24 · 899 阅读 · 0 评论 -
电协小便签实现--用typescript和vue脚手架
1. 需要的知识储备2.搭建环境3. 模型设计4.datahelper实现数据类的封装 实现数据的增删查改// DataHelper类 - 负责 localStorage 操作class DataHelper { dataKey: string; primaryKey: string; // 一、构造函数 --作用:为对象 添加 各种属性-------------------------- constructor(dataK原创 2020-06-02 18:21:21 · 270 阅读 · 0 评论 -
详细页的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原创 2020-05-21 12:57:25 · 528 阅读 · 0 评论 -
Vuex 的基本入门操作流程
vuex实现当地的数据存储使用的api叫 localstorage用localstorage时候可以用try catch来抓取异常项目中 需要对vuex进行拆分以便后期维护mapstate把vuex的数据映射到这个组件的computed里面mapmutation改写前改写后mapgetter声明它使用它当数据足够冗杂,就要模块化...原创 2020-05-19 21:08:18 · 258 阅读 · 0 评论 -
vue网页性能优化
keep-alive进行页面缓存当页面keep-alive进行页面缓存vuex状态管理activated页面刷新变化时候重新渲染变化原创 2020-05-18 23:12:55 · 195 阅读 · 0 评论 -
Vue去实现搜索框的业务逻辑
涉及到的知识点数据双向绑定父子组件传值事件监听数据节流数据接收和渲染滚动条引入v-show的用法代码的优化(计算逻辑放入computed里面)原创 2020-05-18 16:43:32 · 1012 阅读 · 0 评论 -
VUE实现字母列表点击以实现屏幕定位
事件绑定发送给父组件事件监听定义事件父组件传给子组件接收父组件监听器原创 2020-05-18 15:29:26 · 669 阅读 · 0 评论 -
VUE如何用axios渲染json数据
涉及到的知识点脚手架接口请求的默认地址设置生命周期函数的使用父级向子级组件传值脚手架接口请求的默认地址设置在后端的接口尚未做出来之前,可以通过默认地址的设置让他人看懂我们的接口请求数据动态渲染的操作过程其实我也不太理解,但就是会用,下面拿个数组和对象赋值的例子来演习吧先data数据创一个对象和数组触发生命周期然后触发传值操作再把对象和数组父级传到子级子级组件去取值后循环渲染父级组件的操作子级组件的操作props接收数组和声明类型v-for实现动态渲染原创 2020-05-17 23:52:27 · 2607 阅读 · 0 评论 -
手把手教你用VUE搭建一个旅游网站以及给你优化方案
阶段一: 轮播图实现实现过程VUE快速搭建轮播图VUE实现css样式以及图片防抖动优化开源源码轮播图———swiperlist原创 2020-05-16 14:43:16 · 2817 阅读 · 0 评论 -
icon图标实现轮播效果和页面切换
VUE如何快速做一个轮播图温馨提示==>>大家先看这个,再来理解下面的实现以及优化的思路引入轮播图组件,嵌套两层 swiper 和 swiper-slider,然后写里面就可以套图片和文字实现轮播图效果但是数据(文字以及图片信息)放在template是很不好的,难维护不方便更新。因此我们要弄一个类似json数据的东西写在data里面当图标容量超过了单页面容量时候,就会溢出,所以要用特定的computed prop去把溢出内容放入下一页面层级具体操作1. 套入swiper和s原创 2020-05-16 14:36:46 · 704 阅读 · 0 评论 -
VUE组件实现一个防抖动效果
问题防抖动问题顾名思义,由于html加载最后才会加载图片,所以如果没有提前设置高度的话,就会出现窗口抖动,用户体验很不好.如果固定死高度的话,又不能于宽等比例缩放如果是vue里面出现这种问题要怎么解决思路给template加< div >套起来,然后绑定class=“wrape”给wrape写百分比 让图片在文字出来前就能撑开一个空间(有浏览器兼容问题,所以待会介绍两种写法)具体操作先套个div针对div的样式来写注明:这里宽和高是一个百分比的关系,原创 2020-05-15 19:03:34 · 869 阅读 · 0 评论 -
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原创 2020-05-15 01:34:07 · 8058 阅读 · 1 评论 -
VUE中引入stylus的一些需要注意的地方以及优化方法
VUE如何设置全局的css/stylus/less直接写 import就好了很多文件的路径都很冗长,如何缩短打开下面的文件然后找出 resolve其中需要注意的地方是,以这种缩写的方法引入css的时候,要写 ~...原创 2020-05-14 23:42:54 · 168 阅读 · 0 评论 -
手把手教你用Vue搭建一个商品页面
vue的一些零散知识一.VUE对象和vue实例如何使用Vue实例开始编写Vue应用程序,以及如何将基本数据加载到网页上。 Vue实例是每个Vue应用程序的根Vue实例插入到DOM中的一个元素中Vue实例的数据可以使用称为表达式的类似于mustache的语法{{}}来显示。(放data然后再处理)Vue是响应式的,原例改变后面跟着变二.VUE属性绑定比如 data我放了product的text和一个image和link,在html页面时候 我就直接{{}}框出文字。原创 2020-05-10 01:07:51 · 3624 阅读 · 0 评论 -
水牛的es6日记第七天【事件机制】
介绍每个可用的事件都会有一个事件处理器,也就是事件触发时会运行的代码块。当我们定义了一个用来回应事件被激发的代码块的时候,我们说我们注册了一个事件处理器。注意事件处理器有时候被叫做事件监听器——从我们的用意来看这两个名字是相同的,尽管严格地来说这块代码既监听也处理事件。监听器留意事件是否发生,然后处理器就是对事件发生做出的回应。不同编程环境的事件机制是不同的行内事件处理器【尽量避免】...原创 2020-04-21 11:46:44 · 183 阅读 · 0 评论 -
水牛的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, ...原创 2020-04-19 13:31:27 · 190 阅读 · 0 评论 -
水牛的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(...原创 2020-04-19 12:56:16 · 149 阅读 · 0 评论 -
水牛的es6日记第三天【不定参数的用法】
JavaScript Demo: Functions Rest Parameters为了帮助我们创建更灵活的功能,ES6引入了rest参数作为功能参数。使用rest参数,您可以创建带有可变数量参数的函数。这些参数存储在一个数组中,以后可以从函数内部进行访问。 查看以下代码:function howMany(...args) { return "You have passed " + arg...原创 2020-04-19 12:46:38 · 200 阅读 · 0 评论 -
水牛的es6日记第二天【箭头函数Arrow Functions】
在JavaScript中,我们通常不需要命名函数,尤其是在将一个函数作为参数传递给另一个函数时。相反,我们创建内联函数。我们不需要命名这些函数,因为我们不会在其他任何地方重用它们。为此,我们经常使用以下语法:const myFunc = function() { const myVar = "value"; return myVar;}ES6为我们提供了语法糖,而不必以这种方式编...原创 2020-04-18 19:28:58 · 384 阅读 · 0 评论 -
水牛的es6日记第一天【let和const】
介绍ES6ECMAScript是JavaScript的标准化版本,目标是统一该语言的规范和特性。由于所有主要的浏览器和JavaScript运行时都遵循这个规范,所以ECMAScript这个术语可以与JavaScript这个术语互换。freeCodeCamp上的大多数挑战都使用该语言的ECMAScript 5 (ES5)规范,该规范于2009年定稿。但JavaScript是一门不断发展的编程语言...原创 2020-04-18 17:15:10 · 143 阅读 · 0 评论 -
前端入门要看什么书或文档或网站
MDNMSDNStackOverflowGithubGoogle Developer/web各个库/框架的官方网站、文档和 demo原创 2020-04-14 01:01:40 · 153 阅读 · 0 评论