- 博客(233)
- 收藏
- 关注
RSS订阅原创 SourceTree克隆项目和上传修改后的代码用法
安装方法：SourceTree使用方法1：第一步在远程git上点击克隆。在这里我用的HTTPS克隆，直接点复制2： 第二步，打开SourceTree软件，点击文件->点击克隆/新建3：点击克隆/新建后出现的页面里面的路径为第一步HTTPS复制远程项目地址（地址对的话，下面会出现一行，这是一个Git仓库），这个复制进去，后面2个input会自动生成项目存放地址和项目名称 是你指定的项目路径，这里自动生成的是C盘里，但是我们一般项目放在D盘或者其他盘4：配置完成后点..
2020-10-20 16:53:13
1141
原创 每日一练22：vue的复制功能实现
vue-clipboard2安装npm install --save vue-clipboard2用法：方式1import Vue from 'vue'import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard)<div v-clipboard:copy="message" v-clipboard:success="onCopy" v-clipboard:error="onE
2020-10-16 14:54:21
139
转载 Vue学习日记part5 Vuex
Stateimport { mapState } from 'vuex'computed:{ //第一种写法 ...mapState({ count: state => state.count }) //第二种写法（city为store的文件名） ...mapState('city', ['location']), //第三种写法 ...mapState(['location']),}...
2020-10-13 18:54:37
126
原创 Vue学习日记part4 生命周期
生命周期：Vue.js 2.x&Vue.js 3.0区别// Vue.js 2.x 定义生命周期钩子函数 export default { created() { // 做一些初始化工作 }, mounted() { // 可以拿到 DOM 节点 }, beforeDestroy() { // 做一些清理操作 } } // Vue.js 3.x 生命周期 API 改写上例 import { onMounted, onB.
2020-10-13 17:06:36
1239
1
转载 Canvas学习Part4 - lineCap、lineJoin 、lineWidth 、miterLimit
lineCap用法：设置或返回线条末端线帽的样式。注意："round" 和 "square" 值会使线条略微变长。值 描述 butt 默认。向线条的每个末端添加平直的边缘。 round 向线条的每个末端添加圆形线帽。 square 向线条的每个末端添加正方形线帽。 lineJoin属性用法：设置或返回所创建边角的类型，当两条线交汇时。值 描述 bevel 创建斜角。 round 创建圆角。 miter ...
2020-09-28 17:36:39
451
转载 Canvas学习Part3 - shadowColor 、shadowBlur、shadowOffsetX、shadowOffsetY
shadowColor用法：设置或返回用于阴影的颜色。shadowBlur用法：设置或返回阴影的模糊级数。shadowOffsetX用法：设置或返回阴影与形状的水平距离。shadowOffsetY用法：设置或返回阴影与形状的垂直距离。基本用法：<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canv
2020-09-28 16:35:23
833
转载 Canvas学习Part2 - strokeStyle 属性
strokeStyle 属性用法：strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。基本用法<canvas id="myCanvas" width="220" height="220" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas><script>var c=document.getElementById("myCanvas");var ..
2020-09-28 16:12:57
2888
转载 Canvas学习Part1 - fillStyle、createLinearGradient() 、createPattern() 、createRadialGradient()
fillStyle 属性用法：设置或返回用于填充绘画的颜色、渐变或模式。基本用法<canvas id="myCanvas" width="220" height="220" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas><script>var c=document.getElementById("myCanvas");var ctx=c.getContext(.
2020-09-28 16:02:13
441
原创 Vue学习日记part3 Vue.filter
Vue.filter( id, [definition] )参考:vue 过滤器filter（全面）用法：注册或获取全局过滤器。全局指令Vue.filter('capitalize', function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1)})new Vue({ // ...}).
2020-09-25 18:37:06
176
原创 Vue学习日记全局 API总结
1：Vue.extend( options )用法：使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。 data选项是特例，需要注意 - 在Vue.extend()中它必须是函数<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="https://unpkg.com/vu...
2020-09-25 17:07:43
176
原创 Vue学习日记part2 Vue.set
Vue.set( target, propertyName/index, value )用法：向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如this.myObject.newProperty = 'hi')参考：Vue—Vue.set的使用栗子：<div id="app"> <p v-for="(i.
2020-09-25 17:06:20
103
原创 Vue学习日记part1 Vue.directive
Vue.directive( id, [definition] )用法：注册或获取全局指令。全局指令// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() }})局部指令directives: { focus: { // 指令的定义 inserted:.
2020-09-25 17:02:32
266
原创 Ⅶ期VUE的Day1:基本用法
一、Vue.js简介1.Vue.js是什么是一个构建用户界面的框架 是一个轻量级MVVM（Model-View-ViewModel）框架，和angular、react类似，其实就是所谓的数据双向绑定 数据驱动+组件化的前端开发（核心思想） 通过简单的API实现**响应式的数据绑定**和**组合的视图组件** 更容易上手、小巧2. MVVM框架1.1定义：Mvvm定义MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【...
2020-09-11 11:43:32
466
原创 Ⅶ期VUE的Day2:axios发送http请求、vue生命周期
一、发送AJAX请求1.简介vue本身不支持发送AJAX请求，需要使用vue-resource、axios等插件实现axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resource进行更新和维护参考：GitHub上搜索axios，查看API文档2.使用axios发送AJAX请求2.1安装axios并引入npminstallaxios-S也可直接下载axios.min.js...
2020-09-11 11:43:17
245
原创 Ⅶ期VUE的Day4:组件
一： 组件componentv1.什么是组件？组件（Component）是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码组件是自定义元素（对象）2.定义组件的方式先创建组件构造器，然后由组件构造器创建组件 直接创建组件 <div id="itapp"> <hello></hello> <my-world></my-world&...
2020-09-11 11:43:04
100
原创 Ⅶ期VUE的Day3:vue实例的属性和方法
一：vue实例的属性和方法1.属性vm.$el：获取vm关联的元素 vm.$data：获取数据对象data vm.$options：获取自定义 vm.$refs：获取所有添加ref属性的元素2.方法vm.$mount()：手动挂载vue实例 vm.$destroy()：销毁实例 vm.$nextTick(callback)：在dom更新完后再执行回调函数 vm.$set(object,key,value) ...
2020-09-11 11:42:31
184
原创 面试重点 JS-Web-API-事件
面试题编写一个通用的事件监听函数 描述事件冒泡的流程 无限下拉的图片列表，如何监听每个图片的点击知识点事件绑定 事件冒泡 事件代理事件绑定事件冒泡事件冒泡流程基于DOM树形结构 事件会顺着触发元素向上冒泡 应用场景：代理事件代理代码简洁 减少浏览器内存占用 但，不要滥用（瀑布流）封装代理和普通函数无限下拉图片列表，如何监听每个图片的点击事件代理 用e.target获取触发元素 用matches来判断是否是触发元素..
2020-09-11 11:41:03
88
原创 面试重点 ajax的核心API - XMLHttpRequest和cookie
知识点：XMLHttpRequest 状态码：readyState status 跨域 cors jsonp手写一个简易的ajaxgetpost用promise上面没写send会报错跨域什么是跨域（同源策略）ajax请求时，浏览器要求当前网页和server必须同源（安全） 同源：协议，域名，端口，三者必须一致 前端：http：//a.com:8080/;server:https://b.com/api/xxx注意：加载图片
2020-09-11 11:40:42
524
原创 学习总结
1：如何合并多个对象答：object.assign()或扩展函数（...）2:如何改变对象的this指向另一个对象答：apply()或call()3:settimeout的this指向是什么答：指向window4：获取对象的键或者值答：Object.keys(obj) 、Object.values(obj)参考：Ⅶ期Day2：创建对象、原型、属性的查询与设置5：基本类型与引用类型答：基本：字符串（String）、数字(Number)、布尔(Boolean)、对空（N.
2020-09-11 11:39:52
115
原创 面试重点http面试题
http面试题http常见的状态码有哪些？状态码分类1xx服务器收到请求 2xx请求成功，如200 3xx重定向，如302 4xx客户端错误，如404 5xx服务端错误，如500常见状态码200成功 301永久重定向（配合location，浏览器自动处理） 302临时重定向（配合location，浏览器自动处理） 304资源未被修改 404资源未找到 403没权限 500服务器错误 504网关超时关于协议和规范就是一个约定 要求大家跟着执行 不要违法
2020-09-11 11:39:41
560
原创 面试重点-开发环境
git最常用的代码版本管理工具 大型项目需要多人协作开发，必须熟用git 如果你不用git，不会通过面试 Mac OS自带git命令，windows可去下载 git服务端常见的有github coding.net等 大公司会搭建自己的内网git服务常用git命令git add . git checkout xxx（切换分支） git commit -m "xxx"（写备注） git push origin master(提交代码) git pull origin mast
2020-09-11 11:39:29
170
原创 面试重点-运行环境
运行环境运行环境即浏览器（server端有nodejs） 下载网页代码，渲染出页面，期间会执行若干JS 要保证代码在浏览器中：稳定且高效 网页加载过程 性能优化 安全页面加载过程从输出url到渲染出页面的整个过程 window.onload和DOMContentLoaded的区别知识点加载资源的形式 加载资源的过程 渲染页面的过程资源形式html代码 媒体文件，如图片 视频等 javascript css加载过程DNS（域名服务）解析：域名
2020-09-11 11:37:37
506
原创 面试真题
var和let const的区别var是ES5语法，let const是ES6语法；var有变量提升 var和let是变量，可修改；const是常量，不可修改 let const有块级作用域，var无typeof能判断哪些对象undefinedstring number boolean symbol（值类型） object（注意，typeof null===‘object’）（引用类型） function(方法和工具)列举强制类型转换和隐式类型转换强制：parseIn.
2020-09-11 11:37:25
128
原创 面试重点
HTML1：如何理解HTML语义化让人更容易读懂（增加代码可读性） 让搜索引擎更容易读懂（SEO）2：块状元素&内联元素？display:block/table;有div h1 h2 table ul ol p等display:inline-block/inline；有span img input button 等CSS1：请问div1的offsetWidth是多大？#div1{ width:100px; padding:10px; bord
2020-09-11 11:37:06
307
原创 面试重点JS Web API的DOM
从JS基础知识到JS Web APIJS基础知识 规定语法（ECMA 262标准） JS Web API，网页操作的API（W3C标准） 前者是后者的基础，两者结合才能真正实际应用JS Web APIDOM BOM 事件绑定 ajax 存储前言vue和React框架应用广泛，封装了DOM操作 但DOM操作一直都会前端工程师的基础，必备知识 只会vue而不懂DOM操作的前端程序员，不会长久DOM操作（Document Object Model）DOM是那种数据结果＝＞树(
2020-09-11 11:36:50
100
原创 面试重点JS Web API的BOM
BOM操作（Ｂｒｏｗｓｅｒ Ｏｂｊｅｃｔ Ｍｏｄｅｌ）如何识别浏览器的类型ｎａｖｉｇａｔｏｒ ｓｃｒｅｅｎ ｌｏｃａｔｉｏｎ ｈｉｓｔｏｒｙnavigator和screenlocation和history...
2020-09-11 11:36:38
98
原创 VueDay1 基本使用
Vue使用基本使用，组件使用 高级特性 Vuex和Vue-router使用Vue基本使用指令，插值插值 表达式 指令 动态属性 v-html:会有XSS风险，会覆盖子组件computed和watchcomputed有缓存，data不变则不会重新计算 watch如何深度监听？deep：true watch监听引用类型，拿不到oldValclass和style使用动态属性 使用驼峰式写法条件渲染v-if v-else的用法，可使用变
2020-09-11 11:36:04
171
原创 面试重点-vue原理
数据驱动视图传统组件，只是静态渲染，更新还要依赖于操作DOM 数据驱动视图-Vue MVVM 数据驱动视图－React setState （暂时按下不表）Vue MVVM(模型视图视图模型)总结：组件化 数据驱动视图 MVVMVUE的响应式组件data的数据一旦变化，立即触发视图的更新 实现数据驱动视图的第一步 考察Vue原理的第一题核心API-Object.defineProperty Object.defineProperty的缺点（vue3.0启用P
2020-09-11 11:35:30
4554
原创 面试重点 - vue真题演练
v-show和v-if的区别v-show通过CSS display控制显示和隐藏 v-if组件真正的渲染和销毁,而不是显示和隐藏 频繁切换显示状态用v-show,否则用v-if为何在v-for中用key必须用key,且不能时index和random diff算法中通过tag和key来判断,是否是sameNode 减少渲染次数,提升渲染性能描述Vue组件生命周期(父子组件)单组件生命周期图 父子组件生命周期关系* Vue组件如何通讯父子组件props和this.$emit 自
2020-09-11 11:35:16
190
原创 Vue-路由面试总结
1：keep-alive是什么？原理是什么？它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。activated：keep-alive组件激活时调用。该钩子在服务器端渲染期间不被调用。用于性能优化缓存dom和数据。 deactivated：keep-alive组件停用时调用。该钩子在服务端渲染期间不被调用。2：v-for v-if 执行先后顺序v-for 3：data为什么是个函数？因为vue是
2020-09-11 11:33:50
646
转载 git下载项目
> git init二、添加远程仓库要添加一个新的远程仓库,可以指定一个简单的名字,以便将来引用,运行> git remote add + name + url三、查看目录下的所有项目> git remote -v四、下载代码到本地> git clone + 地址...
2020-08-10 14:37:28
336
原创 每日一练21：图片上传并预览
FileReader.readAsDataURL(File)//转换成base64格式 FileReader.readAsText()//转换成字符串格式 FileReader.readAsArrayBuffer(File)//转换成ArrayBuffer格式 FileReader.readBinaryString(File)//转换成原始二进制格式<!DOCTYPE html><html lang="en"> <head> <meta.
2020-07-21 23:15:12
118
转载 jQuery : 分享合併Table的欄位 (RowSpan、ColSpan) 語法
jQuery語法////合併上下欄位(colIdx)jQuery.fn.rowspan = function(colIdx) { return this.each(function() { var that; $('tr', this).each(function(row) { var thisRow = $('td:eq('...
2020-01-02 14:26:26
1050
原创 Javascript总结之this到底指向谁？
重点：定时器里面的this指向window1-1 普通函数var age =19;function people(){ document.write(`this指向 ${this} : 值為 ${this.age}`)}people()结果为：this指向 [object Window] : 值為 191-2 多层嵌套函数var age =19,name=...
2019-12-20 13:56:02
148
原创 Canvas元素總結
參考：Canvas 基本用途requestAnimationFrame的使用HTML：<canvas id="tutorial" width="150" height="150"></canvas>若是沒有設定width和height屬性，畫布寬預設值為300px、高預設值為150px不支持canvas的可以使用圖片、文字說明&...
2019-12-20 10:15:28
166
原创 大数据canvas
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=...
2019-12-20 10:14:55
79
转载 数组
数组是一种非常重要的数据类型，它语法简单、灵活、高效。 在多数编程语言中，数组都充当着至关重要的角色，以至于很难想象没有数组的编程语言会是什么模样。特别是JavaScript，它天生的灵活性，又进一步发挥了数组的特长，丰富了数组的使用场景。可以毫不夸张地说，不深入地了解数组，不足以写JavaScript。截止ES7规范，数组共包含33个标准的API方法和一个非标准的API方法，使用场景和使用方...
2019-12-20 09:44:27
151
转载 Javascript循环总结：filter(), find(), forEach(), map(), every(), some(), reduce()
公用// 相同的陣列var people = [ { name: 'Casper', like: '鍋燒意麵', age: 18 }, { name: 'Wang', like: '炒麵', age: 24 }, { name: 'Bobo', like: '蘿蔔泥', age: 1 }, ...
2019-12-20 09:40:25
485
1
转载 每日一练20：多维数组改为一维数组
方式一：Array.from var arr =[[1,2,3],10,[24,5],[[12,88],435]]; var arr2 = Array.from(new Set(arr.flat(Infinity))).sort((a,b)=>{return a-b}); console.log(arr2);//(9)[1, 2, 3, 5, 10,...
2019-12-20 09:27:50
105
原创 Javascript的知识总结三
重點知識匯總1-1 深拷贝和浅拷贝的区分浅拷贝和深拷贝：只针对object 和Array 这样的复杂的对象。浅拷贝（只拷贝一层）var arr1 = [1,2,3],arr2 = ['a','b']; arr1 =arr2; console.log(arr1);//(2)["a", "b"]可以看到arr1改变了，这叫浅拷贝1-2 浅拷贝的方法对象浅拷贝...
2019-12-19 16:07:49
135
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人