- 博客(58)
- 收藏
- 关注
RSS订阅原创 封装公共组件中在main.js中通过插件统一注册
全局注册组件：https://cn.vuejs.org/guide/components/registration.html。插件：插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码（也可以注册组件）最后可以在main.js。
2023-11-07 22:53:41
296
原创 封装一个省市区公共组件
难点：封装一个省市区三级联动的公共组件，难点在与对三级嵌套数据的处理，其中三级嵌套数据来源于github上的Administrative-divisions-of-china。
2023-11-06 18:56:10
185
原创 从js和json中引入数据的区别
请确保你的开发环境支持 ES6 模块语法，并且 JSON 文件的路径是正确的。此外，通常在开发中，你可能需要使用异步请求从服务器或外部 API 加载 JSON 数据，这时可以使用 AJAX 或 Fetch API 来实现。这是一种常见的方法，用于在 JavaScript 中导出和引入数据，以实现模块化的代码结构。在前端开发中，你可以使用 JavaScript 来从 JSON 文件中引入数据。你可以使用 JavaScript 来从这个 JSON 文件中加载数据，并在你的应用程序中使用它。的 JSON 文件。
2023-11-06 14:10:26
267
原创 前端终端中的常见快捷命令
快速打开终端：command+k + command+s快速打开快捷键列表，配置打开终端的快捷键为command + shift + 0。比较常用的是cd，ls和pwd，其中cd是重点。ls：列出当前目录下的文件和子目录。pwd：显示当前工作目录的路径。cd：切换当前工作目录。mkdir：创建新目录。touch：创建新文件。rm：删除文件或目录。cp：复制文件或目录。mv：移动文件或目录。
2023-10-30 23:53:57
159
原创 vue总结
1.vue总结（一）基本使用https://www.jianshu.com/p/b03012afb4b02.组件间的通讯https://www.jianshu.com/p/4877a41639cc3.组件生命周期https://www.jianshu.com/p/0a4935e105384.高级特性–自定义v-modelhttps://www.jianshu.com/p/6512057c0cc45.高级特性-$nextTickhttps://www.jianshu.com/p/b6a6e4
2022-03-07 10:23:26
420
原创 webpack与babel的总结
1.基本配置https://www.jianshu.com/p/d6eb241b89882.高级配置a配置多入口https://www.jianshu.com/p/3ae0fc9ac272b如何抽离压缩css文件https://www.jianshu.com/p/b8080c7170e6c抽离公共代码https://www.jianshu.com/p/ac6f239658ced如何实现异步加载js（懒加载）处理vue以及处理jsxhttps://www.jianshu.com/p/b13
2022-01-07 11:19:42
646
原创 vue--组件间传值的常用方式总结（后续还须补充）
父向子传值通过标签属性传值 如果子组件的props接收了 那这个标签属性就具有props特性 如果子组件的props没有接收 那这个标签属性就是一个普通的自定义属性父组件如何向子组件传值父组件通过标签属性的形式向子组件传值。子组件可以通过props属性正常接收到来自父组件的值。但值得注意的是 子组件接收到父组件的值后不应该修改接收到的值，因为该值果然是一个对象，而且被几个子组件共同引用着。那很有可能会导致脏数据 非得改这数据，应该怎么办？ 转
2021-04-20 20:01:29
112
原创 模块化规范
es6模块化（es6模块化的详细代码在第二阶段的day4）1.导出(暴露)： 1.默认导出(一个模块化文件中只允许使用一次)：export default { } 2.先定义在导出 先定义需要暴露的数据 之后通过export{} 进行导出进行 3.定义赋值之后通过export const直接进行导出 2.导入(依赖)：可以通过 import {} from "导出数据的地址" 1.直接导出的情况 import {变量名} from "导出数据的地址"
2021-04-20 19:06:45
65
原创 js--选项卡案例
选项卡思路总结：1.布局时合理利用height和边框，已经背景色#fff覆盖边框的颜色（背景色是覆盖在边框上的）2.点击事件时，先排他，然后单个添加样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
2021-01-27 23:28:45
167
原创 元素的批量添加和元素的翻转
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>批量添加元素和元素的翻转</title> <style> ul {
2021-01-26 20:06:39
82
原创 js-标题滚动
**标题滚动的思路：**将标题的第一个字符添加到最后面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>您好，您有一条新的消息，请注意查收</title></he
2021-01-26 19:15:01
139
原创 js节点操作---备忘录
需要特别注意的是同时替换多个节点和克隆节点是加true<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TodoList</title> <style>
2021-01-26 16:29:20
83
原创 js案例——无缝滚动图片
无缝滚动图片思路整理：1.首页是逻辑方面，当滚动到第二组图的第一张时，立马换为第一组图第一张2.获取一组图片的宽度时，要在新的一组图片复制之前，对于flex项目是img的，一定要给图片设置不伸也不缩；注意为什么是scrollWidth,而不是offsetWidth3.scrollLleft是父元素中的内容位置，前提是给父元素设置了overflow不为visible；<!DOCTYPE html><html lang="en"><head> <me
2021-01-25 22:54:09
153
原创 js案例--图片加载延迟
图片加载案例总结：1.遍历所有的图片，滚动条滚动时绑定事件判断图片顶部距离视口的距离<视口距离是否成立；并判断图片是否已经加载过2.将藏在图片自定义中的属性，设置为加载出来的图片路径3.滚动条未滚动时，提前判断一次4.需要注意的是，图片背景图的设置会提高用户体验<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpo
2021-01-25 20:54:46
251
原创 js案例整理--取消选中 classList
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .wrapper {
2021-01-25 11:09:08
87
原创 js特性——点击设置样式，再次点击取消样式
点击添加样式，再次点击取消样式思路整理1.获取元素集合2.给元素集合绑定事件3.事件的回调函数里面通过ele.style判断是否是选中状态//点击设置样式，再次点击取消样式<style> .wrapper { padding: 20px; width: 800px; text-align: center; border: 2px solid #999; }
2021-01-25 10:09:46
2367
原创 dom中用到小驼峰（1.读取自定义属性 2.操作行内样式 3.）
属性操作——data形式的自定义属性读取<div data-name="" data-spm-age=""></div>// 读写属性divBox.dataset.name;divBox.dataset.spmAge;//如果是内置属性，直接用ele.属性名或者 ele[属性名]操作行内样式// 设置样式ele.style.width = '100px'; // 带单位ele.style.backgroundColor = '#f90'; // 带 -
2021-01-25 08:51:19
201
原创 js-文档结构（节点数和元素树）的记忆
文档结构记忆//需要先获取对象，才能用文档结构取寻找节点树： parentNode 父节点 childNodes 子节点集合（NodeList对象） firstChild 第一个子节点 lastChild 最后一个子节点 previoussilbing 紧邻的前面兄弟节点 nextSlibling 下一个兄弟节点元素树： parentElement 返回父元素 children 返回子元素的集合（HTMLCollection对象） firstElementChi
2021-01-25 00:13:36
118
原创 js案例--全选和反选
全选和反选思路整理：遍历+合理适用checked属性 (function(){ //获取反选按钮;两种方法；另一种是取非 var btn3 = document.getElementById('btn3') var checkChilds = document.querySelectorAll('#newsList input') console.log(checkChilds)
2021-01-24 23:22:29
138
原创 js案例--处理变量名
变量名处理的思路整理：1.将字符分割为数组，map是对象的方法2.map返回处理的数据3.（item是字符串类型）利用字符串的伪数组特性<script> //变量名的处理采用es5新增map（），传递回调函数，回调函数里面return修改的值 // var msg = 'get-element-by-id'; // var ar = msg.split('-').map(function(item,index){ //
2021-01-24 22:52:13
193
原创 js - - 新春倒计时案例
倒计时思路：1.获取时间戳（）——date.getTime( )2.通过时间戳 得 天、时、分、秒；天-时-分-秒3.加04.解决刷新空白和时间到问题 <div></div> <script> (function(){ var box = document.querySelector('div'); var dateTarget = new Date(2021,1,1
2021-01-24 14:06:34
176
原创 上一页下一页效果
思路整理：1.页面布局2.获取元素，通过遍历指定集合各元素的高度（需要注意的是innerHeight得到的是数字）3.绑定事件（需注意scrollBy的用法） body { margin: 0; } .box { text-align: center; overflow: hidden; } .btns { position: fixed;
2021-01-24 11:31:18
210
原创 电子时钟的整理
电子时钟需要注意的是刷新那一刻1.当前时间的获取2.加定时器时间走动3.解决刷新问题 <div class="box"></div> <script> (function(){ //刷新那一刻，浏览器会空白，需要提前先调用一次fn fn() function fn(){ //实例化 var date = new Date();
2021-01-23 23:47:43
81
原创 call方法（打电话借对象方法）的总结
//语法：obj1.call(obj2,arg1,arg2)；obj1是工具，后面的参数是传给obj1用的 <ul id="newsList"> <li>你好啊1</li> <li>你好啊2</li> <li>你好啊3</li> <li>你好啊4</li> <li>你好啊5</li> &l
2021-01-23 15:36:56
135
原创 01 输出当前时间思路整理
输出当前时间1.实例化一个Date（获取年月日等是实例的方法）2.获取年月日3.加 0 处理（三元运算符，并注意月份的处理）4.用到了字符串拼接 (function(){ //实例化 var date = new Date(); //获取年 var year = date.getFullYear() //获取月 var month = date.getMonth() //获取日 va
2021-01-23 14:23:29
84
原创 html（第一周总结）
html总结对于html中基础的标签就是结构标签、文本排版标签和文字标签其中比较重要的是图片标签、a超链接标签、列表标签、表格标签和表单标签；注意他们的应用场景同时拓展了内联框架重点中的重点：绝对路径和相对路径；锚点的两种方式；无序列表的应用场景；单元格的跨行和跨列；表单form里面的值（特别是到后面需要同后端交互时form里面的属性）；表单的应用和容易混淆的值...
2020-12-07 17:10:01
131
原创 vue开发环境的配置
今天在设置vue的开发环境时遇到了很多问题：1.输入命令时报错，提示指令不存在2.安装git时提示应用不存在对于出现的问题采取了将所有的软件重新删除再下的方法，由于在安装好了之后更改了git的路径，导致报错步骤：1.首先需要安装nodejs（直接点下一步）安装完毕之后可以输入 node -v （注意中间有一个空格）就可以查看node的版本2.npm -v（由于npm这个管理工具包是继成在node中的）3.由于在命令管理器中新建项目时不是很方便，因为引入了git4.安装好git之后点击需要
2020-11-19 03:08:12
146
原创 移动web开发入门
学习目标移动web开发基础概念：像素 、视口-viewport移动web开发基础知识:box-sizing、图标字体、flex布局、媒体查询、移动端常用单位响应式布局移动端屏幕适配移动端事件移动端调试终端检测移动端常见问题移动端性能优化基本概念：一、像素分辨率：分辨率越高，越清晰；如1792*828像素分辨率，竖着分为1792个点的物理像素，横着分为828个点的物理像素物理像素（实际开发中不用）：与设备有关，不可改变；也称设备像素css像素：也称逻辑像素和设备独立像素.bo
2020-11-04 09:36:24
239
原创 Ajax与Json
ajax的优点与缺点：优点：异步模式，提升用户体验 减少不必要数据传输，减少带宽占用。优化浏览器和服务器的传输 ajax引擎在客户端运行，承担了一部分服务器的工作，减少了大用户下服务器的负载缺点：不支持浏览器back按钮 安全问题：保留与服务器交互的细节 对搜索引擎的支持比较弱XMLHttpRequest:支持异步请求的技术，Ajax的核心作用：1.可以向服务器提出请求并处理响应而不阻塞用户2.可以页面加载以后进行页面的局部更新如何食用ajx1.创建XMLHttpRequ
2020-10-26 14:15:24
87
原创 JQ动画
今日主打：动画DOM及其CSS操作、自定义动画、动画函数、计时器动画原理：固定的时间间隔（例如0.1s），每次dom元素css样式修改一点（如高和宽各增加10%），视觉效果就像动画了//需要传递的参数是DOM元素最终的css状态和时间//demo1var div = $('#test-animate');div.animate({opacity:025,width:'256px',height:'256px'},3000);//demo2<!DOCTYPE html>&
2020-10-25 20:45:01
131
原创 jQ——选择器(包含查找过滤等功能)；事件
选择器——jQ的核心基本选择器多项选择器层级选择器属性选择器过滤器表单相关查找和过滤基本选择器//1.id选择器// #id ：根据给定的ID匹配一个元素//demo;注意在刚开始应用jq时，要在head里面引用<script> $(document).ready(function(){ var first = $('#first'); console.log(first); var second = $('#second') console.log
2020-10-21 17:08:51
568
js深入了解——正则表达式——中
简单的转义字符： 转义：普通字符 特殊字符 相互双箭头转换<script> //想匹配字符串中的“//” var str = "//我是注释"; var pattern = /\/\//; console.log(pattern.exec(str));//返回的是["//"]</script>但是问题来了？如果特殊字符是\ 那么该怎么办 eg：var str =’’;此时会报错，因为\将’转义了<script> var str
2020-10-16 16:34:30
116
原创 js深入了解——正则表达式测试工具demo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>正则表达式测试工具</title> <style> #regexp{ .
2020-10-14 21:08:03
164
原创 js深入了解——正则表达式——上（创建和简单了解）
正则表达式的组成为什么用正则表达式1.查找特定的字符2.替换文本（eg:敏感词过滤）3.数据有效性验证正则表达式的两种创建方式1.直接：/js/img（我的理解是就当字符串的引号一样）2.函数 ：new("js","img");注意都要给引号，否则无法显示让正则表达式去匹配字符串（正则默认是区分大小写的）如何让其不区分大小写加模式符 i <script> var str = "i love Js"; var pattern = /js/i
2020-10-14 16:49:51
71
原创 js深入讲解——面向对象——下
遍历对象的属性和方法for in格式：for(var i in obj)//遍历对象时，i值是对象的属性名称和方法名称对象有时候、是可做数组处理的//遍历时直接声明对象的方法可以直接遍历，而用函数声明的方法需要实例化之后才能进行遍历//demo1<script>var ren = {};ren.name="zs";ren.age = 18;ren.len = 180;ren.demo1 = function(){ alert(this.name);}for(var i
2020-10-13 21:05:12
117
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人