- 博客(57)
- 收藏
- 关注
RSS订阅原创 配置git SSH
二、生成SSH密钥过程：三、获取SSH key值本机做例子：一般都在“C:\Users\wlz.ssh”这个路径下，找到.pub后缀的文件，打开之后就是SSH key值。这里使用gitLab做例子1.先点击设置2.选择侧边菜单的 SSH key，将key值填入即可。
2022-06-01 15:28:57
280
原创 Vue3.0中的响应式原理
vue2.x的响应式实现原理：对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。Object.defineProperty(data, 'count', { get () {}, set () {}})存在问题：新增属性、删除属性, 界面不会更新。直接通过下标修改数组, 界面不会自动更新。Vue3.0的响应式
2021-08-02 16:41:25
359
原创 vue3-ref和reactive
ref作用: 定义一个响应式的数据语法: const xxx = ref(initValue)创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。JS中操作数据： xxx.value模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>备注：接收的数据可以是：基本类型、也可以是对象类型。基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。对象类型的数据：内部
2021-08-02 15:00:33
739
原创 vue3-setup
setup理解：Vue3.0中一个新的配置项，值为一个函数。setup是所有Composition API（组合API）“ 表演的舞台 ”。组件中所用到的：数据、方法等等，均要配置在setup中。setup函数的两种返回值：若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）若返回一个渲染函数：则可以自定义渲染内容。（了解）注意点：尽量不要与Vue2.x配置混用Vue2.x配置（data、methos、computed…）中可以访问到setup中的属性
2021-08-02 14:35:36
346
原创 vue-自定义指令
自定义指令一、定义语法：(1).局部指令：new Vue({ new Vue({directives:{指令名:配置对象} 或 directives{指令名:回调函数}}) })(2).全局指令：Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)二、配置对象中常用的3个回调：(1).bind：指令与元素成功绑定时调用。(2).inserted：指令所在元素被插入
2021-07-27 20:05:48
511
原创 vue-内置指令
内置指令v-text指令：1.作用：向其所在的节点中渲染文本内容。2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会<div id="root"> <div>你好，{{name}}</div> <div v-text="name"></div> <div v-text="str"></div> </div> </body> <scrip
2021-07-27 20:03:55
457
原创 vue-过滤器
过滤器：定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。语法：1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”备注：1.过滤器也可以接收额外参数、多个过滤器也可以串联2.并没有改变原本的数据, 是产生新的对应的数据<!DOCTYPE html><html> <head&g
2021-07-27 19:59:19
233
原创 Vue监视数据的原理
Vue监视数据的原理： 1. vue会监视data中所有层次的数据。 2. 如何监测对象中的数据？ 通过setter实现监视，且要在new Vue时就传入要监测的数据。 (1).对象中后追加的属性，Vue默认不做响应式处理 (2).如需给后添加的属性做响应式，请使用如下API： Vue.set(target，propertyName/index，value) 或 vm.$set(target，p..
2021-07-27 19:56:38
765
原创 key的原理（vue）
面试题：vue中的key有什么作用？（key的内部原理）1. 虚拟DOM中key的作用：key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：2.对比规则：(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。(2).旧虚拟DOM中未找到
2021-07-27 19:53:30
696
原创 条件渲染和列表渲染
条件渲染1.v-if写法：(1).v-if=“表达式”(2).v-else-if=“表达式”(3).v-else=“表达式”适用于：切换频率较低的场景。特点：不展示的DOM元素直接被移除。注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。2.v-show写法：v-show=“表达式”适用于：切换频率较高的场景。特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉3.备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到
2021-07-27 19:49:07
160
原创 vue -监视属性与计算属性
监视属性监视属性watch：1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作2.监视的属性必须存在，才能进行监视！！3.监视的两种写法：(1).new Vue时传入watch配置(2).通过vm.$watch监视<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>天气案例_监视属性</title> <!-- 引入Vue
2021-07-26 19:14:56
483
原创 vue-键盘事件
键盘事件1.Vue中常用的按键别名：回车 => enter删除 => delete (捕获“删除”和“退格”键)退出 => esc空格 => space换行 => tab (特殊，必须配合keydown去使用)上 => up下 => down左 => left右 => right2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）3.系统修饰键（用法特殊）：ctrl、alt、
2021-07-26 17:55:29
654
原创 vue的数据代理
数据代理vue中的数据代理: 通过vm对象来代理data对象中属性的操作(读/写)好处: 通过vm对象就可以方便的操作data中的数据基本原理:1). 通过Object.defineProperty(vm, key, {})给vm添加与data对象的属性对应的属性2). 所有添加的属性都包含get/set方法3). 在get/set方法中去操作data中对应的属性属性描述符：1.数据描述符configurable:是否可以重新定义enumerable：是否可以枚举value：初始值
2021-07-26 17:11:55
291
原创 fastclick-解决移动端300ms延迟以及图片懒加载
fastclick-解决移动端300ms延迟第一步安装fastclickyarn add fastclick第二步使用图片懒加载什么叫懒加载通俗讲 : 懒加载就是延时加载，即当需要用到的时候再去加载。懒加载原理是什么先将 img 标签中的src链接设为同一张图片（空白图片），将其真正的图片地址存储再 img 标签的自定义属性中（比如data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。第一步安装yarn add vue
2021-07-23 17:47:51
202
1
原创 【vue项目踩坑记录】(一)
搭建项目用户评论时，能够完整渲染出整体界面无问题，但开发者工具仍然报出“Error in render: “TypeError: Cannot read property ‘avatar’ of undefined” found in”错误，具体如下首先，查看了Devtools中是否接收到了数据，发现数据确实存在：【根本原因】：我们发现这里的commentInfo是父组件中异步网络请求加载的数据，调用显示，然后vue渲染机制中：异步数据先显示初始数据，再显示带数据的数据，所以上来加载commen
2021-07-23 11:24:47
219
原创 防抖操作处理
防抖操作防抖debounce/节流throttle防抖函数作用的过程：如果我们直接执行 refresh，那么refresh函数会被执行30次。可以将refresh函数传入到debounce函数中，生成一个新的函数。之后在调用非常频繁的时候，就使用新生成的函数而新生成的函数，并不会非常频繁的使用，如果下一次执行来的非常快，那么会将上一次取消掉debounce(func,delay){ let timer = null; return function (...args){ if (t
2021-07-22 13:35:17
214
原创 better-scroll插件---@2.4.1
关于better-scroll插件的无法滑动bugbetter-scroll滚动原理wrapper作为父容器，它的高度会随着内容的大小而撑高。那么，当content的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动内容区了BetterScroll 默认处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略所以也给定了如下页面结构<div class="wrapper"> <ul class="content
2021-07-21 19:28:28
392
3
原创 class 类
class 类ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过 class 关键字，可以定义类。基本上，ES6 的 class 可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。知识点：class 声明类constructor 定义构造函数初始化extends 继承父类super 调用父级构造方法static 定义静态方法和属性父类方法可以重写//父类
2021-07-14 20:26:00
143
原创 Set和Map
SetES6 提供了新的数据结构 Set（集合）。它类似于数组，但成员的值都是唯一的，集合实现了 iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历，集合的属性和方法：size 返回集合的元素个数add 增加一个新元素，返回当前集合delete 删除元素，返回 boolean 值has 检测集合中是否包含某个元素，返回 boolean 值clear 清空集合，返回 undefined//创建一个空集合let s = new Set();//创建一个非空集合
2021-07-14 20:22:29
192
原创 迭代器和生成器
迭代器遍历器（Iterator）就是一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作。ES6 创造了一种新的遍历命令 for…of 循环，Iterator 接口主要供 for…of 消费原生具备 iterator 接口的数据(可用 for of 遍历)a) Arrayb) Argumentsc) Setd) Mape) Stringf) TypedArrayg) NodeList工作原理a) 创建一个指
2021-07-14 20:16:37
84
原创 Symbol
Symbol 基本使用ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是JavaScript 语言的第七种数据类型，是一种类似于字符串的数据类型。Symbol 特点Symbol 的值是唯一的，用来解决命名冲突的问题Symbol 值不能与其他数据进行运算Symbol 定义 的 对象属 性 不能 使 用 for…in 循 环遍 历 ，但 是可 以 使 用Reflect.ownKeys 来获取对象的所有键名//创建 Symbollet s1 = Symbol();cons
2021-07-14 20:08:51
113
原创 Promise
什么是promise？Es6中一个非常重要和好用的特性就是Promise但是初次接触Promise会一脸懵逼，看官方文章也是一头雾水Promise是异步编程的一种解决方案那什么时候我们会来处理异步事件呢？一种很常见的场景应该就是网络请求我们封装一个网络请求的函数，因为不能立即拿到结果，所以不能像简单的3+4=7一样将结果返回所以往往我们会传入另一个函数，在数据请求成功时，将数据通过传入的函数回调出去如果只是一个简单的网络请求，那么这种方案不会给我们带来很大的麻烦但是，当网络请求非常复
2021-07-14 19:45:09
235
原创 Vue-Router(二)
$router和$route的区别$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法$route为当前router跳转对象里面可以获取name，path，query，params等导航守卫我们可以利用beforeEach来完成标题的修改首先，我们可以在钩子当中定义一些标题，可以利用meta来定义其次，利用导航守卫，修改我们的标题前置守卫（guard）导航钩子的三个参数解析：to：即将要进入的目标的路由对象from：当前导航即将要离开的路
2021-07-14 15:05:33
120
原创 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location:‘xxx‘
出现以下错误：vue-router.esm.js:2066 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “/home/news”.解决办法：方式一：在使用 replace、push等方法时捕获异常方式二：
2021-07-14 11:43:34
401
转载 vue路由简介
什么是路由？路由就是通过互联的网络把信息从源地址传输到目的地址的活动。路由中有一个非常重要的概念叫路由表路由表本质上就是一个映射表，决定了数据包的指向。后端路由阶段早期的网站开发整个HTML页面是由服务器来渲染的服务器直接生产渲染好对应的HTML页面，返回给客户端进行展示。但是，一个网站，这么多页面服务器如何处理？一个页面有自己对应的网址，也就是URLURL会发送到服务器，服务器会通过正则对该URL进行匹配。并且最后交给一个Controller进行处理Controller进行各种处
2021-07-13 19:57:03
139
原创 Vue-Router
URL的hashURL的hash也就是锚点（#）,本质上是改变window.location的href属性我们可以通过直接赋值location.hash来改变href，但是页面不发生刷新HTML5的history模式pushStatehistory接口是HTML5新增的，它有五种模式改变URL而不刷新页面history.pushState({},"","home") //添加新的一层history.back() //返回上一层replaceStatehisto
2021-07-13 19:51:50
296
原创 箭头函数的使用和this指向
箭头函数的使用//箭头函数：也是一种定义函数的方式//1.定义函数的方式：functionconst aaa = function(){}//2.对象字面量中定义函数const obj = { bbb(){}}//3.es6中的箭头函数// const ccc = (参数列表)=>{// }const ccc = () =>{}箭头函数的参数//1.参数问题//1.1放入两个参数const sum = (num1, num2) => { r
2021-07-12 19:22:22
143
原创 VUE CLI
什么是VUE CLI如果你只是简单写几个Vue的Demo程序，那么你不需要Vue CLI.如果你在开发大型项目，那么你需要，并且必然需要使用Vue CLI使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。如果每个项目都需要手动完成这些工作，那无疑效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。CLI是什么意思?CLI是Command-Line Interface,翻译为命令行界面，但是俗称脚手架。Vue CLI是一个官方发布
2021-07-12 18:26:57
291
原创 vue-更改项目安装时使用npm/yarn
更改项目安装时使用npm/yarn关键是修改.vuerc文件。先找到.vuerc文件，一般在如下路径里面：C:\Users\[你使用的用户文件夹]然后打开.vuerc文件{ "useTaobaoRegistry": true, "packageManager": "yarn", "latestVersion": "4.5.13"}根据自己的需要修改"packageManager"即可，退出保存。...
2021-07-12 18:11:20
959
1
原创 vue.js安装
安装Vue方式有很多：方式一：直接CDN引入 你可以选择引入开发环境版本还是生产环境版本 <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <!-- 生产环境版本，优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue@2.
2021-07-11 12:14:03
154
原创 配置文件分离
配置文件分离将webpack.config.js文件分成三个配置文件，删除webpack.config.js文件。后面就可以分时候使用对应的配置文件。(这里对应的是webpack@3.6.0版本)需要安装webpack-merge来进行配置文件合并：npm install webpack-merge@4.1.5 --save-devdev.config.js开发时配置文件const webpackMerge = require('webpack-merge')const baseConfi
2021-07-11 12:11:49
320
原创 搭建本地服务器
搭建本地服务器webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。不过它是一个单独的模块，在webpack中使用之前需要先安装它(这里对应的是webpack@3.6.0版本)npm install --save-dev webpack-dev-server@2.9.1devserver也是作为webpack中的一个选项，选项本身可以设置如下属性：1.contentBase：为哪一
2021-07-11 12:07:38
286
原创 plugin
plugin是什么？1.plugin是插件的意思，通常是用于对某个现有的架构进行扩展。2.webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等等。loader和plugin区别loader 主要用于转换某些类型的模块，它是一个转换器。plugin 是插件，它是对webpack本身的扩展，是一个扩展器plugin的使用过程：步骤一：通过npm安装需要使用的plugins（某些webpack已经内置的插件不需要安装）步骤二：在webpack.config.
2021-07-10 17:40:27
3555
原创 webpack中的loader
什么是loaderloader是webpack中一个非常核心的概念。webpack用来做什么呢？在我们之前的实例中，我们主要是用webpack来处理我们写的js代码，并且webpack会自动处理js之间相关的依赖。但是，在开发中我们不仅仅有基本的js代码处理，我们也需要加载css、图片，也包括 一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等。对于webpack本身的能力来说，对于这些转化是不支持的。
2021-07-09 18:18:58
3939
原创 webpack.config.js和package.json配置
webpack.config.js配置入口 和出口如果每次使用webpack的命令都需要写上入口和出口作为参数，就非常麻烦。只需要将两个参数写到配置 中，就可以 解决。const path = require('path')module.exports = { //入口：可以是字符串/数组/对象，这里我们入口只有一个，所有写一个字符串即可 entry:'./src/main.js', //打包入口路径 //出口：通常是一个对象，里面至少包含两个重要属性，path和fi
2021-07-09 17:13:11
450
原创 webpack介绍和安装及基本使用
1.什么是webpack？（前端模块化打包工具）从本质上 来讲，webpack是一个现代的JavaScript应用的静态模块打包工具但是它是什么呢？我们从两个点来解释：模块 和 打包1.1前端模块化目前使用前端模块化的一些方案：AMD、CMD、CommonJS、ES6在ES6之前，我们要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发。并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包。而webpack其中一个核心就是让我们可能进行
2021-07-09 15:31:22
182
原创 slot插槽
slot插槽组件的插槽：1.组件的插槽也是为了让我们封装的组件更加具有扩展性。2.让使用者可以决定组件内部的一些内容到底展示什么。slot使用1.插槽的基本使用 <slot></slot>2.插槽的默认值 <slot>默认值</slot>3.如果有多个值，同时放入到组件进行替换，一起作为替换元素<body> <div id="app"> <cpn><button>按钮<
2021-07-09 15:27:32
115
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人