许小墨のBlog

vue常用属性在vue实例中，我们接触了几个常见的属性： el：指定vue实例监管范围 data：定义vue实例中要使用的数据 methods：定义vue实例中要使用的函数 自定义指令之前学习的指令，都是vue自带的，vue还允许我们自定义指令，实现自己的功能。 自定义指令使用的属性是directives，在vue实例中定义的指令，只能在当前vue实例监管的模板范围内使用。 指令定义： 12345678910111213new Vue({ el: '', // 监管范围 data: {}, // 数据 directives: { 指令名称: { bind: () => {}, // 该指令第一次绑定到元素时调用 - 常用 inserted: () => {}, // 使用该指令的元素插入到父节点时调用 update: () => {}, // 使 ...

vue1一、vue介绍1、简介vue是前端开发过程中基于数据驱动的一个渐进式的框架。 数据驱动：指我们在开发过程中，不需要操作DOM结构，只需要通过操作数据，就能驱动DOM结构的渲染。 渐进式：vue框架中的很多东西都是独立的，项目小，就少用一点，项目大，就用多一些。 框架：使用这套代码可以开发一个完成的项目。对比插件和库。 插件：只能实现项目中某一个功能，例如swiper。 库：封装了很多函数或方法，不能独立实现功能和项目，例如工具库。 作者：尤雨溪，中国人。 官网：https://cn.vuejs.org/ 2、vue的开发模式vue框架中主要封装的内容：MVVM中的VM，即视图和数据绑定。 M：全称Model，代表数据 V：全称View，代表视图，即我们在页面中看到的内容展示 VM：全称ViewModel，即视图和数据绑定。数据驱动视图，视图改变也会驱动数据。 注意事项：改变做功能做案例做效果的思想 - 在vue中不操作DOM，只操作数据，不操作DOM，只操作数据，不操作DOM，只操作数据。 3、vue初体验 下载vue 1npm i vue@2 引入vue文 ...

多媒体标签video只接受几种视屏格式：ogg、mp4、avi 基本使用： 1234567<video src="视屏文件路径"></video><!-- 兼容写法 --><video> <source src="路径1" type="video/mp4"></source> <source src="路径2" type="video/ogg"></source> <source src="路径3" type="video/avi"></source></video> controls属性，出现默认的控制面板 autoplay属性，自动播放 loop属性，循环播放 width和height属性，用来设置视屏可视区域的尺寸，但是宽和高一直会保持等比，所以设置一个就行了，如果都设置了，会出现黑边，但可视 ...

项目打包准备webpack下载所有依赖的模块： 1npm i webpack webpack-cli html-webpack-plugin css-loader html-loader copy-webpack-plugin mini-css-extract-plugin 配置命令 - package.json中： 123456789101112131415161718192021{ "name": "packproject", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", " ...

webpack工具webpack介绍项目做好以后，在上线之前还有一些工作需要去做： 压缩css 压缩js 压缩图片 编译sass 合并文件 。。。 等等，在前端工作流出现之前，这些工作都由人力完成，而这些工作往往比写业务本身更加费时，效率非常之低且还容易出错，于是自动化的处理工具也就必然出现了。 前端的构建工具常见的有Grunt、Gulp、Webpack三种，Grunt比较老旧，功能少，更新少，插件少。gulp适用于原生项目的打包，但是在现代的工作中使用非常少。webpack通常被用在框架中，使用量很大，所以我们学习webpack。 webpack使用下载安装webpack打包需要下载安装webpack工具，安装方式有两种： 全局安装 - 在计算机任何一个地方都可以使用 - 通常适用于一次性使用的工具 1npm i webpack webpack-cli -g 局部安装 - 只能在当前文件夹中使用 - 推荐使用方式 - 因为webpack不是一个一次性使用的工具 1npm i webpack webpack-cli 有很多项目，在开发过程也需要一边开发一边使用webpac ...

canvas简介canvas是html5的一个标签，代表一个画布，可以在上面进行绘画、动画等操作。画布默认大小是300*150。 canvas标签本省只是画布，要实现上面有文字、线条等呈现，需要使用js实现。总之，画布上一切的呈现，都需要使用js来实现。canvas标签本质上就是一张图片，只是一张空白图片。 画布大小不能使用样式控制，用样式调整的是一个可视区域，其实真实的大小，还是一样的，只是在画布上画内容的话，会等比例放大。调整画布大小，需要在标签上直接添加width和height属性。 canvas标签也是可以放文字的，只是当canvas标签不被浏览器支持的时候，会显示，例如ie8。 初体验canvas的简单使用： 获取canvas元素 1var canvas = document.querySelector('canvas') 获取这个元素的工具箱 - 上下文 工具箱中包含了很多工具：直线工具、弧形工具、文本工具、矩形工具…… 我们需要依赖这些工具进行绘画 语法： 1var ctx = canvas.getContext('2d') ...

Git一、git介绍1、概念介绍git是一个项目管理工具。 在工作中，一个项目会分给多人合作，每个人负责一个模块，所有人做完后，将项目代码放在一起组成完成的项目。 在以前， 这项工作需要人工处理，工作量大，出错率高。 现在，这项工作都交给git（项目管理工具）自动处理，工作量忽略不计，出错率低。 主管每天查看项目小组的工作量，以前需要拿到代码文件，跟上一天做对比，现在，通过git工具快速得到统计，可以更公平的论功行赏。 项目开发过程中，如果改动较大，完全瘫痪，正常文件夹中的操作，就需要从头来过了，但是用git来管理项目文件，可以快速回退到某个节点。 工作中的项目都是放在一个代码仓库中的，每个人负责将代码仓库中的代码下载到本地进行开发，每天开发完，都要上传到代码仓库，组长进行项目合并。这个上传和下载的过程，都是通过git工具进行的。 代码仓库相当于一个专门用于存储代码的远程服务器。 利用一个软件 - git工具，对本地或远程的项目文件进行方便的管理。 2、学前了解2.1、文件夹和仓库仓库是被git工具管理的文件夹。 仓库中有.git隐藏文件夹。 仓库可以跟远程服务器建立连接。 2.2、仓 ...

浏览器缓存机制缓存机制有很多，例如：浏览器缓存机制、服务器缓存机制、代理服务器缓存。。。 我们在这里主要说浏览器的缓存机制。 浏览器的缓存机制分为两种： 强制缓存 协商缓存 浏览器缓存机制主要是由响应头控制的。 强制缓存通常浏览器的请求中包含disk cache或memory cache就表示有强制缓存了。 强制缓存只要服务器设置响应头就行，客户端不需要配合。 设置强制缓存的响应头包含： expires pragma cache-control expires和pragma是在http1.1之前就已经存在的两个键。 cache-control是http1.1之后才有键，所以优先级比expires要高。 expiresexpires主要用于设置缓存的时间，值是RFC 2822 格式的时间字符串，如果设置的值不是这样一个字符串或不是一个时间，则设置了也不会生效。 例： 123456789101112131415161718192021222324252627282930// 获取RFC 2822格式的时间格式字符串function getRFC2822Date(addSeconds ...

回调地狱和跨域一、回调函数概念：将一个函数当做参数传入另一个函数的时候，这个函数就叫回调函数。 我们之前用过很多次回调函数，比如：数组方法map、filter等；运动函数中处理运动结束传入的函数；分页插件中使用插件的时候执行的函数。。。包括封装的ajax中，请求成功以后执行的success函数。都是回调函数。 为什么要使用回调函数？ 当我么需要在异步代码执行结束再执行一些同步代码的时候，在异步代码外面无法预知异步代码什么时候执行结束，只有异步代码内部才能知道异步代码什么时候执行结束。此时，可以将需要执行的同步放在一个函数，将函数当做参数传递进异步代码中，异步代码执行结束后，调用这个函数即可。 也就是说，回调函数是异步代码产生的问题的一种解决方案。 二、回调地狱在一些比较复杂的业务逻辑中，有多个异步代码需要按照一定的顺序执行时，就需要有多个回调函数嵌套在一起执行，代码结构如下： 这就造成了，后期这个代码难以阅读和维护，，这是著名的”回调地狱“。 例：1s后输出1，再过1s后输出2，再过1s后输出3，再过1s后输出4 123456789101112setTimeout(() => ...

ajax一、ajax介绍工作中的项目都是前后端分离模式进行开发的，前端渲染页面需要的数据是跟后端请求回来的。前端对后端发送请求，除了使用a标签、输入网站敲回车、引入css、引入js、引入网站图标、引入图片，表单之外，还可以使用另外一个技术ajax。 为什么有了其他请求方式，还需要ajax？ a标签跳转页面，只能发送get请求，无法发送post方式，且无法设置请求头 输入网址敲回车，只能发送get请求，无法发送post方式，且无法设置请求头 引入css，只能发送get请求，无法发送post方式，且无法设置请求头，请求回来的数据只能被解析成css 引入js，只能发送get请求，无法发送post方式，且无法设置请求头，请求回来的数据只能被解析成js代码 引入网站图标，只能发送get请求，无法发送post方式，且无法设置请求头，请求回来的数据只能被解析成网站图标 引入图片，只能发送get请求，无法发送post方式，且无法设置请求头，请求回来的数据只能被解析成图片 表单提交，可以发送get请求，可以发送post请求，但无法设置请求头，且请求发送依赖页面跳转，页面不跳转就无法发送请求 ajax， ...