- 博客(106)
- 收藏
- 关注
RSS订阅原创 （三）react中JSX语法的基本使用
JSX即JavaScript XML，表示 JavaScript 代码中写 XML（HTML）格式的代码，就是Javascript和XML结合的一种格式。是 JavaScript 的语法扩展，
2023-03-23 09:18:27
238
原创 (二)如何用react脚手架构建项目以及文件目录的基本介绍
rename、 please try running this.command again as root/Administrator等类似信息，为了让目录结构更易懂，所以我们需要删除一些不必要的文件；可以在目录的reade.me文件看到启动项目的相关指令！比较适合单页面项目应用开发，所以暂时只包含一个。即只要保留入口文件即可。项目中会用到的一些依赖或者一些第三方库；工程的入口页面，即启动项目后，打开的首页。：里面包含了我们项目中的启动页面，：该文件包含了一些我们自己使用的。文件夹下原来的所有东西，除了。
2023-03-22 19:52:45
312
原创 （一）react介绍以及脚手架创建项目环境配置
背景介绍：React起源于Facebook的内部项目，因为该公司对市场上所有框架，都不满意，就决定自己写一套，用来架设Instagram的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。什么是即：用来构建UI的JavaScript库。React不是一个MVC框架，仅仅是视图（V）层的库;
2023-03-22 19:19:15
261
原创 git简单配置
一：安装git二：在桌面点击鼠标右键，打开菜单里的 git bash三：设置用户名和邮箱$ git config --global user.name "zhaojixiang"$ git config --global user.email "[email protected]"四：执行 $ ssh-keygen -t rsa -C "[email protected]" 生成git 秘钥，连续敲击enter直到重新出现空白$符号五：在本地文件中查找生成的秘钥文件——路径：C:\User
2022-01-14 09:39:16
773
原创 Angular中constructor和ngOnInit适用场景的差异化
区别constructor是ES6引入类的概念后新出现的东东，是类的自身属性，并不属于Angular的范畴，所以Angular没有办法控制constructor。constructor会在类生成实例时调用：import {Component} from '@angular/core';@Component({ selector: 'hello-world', templateUrl: 'hello-world.html'})class HelloWorld { c
2021-03-03 19:56:17
523
2
原创 Angular-Cli创建项目的全部过程
使用 CLI 创建一个项目并配置默认路由： ng new helloAngular –routing如果要跳过npm install 安装,则使用以下命令：ng new my-app --skip-install 项目结构目录分析 |--E2e 应用的端对端(e2e)测试，用 Jasmine 写成并用 protractor 端对端测试运行器测试。|--Node_modules 依赖包|--Src |--App Angular应用文件|--App.module.ts |..
2020-12-24 17:02:28
1161
1
原创 防止暴力点击（节流）
节流(throttle)在n秒内点击多次，只有一次生效。<template> <div> <button @click="throttle">按钮</button> </div></template><script>//定义let timer, lastTime;let no...
2019-11-29 15:18:01
1239
1
原创 如何在vue项目中给ul>li列表使用事件委托
ul> <li v-for="(item, index) in data" @click="handleClick(index)"> Click Me </li></ul>然后这样的话，结果就是所有的li元素都绑定了事件。我们都知道，过多的事件对于性能来说是很糟糕的，尤其在移动端，可以说是无法容忍。为了更好...
2019-11-29 14:57:18
6247
2
原创 如何使用react脚手架构建项目
前提：保证您的电脑已经成功安装了node和npm环境通过cmd执行 node -v 和 npm -v 查看是否下载成功和下载成功后的版本号。一、安装react脚手架，cmd执行 npm i -g create-react-app (-g为全局下载)二、在桌面上新建一个文件夹，打开后按住shift键并单击鼠标右键，在菜单栏中选择在此处打开命令窗口，在命令行中执行 cre...
2019-10-21 09:53:35
323
1
原创 the content must be served over HTTPS 解决方案
起因上传图片出现了如下警告：报错的原因就是当前页面是https协议加载的，但是这个页面发起了一个http的ajax请求，这种做法是非法的。HTTPS页面里动态的引入HTTP资源，比如引入一个js文件，会被直接block掉的.在HTTPS页面里通过AJAX的方式请求HTTP资源，也会被直接block掉的。客户端解决办法可以在相应的页面的<head>里加上这句代码，意思...
2019-10-08 14:16:28
29464
3
原创 bubbly-bg.js实现动态气泡背景效果
前言bubbly-bg.js是基于HTML5画布，压缩后的版本小于1kb，但是它能制作出各种漂亮的动态气泡背景效果，非常强大。使用可以通过npm来安装bubbly-bg.js动态气泡背景插件。npm install bubbly-bg --save可以在页面中约会bubbly-bg.js文件。<script type="text/javascript" src...
2019-10-08 10:31:27
655
原创 Bideo.js实现全屏视频背景
特性自动调整：Bideo.js可以根据当前浏览器窗口的大小自动调整视频尺寸，当浏览器窗口调整时，它会自适应窗口尺寸，移动端、PC端都能自动调整，使视频作为背景并全屏展示。覆盖：视频作为网页背景后，我们可以任意在视频上层放置任意HTML内容。视频封面：页面打开时，视频可能需要几秒钟才能加载完，那么我们可以设置一张图片作为视频的封面，等加载完再播放。HTML在你的页面body...
2019-10-08 10:23:37
1372
原创 Vue移动端右滑屏幕返回上一页
有些时候我们玩手机更喜欢使用手势滑动带来的用户操作体验。Vue touch directive是一个用于移动设备操作指令的轻量级的VUE组件。使用它可以轻松实现屏幕触控、滑动触发事件，提高用户体验。安装依赖使用npm安装vue-directive-touch组件。npm install vue-directive-touch --save引入组件在main.js中引入vue...
2019-10-08 10:14:18
2107
原创 使用element UI的日期选择器时，默认显示当天日期。
需求：输入框中要把当天日期显示在输入框中<el-form-item label="交易数据"> <el-date-picker type="date" placeholder="选择日期" v-model="searchFormField.date" ...
2019-09-30 15:58:00
2469
原创 vue面试题
Vue的双向数据绑定原理是什么？vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。具体步骤：第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter这样的话，给这个对象的某个值赋值，就会触...
2019-09-30 15:42:50
218
原创 vue项目引入字体.ttf
一、下载完字体后在src下新建common文件，文件夹中包含以下文件（FZCYJ.ttf 为例）二、打开font.css@font-face { font-family: 'myfont'; //重命名字体名 src: url('FZCYJ.ttf'); //引入字体 font-weight: normal; font-style: normal; }...
2019-09-30 15:28:49
1913
原创 react生命周期函数详解
react生命周期函数图详解根据上图我们可以看出react中的生命周期函数主要分为三个阶段创建、更新、销毁创建阶段getDefaultProps()此阶段为组件初始化，定义propTypes或者defaultPropsgetInitialState()与getDefaultProps的区别在于前者设置默认的 props，后者设置初始的state在使用es6的class语法时...
2019-09-30 15:23:15
479
原创 浏览器的同源策略
前言：同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源的交互。这是一个用于隔离潜在恶意文件的安全机制。同源的定义如果两个页面的协议，端口（如果有指定）和主机都相同，则两个页面具有相同的源。我们也可以把它称为“协议/主机/端口 tuple”，或简单地叫做“tuple". ("tuple" ，“元”，是指一些事物组合在一起形成一个整体，比如（1，2）叫二元，（1，2，3）叫...
2019-09-30 15:17:27
315
原创 页面导入样式时，使用link和@import有什么区别？
（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题; ( 4 )link支持使...
2019-09-30 14:39:53
182
原创 vue项目如何刷新当前页面
1.场景在处理列表时，常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。2.遇到的问题1. 用vue-router重新路由到当前页面，页面是不进行刷新的2.采用window.reload()，location.reload();或者this.$router.go(0);刷新时，整个浏览器进行了重新加载，闪烁，体验不好3.解决方法provide / inject...
2019-09-29 20:58:18
669
原创 promise不兼容，es6语法报错
前言：在项目中使用到了ES6的Promise对象，代码在谷歌浏览器中正常运行，而在360浏览器下的兼容模式下，IE内核是不支持Promise的。ES6 promise的支持情况：一、polyfill.js解决<script src = "https://cdn.polyfill.io/v2/polyfill.min.js"></script>/...
2019-09-29 20:50:10
1387
原创 如何实现点击后将已有HTML结构复制并新增到页面上
html：//绑定点击事件<div class="wlAddBtn " @click="add()"> 新增</div>//要复制的HTML结构 <div class="model" v-for="(val,index) in htmlArr" :key="index"> <p class="modelTitle...
2019-09-27 16:46:10
531
原创 vue面试题总结
你对vue中mvvm的模式设计有什么感想？mvvm设计模式采用的双向绑定，当view发生变化，model会跟着变化，model发生变化，view也会同步，这样的话，我们就可以更多的关注逻辑，从而减少dom的操作，代码的耦合性也更好vue中利用索引修改数组的时候，页面会跟着同步吗？利用索引修改数组的时候，页面不会进行同步，此时应该利用vue.set的方法进行设置数据vue首屏...
2019-09-26 14:01:32
176
原创 Vue中使用fullpage.js实现全屏滚动（基础演示）
安装npm install --save vue-fullpage.js引用import VueFullpage from 'vue-fullpage.js'Vue.use(VueFullpage)使用<template> <div> <full-page :options="options"> ...
2019-09-26 11:13:03
12221
11
原创 vue中使用qrcodejs2 生成二维码
一、安装npm install qrcodejs2 --save二、引用importQRcode from 'qrcodejs2'三、HTML<div id="qrcode"></div>四、jsmethods: { // 生成二维码 qrcode() { let that = this; ...
2019-09-26 10:49:38
294
原创 vscode启动cpu占100%，特别卡怎么解决
在编辑器中找到文件》首选项》设置，然后搜索search.follow，将“控制是否在搜索中跟踪符号链接”的√去掉然后继续搜索exclude,在Files:exclude下面有一个添加模式，输入**/node_modules，设置忽略node_modules这个文件夹...
2019-09-26 10:18:53
5180
5
原创 如何水平垂直居中一个标签元素
第一种：使用定位（已知自身元素宽高）利用定位，分别移动至父元素的顶部和左侧分别50% 的距离，然后利用calc（）自动计算分别反方向平移自身宽高的一半.div1{ width: 400px; height:400px; background-color: red; position: absolute; top: calc(50% - 200p...
2019-09-26 10:11:31
225
原创 vue中data里写return和不写的区别
不使用return包裹的数据会在项目的全局可见，会造成变量污染 。 使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。 **后者的data是一个方法，**也就是： data:function(){ return{ }} ...
2019-09-25 13:44:47
1075
原创 在点击按钮的时候，怎么取消按钮中的文本被选中
user-selectCSS属性，控制着用户能否选中文本。除了在文本框里，它在chrome浏览器中对已加载的文本没有影响。注意：这是一个实验中的功能此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。HTML：<p>你应该可以选中这段文本。...
2019-09-25 13:26:53
1152
原创 vue中如何实现实现中英文切换
一、安装vue-i18n插件npm i vue-i18n二、main.js文件的配置import VueI18n from 'vue-i18n'Vue.use(VueI18n) // 通过插件的形式挂载const i18n = new VueI18n({ locale: 'zh-CN', // 语言标识 //this.$i18n.locale //...
2019-09-25 10:43:07
9934
3
原创 JS数组中的filter方法
一维数组：const arr = [1,2,3].filter((v)= > { console.log(v); //输出为1，2，3 return v>1;})console.log(arr); //输出为[2,3];二维数组：let data = [{ a: [{re:true},{re:false}] b: '123'...
2019-09-23 10:47:05
2549
原创 如何提高客户端的访问性能
网页内容减少 http 请求次数； 减少 DNS 查询次数； 减少 iframe 数量； 减少 DOM 元素数量； 延迟加载； 提前加载； 滚动加载； 根据域名划分内容； 避免页面跳转； 缓存 Ajax;图片css sprites，即精灵图，将多个图标文件整合到一张图片中（修改更新少的常驻型低色位的装饰小图）； base64，体积小复用率低的背景装饰图标； icon...
2019-09-23 10:40:04
395
原创 H5新标签
optgroup 元素用于组合选项。当您使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易。<select> <optgroup label="Group 1"> <option>Option 1.1</option> </optgroup> <optgroup label="G...
2019-09-23 10:30:20
276
原创 vue中的万能通信机制
前言：provide和inject主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。vue官方介绍：这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。如果你熟悉 React，这与 React 的上下文特性很相似。提示：provide和inject绑定并不是可响应的。这是刻意为之的。然而...
2019-09-23 10:14:16
362
原创 弹出键盘时输入框被遮住
在移动端弹出键盘时输入框被遮住，如果使用定位将输入框（input或者textarea）定位到顶部区域,当手机的输入法为自带输入法时可能问题不大，但是当使用类似搜狗等输入法时，由于会高出自带输入法大约30个像素，就会造成输入框被遮盖一部分的现象。一、根据输入框的焦点来改变输入框的位置css 当输入框获得焦点, 改变位置input:focus{ position:fixed...
2019-09-23 09:45:53
1416
原创 vue中Class 与 Style 绑定
对象语法我们可以传给v-bind:class一个对象，以动态地切换 class：<div v-bind:class="{ active: isActive }"></div>上面的语法表示active这个 class 存在与否将取决于数据属性isActive的truthiness。你可以在对象中传入更多属性来动态切换多个 class。此外，v...
2019-09-21 14:22:11
186
原创 虚拟 DOM 的优缺点？
优点：保证性能下限： 框架的虚拟 DOM 需要适配任何上层 API 可能产生的操作，它的一些 DOM 操作的实现必须是普适的，所以它的性能并不是最优的；但是比起粗暴的 DOM 操作性能要好很多，因此框架的虚拟 DOM 至少可以保证在你不需要手动优化的情况下，依然可以提供还不错的性能，即保证性能的下限； 无需手动操作 DOM： 我们不再需要手动去操作 DOM，只需要写好 View-Model ...
2019-09-19 17:55:22
4897
1
原创 前端实现文字竖向排版
writing-mode排版竖文HTML&&css<div class="bruce flex-ct-x"> <div class="vertical-text"> <h3>情</h3> <p>我见犹怜，<br>爱不释手。<br>雅俗共赏，<br>君子好逑。</...
2019-09-19 14:41:00
3478
原创 背景以及文本渐变
使用linear-gradient控制背景渐变<div class="bruce"> <div class="gradient-bg">iCSS</div></div>.gradient-bg { display: flex; justify-content: center; align-items: center; hei...
2019-09-19 14:39:47
162
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人