梦洁小站-属于你我的小天地

前置准备 nodejs必安装 全局安装typescript 1npm install typescript -g 使用tsc命令对ts文件进行编译 进入命名行 进入ts文件所在目录 执行命名tsc xxx.ts即可,xxx.ts中xxx为文件名 如果没有在报错的情况下进行编译,默认情况下依旧会进行编译,但是可以后期配置不编译 编译可以编译为任意js(兼容性处理更加好),后期可以通过配置文件进行配置 文章很多参考和学习这位博主的 https://ts.xcatliu.com/ ts的基本类型 类型声明是TS非常重要的一个特点 通过类型声明可以指定TS中变量（参数、形参）的类型 指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错 简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值 ts一些类型 类型 例子 描述 number 1, -33, 2.5 任意数字 string ‘hi’, “hi”, hi 任意字符串 boolean true、false 布尔值true或false 字 ...

前言 使用typescript的语法完成的 使用了webpack打包工具,可以兼容IE10以上浏览器 该有的碰撞到自己身体和碰到墙壁游戏结束和食物随机功能都有~,具体可以自己体验体验 有源代码和编译好后的文件(dist目录) @在线演示 下载 github地址 gitee地址 制作难点蛇掉头的功能12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758/* 设置坐标 */ XYPositionSet(newValue: number, axle: string) { //新的坐标等于原来的坐标,不设置 //@ts-ignore if (newValue === this[axle]) { return; } //判断是否超过范围 if (this.isOutArea(newValue)) ...

什么是webpack 是一个模块打包工具 webpack将前端的所有资源文件(js/json/css/img/less…)都看做模块,来进行处理 会根据模块的依赖关系进行分析,生成对应的资源 原生的webpack只可以完成js/json的打包编译,而转换什么的需要其他插件进行完成,比如说es6转es5,箭头函数转换,都需要依赖其他loader或者插件(plugins) 五个核心概念 入口(entry): 告诉webpack应该使用哪个模块,作为构建内部依赖图的开始,比如vue中我们经常在一个文件夹当中建立index.js或者main.js作为入口文件 出口(output): 在哪里输出文件,以及如何命名这些文件 比如经常可以看到有些目录有dist build等这些,里面只有js,css,img等一些文件,就是打包输出后的东西 loader: 我们需要注意,原生webpack只支持解析js和 json,其他的需要安装对应的loader,比如处理less就需要less-loader 本身是一个函数,接收源文件作为参数,返回转换结果 loader ...

有需求才有动力~有时候经常需要将md文件当中的图片离线保存下来,指不定那一天图床挂了,图片找不到了!但是typora没有一键保存到本地图片功能!,必须要一个个右键保存才可以!!!!太坑爹!!! 下载 github下载 gitee下载 原理1234567读取指定目录下的所有文件 => 获取md文件并将路径保存到数组A => 遍历每一个md文件,使用正则判断是否有图片链接=> 当前md的文件下所有图片链接保存到数组B当中的某一项当中(使用push),重复此操作=> 弹出一个数组A的值(也就是md文件的路径) => 弹出一个数组B(也就是当前md所对应的图片链接)=> 对数组B进行遍历访问并保存图片到本地 => 替换内容 => 遍历完成后写入新内容 具体看源代码吧,我把注释写的挺详细的使用 nodejs环境 直接下载源码,记得先安装下依赖!然后 node ./index.js输入安装提示输入文件地址即可(注意要是文件夹!!!) window环境 尝试了下打包,感觉打包的文件好大,打包过程 全局安装下 npm install pk ...

题目1-下列说法正确的是（）多选12345678A: requestAnimationFrame(foo) 确保使浏览器在下一次重绘之前调用 foo 方法B: 在 addEventListener 的处理方法中使用 e.preventDefault() 可以阻止事件冒泡C: 把 <script> 标签的引入放在文档末尾可以确保脚本下载和执行均在文档解析完成后发生D: 多个 <script> 标签使用 defer 属性引入脚本时，可以确保脚本的执行是按照其被引入的顺序的 答案 A,C,D 解析 更详细的script的defer和async可以看这位博主的 A选项:window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行 BCD选项: B: 记住,阻止事件默认行为是preventDefault 停止事件冒泡是stopPropagation (记住关键字就好了,阻止和停止这二个关键字) ...

移动端Vue适配小练习 为了练习,就没有使用自动转换rem的功能,想了解的可以看看这几位博主的 博主1 博主2 想看源码的可以到github或者gitee上下载(后台也打包好了) github地址 gitee地址 项目遇到的问题记录Navigation aborted from “/center“ to “/login“ via a navigation guard解决方法: vue_project\src\router\index.js 路由主入口文件当中添加如下代码 12345678910111213141516171819202122232425262728293031const originalPush = VueRouter.prototype.push//解决重复提交相同链接报错VueRouter.prototype.push = function push(location, onResolve, onReject) { if (onResolve || onReject) return originalPush ...

前置总结 1个css像素对应1个设备独立像素 对应n个物理像素 设置一个div:height:100px;width:50px,那么height:100px(css像素) 对应 100个设备独立像素 在dpr为2的屏幕下: height:100px(css像素) 对应 2 * 100 = 200个物理像素 drp为3的屏幕下: width:50px(css像素) 对应 50 * 3 = 150个物理像素 物理像素及屏幕分辨率注意: 屏幕分辨率是一个固定的值,屏幕生产出来就确定了,无法修改! 我们在电脑所设置的,都是显示分辨率! 显示分辨率和屏幕分辨率是二个概念! 重要前提: 物理像素不等于屏幕分辨率,物理像素和独立像素不可改变 我们电脑屏幕,他叫物理像素(也有的叫设备像素),物理像素不可以改变,我们电脑改变的叫分辨率,而不是物理像素. 比如说一块屏幕的物理像素是1920 * 1080,那么我可以更改他的分辨率为1600 * 900,但是没办法办法改变物理像素 简单来说就是**调整分辨率改变的是像素在横轴和纵轴的排布规则,**比如原来是横向放1920的像素, ...

Vue的MVVM模型知道什么是MVVM M: (Model 模型) 即后端传递过来或者自己定义的数据(对应vue组件当中的data,props,computed等) V: (View 视图) 即用户看到的界面UI (也就是我们组件当中的template部分) VM: ViewModel,负责实现View和Model之间数据状态同步的中间对象 MVVM的关系 MVVM优点 在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互，Model 和 ViewModel 之间的交互是双向的，因此 View 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反应到View 上。ViewModel 通过双向数据绑定把 View 和 Model 连接了起来，而 View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM， 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。 假如面试问到我说说看MVVM,我可能会这样子回答 我理解的MVVM就是 ...

vue使用echarts报错Error in mounted hook: “TypeError: this.dom.getContext is not a function” 解决 一开始是this.$refs.dom获取节点的,后面使用在<el-row>标签上就不可以,所以如果使用this.$refs进行echarts的初始化操作会报错,就使用原生dom获取节点后初始化即可 elementUI 日期选择器在vue-admin中设置中文显示 方法 main.js文件当中 123// import locale from 'element-ui/lib/locale/lang/en' // lang i18n 注释掉import locale from 'element-ui/lib/locale/lang/zh-CN' //添加Vue.use(ElementUI, { locale });//添加 设置前 设置后 moment日期插件输出格式错误 之前输出console.log(moment( ...

盒子模型组成: content(内容区) border(边框) padding(内边距) margin(外边距) 盒子大小盒子的大小值得就是盒子在容器中实际所占据的高度和宽度(默认情况下我们通过css设置的width和height只是设置了content(内容区)的高度和宽度,实际上盒子模型所占据的高度和宽度是按照下面来计算的) 实际的宽度: 实际宽度 = margin-left + border-left + padding-left + width(content-width) + padding-right + border-right + margin-right 实际的高度: 实际的高度 = margin-top + border-top + padding-top + height(content-height) + padding-bottom + border-bottom + margin-bottom 比如下面图片的实际宽度和实际高度是多少呢? 使用上述公式，就能算出示例中的高宽值 实际宽度 = 20+6+20+400+20+6 ...