HuangBingQuan

2022年1月24日

摘要： Vue封装的过渡与动画作用：在插入、更新或移出 DOM 元素时，在合适的时候给元素添加样式类名。图示：写法：准备好样式：元素进入的样式 v-enter：进入的起点 v-enter-active：进入过程中 v-enter-to：进入的终点元素离开的样式 1. v-leave：离开的起点阅读全文

posted @ 2022-01-24 04:35 HuangBingQuan 阅读(54) 评论(0) 推荐(0) 编辑

nextTick

摘要： nextTick 语法：this.$nextTick(回调函数) 作用：在下一次 DOM更新结束执行其指定的回调。什么时候用：当改变数据后，要基于更新后的DOM进行某些操作时，要在nextTick所指定的回调函数中执行。阅读全文

posted @ 2022-01-24 03:10 HuangBingQuan 阅读(175) 评论(0) 推荐(0) 编辑

2022年1月22日

消息订阅与发布（pubsub）

摘要：消息订阅与发布（pubsub）一种组件间通信的方式，适用于任意组件间通信。使用步骤：安装pubsub：npm i pubsub-js 或 yarn add pubsub 引入：import pubsub from 'pubsub-js' 接受数据：A组件想接受数据，则在A组件中订阅消息，订阅的阅读全文

posted @ 2022-01-22 21:27 HuangBingQuan 阅读(215) 评论(0) 推荐(0) 编辑

全局事件总线（GlobalEventBus）

摘要：全局事件总线（GlobalEventBus）一种组件间通信的方式，适用于任意组件间通信安装全局事件总线 new Vue({ ..... beforCreate() { Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm } }) 使用事件总线：阅读全文

posted @ 2022-01-22 06:14 HuangBingQuan 阅读(373) 评论(0) 推荐(0) 编辑

2022年1月21日

组件的自定义事件（通信父子）

摘要：组件的自定义事件一种组件间通信的方式，适用于：子组件 > 父组件使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。绑定自定义事件：第一种方式：在父组件中：<Demo @pareven="test"/> 第二种方式：在父组件中： <Demo 阅读全文

posted @ 2022-01-21 01:59 HuangBingQuan 阅读(60) 评论(0) 推荐(0) 编辑

2022年1月20日

BOM存储Web数据的API xxxStorage

摘要： WebStorage 存储内容大小一般支持5MB左右（不同的浏览器可能还不一样）浏览器端通过 window.localStorage 和 window.sessionStorage 属性来实现本地存储机制。相关API xxxStorage.setItem('key', 'value'); 该方法阅读全文

posted @ 2022-01-20 01:58 HuangBingQuan 阅读(29) 评论(0) 推荐(0) 编辑

transition用法

摘要： transition过渡 transition简介 transition用来定义元素样式变换时的过渡效果。 css3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击，获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。写法 tr 阅读全文

posted @ 2022-01-20 00:01 HuangBingQuan 阅读(839) 评论(0) 推荐(0) 编辑

2022年1月19日

总结Vue基础开发流程

摘要：总结基础案例部分开发流程 1. 组件化编码流程拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用。一个组件在用：放在组件自身即可。一些组件在用：放在他们共同的父组件上（状态提升）。实现交互：从绑定事件开始阅读全文

posted @ 2022-01-19 00:49 HuangBingQuan 阅读(166) 评论(0) 推荐(0) 编辑

2022年1月18日

scoped样式

摘要： scoped样式作用：让样式在局部生效，防止冲突。写法：<style scoped> 阅读全文

posted @ 2022-01-18 01:13 HuangBingQuan 阅读(34) 评论(0) 推荐(0) 编辑

插件（plugins）

摘要：插件（plugins）功能：用于增强Vue 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个参数是插件使用者传递的数据。定义插件：对象.install = function(Vue, option) { Vue.filter(...) ...} const pl 阅读全文

posted @ 2022-01-18 00:37 HuangBingQuan 阅读(574) 评论(0) 推荐(0) 编辑

2022年1月17日

mixin（混入）

摘要： mixin(混入) 功能：可以把多个组件共用的配置提取成一个混入对象使用方式：第一步定义混合，例如： { data() {....}, methods: {....}, .... } 第二步使用混合，例如：全局混入：Vue.mixin(xxx) 局部混入：Vue.mixin['xxx'] 注：阅读全文

posted @ 2022-01-17 22:46 HuangBingQuan 阅读(47) 评论(0) 推荐(0) 编辑

配置项props

摘要：配置项 props 功能：让组件接受外部传过来的数据。传递数据： <Demo name="码农权"/> 接受数据：第一种方式（只接受）： props: ['name'] 第二种方式（限制类型） props: { name: String } 第三种方式（限制类型、限制必要性、指定默认值） pro 阅读全文

posted @ 2022-01-17 22:19 HuangBingQuan 阅读(34) 评论(0) 推荐(0) 编辑

ref属性

摘要： ref属性被用来给元素或子组件注册的引用信息（id的替代者）应用在 html 标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）使用方式：打标识：<h1 ref="xxx">....</h1> 或 <组件标签 ref="xxx"></组件标签> 获取：this.$refs. 阅读全文

posted @ 2022-01-17 01:02 HuangBingQuan 阅读(126) 评论(0) 推荐(0) 编辑

2022年1月16日

关于不同版本的Vue

摘要：关于不同版本的Vue vue.js与vue.runtime.xxx.js 的区别 vue.js是完整版的Vue，包含：核心功能+模板解析器 vue.runtime.xxx.js是运行版的Vue 因为Vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用ren 阅读全文

posted @ 2022-01-16 23:08 HuangBingQuan 阅读(75) 评论(0) 推荐(0) 编辑

2022年1月15日

VueComponent构造函数

摘要：关于VueComponent 假设有一个school组件 school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。我们只需要写<school>或<school></school>,Vue解析时会帮我们创建school组件的实例对象，即Vu 阅读全文

posted @ 2022-01-15 01:02 HuangBingQuan 阅读(90) 评论(0) 推荐(0) 编辑

2022年1月12日

Vue非单文件组件

摘要：组件组件的定义：实现局部功能效果的代码集合。（好维护、依赖关系不混乱、复用高）单文件组件（.vue）与非单文件组件（.html）单文件组件：一个文件中只包含1个组件。非单文件组件：一个文件中包含n个组件。在非单文件组件中创建组件局部组件 <div id="root"> <!-- 编写组件阅读全文

posted @ 2022-01-12 02:23 HuangBingQuan 阅读(235) 评论(0) 推荐(0) 编辑

2022年1月10日

vue生命周期

摘要：生命周期又名：生命周期回调函数、生命周期函数、生命周期钩子。是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。举个例子 Person和vm的一生张三的一生（张三的生命周期）将要出生呱呱坠地 ==> 检查身体各项指阅读全文

posted @ 2022-01-10 23:47 HuangBingQuan 阅读(27) 评论(0) 推荐(0) 编辑

css3box-sizing

摘要：盒模型 box-sizing: content-box; 即普通盒模型 box-sizing: border-box; 即怪异盒模型注意：浏览器默认的是普通盒模型也就是 box-sizing:content-box; 普通盒模（标准盒模型）型的特征在使用border和padding之后是向外扩展阅读全文

posted @ 2022-01-10 02:33 HuangBingQuan 阅读(43) 评论(0) 推荐(0) 编辑

2022年1月9日

自定义指令总结

摘要： Vue自定义指令总结： 1、定于语法（1）局部指令 new Vue({ //directives: {指令名：配置对象} 指令: { bind() {}, inserted() {}, updata() {} } }) //或简写简写该回调融合了两个钩子回调 //bind与update 即指令与阅读全文

posted @ 2022-01-09 02:25 HuangBingQuan 阅读(100) 评论(0) 推荐(0) 编辑

Vue模板语法

摘要： Vue模板语法有2大类 1、插值语法：功能：用于解析标签体内容。写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。 2、指令语法功能：用于解析标签（包括：标签属性，标签体内容、绑定事件） v-bind、v-on等阅读全文

posted @ 2022-01-09 02:09 HuangBingQuan 阅读(29) 评论(0) 推荐(0) 编辑

v-cloak、v-once、v-pre

摘要： v-cloak指令（没有值） 1、本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。 2、使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。 v-once指令 1、v-once所在节点在初次动态渲染后，就视为静态内容了。 2、以后数据的改变不会引阅读全文

posted @ 2022-01-09 00:28 HuangBingQuan 阅读(53) 评论(0) 推荐(0) 编辑

2022年1月8日

v-html指令

摘要： v-html指令：作用：向指定节点中渲染包含html结构的内容。与插值语法的区别（1）v-html会替换掉节点中的所有内容，{{xxx}}则不会（2）v-html可以识别html结构。严重注意：v-html有安全问题！！！（1）在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击阅读全文

posted @ 2022-01-08 01:53 HuangBingQuan 阅读(1898) 评论(0) 推荐(0) 编辑

v-text指令与插值语法的区别

摘要： v-text指令（1）作用：向其所在的节点中渲染文本内容。（2）与插值语法的区别：v-text会替换掉节点中的内容，{{xxx}}则不会阅读全文

posted @ 2022-01-08 00:57 HuangBingQuan 阅读(102) 评论(0) 推荐(0) 编辑

Vue过滤器

摘要：过滤器定义：对要显示的数据进行特定格式化后再展示（适用于一些简单逻辑的处理）语法全局↓ 局部↓ （1）注册过滤器：Vue.filter(name, callback) 或 new Vue({ fliters: {}}) （2）使用过滤器：{{ xxx | 过滤器名称}} 或 v-bind:属性阅读全文

posted @ 2022-01-08 00:49 HuangBingQuan 阅读(25) 评论(0) 推荐(0) 编辑

2022年1月7日

Vue收集表单数据

摘要：收集表单数据：若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。若：<input type="radio"/>，则v-mode收集的是value值，且要给标签配置value值。若：<input type="checkbox"/> 1 阅读全文

posted @ 2022-01-07 23:41 HuangBingQuan 阅读(174) 评论(0) 推荐(0) 编辑

Vue监视数据的原理

摘要： 1、Vue会监视data中所有层次的数据。 2、如何监测对象中的数据？通过setter实现监视，且要在new Vue时就传入要检测的数据（1）对象中后追加的属性，Vue默认不做响应式。（2）如需给后添加的属性做响应式，要使用如下API Vue.set(target, propertyName/ 阅读全文

posted @ 2022-01-07 00:36 HuangBingQuan 阅读(44) 评论(0) 推荐(0) 编辑

2022年1月5日

vue中key有什么作用？（key的内部原理）

摘要： 1、虚拟DOM的key的作用： key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下： 2、对比规则：（1）旧虚拟DOM中找到了与新虚拟DOM相同的key：若虚拟DOM中内容阅读全文

posted @ 2022-01-05 23:34 HuangBingQuan 阅读(313) 评论(0) 推荐(0) 编辑

2022年1月4日

Object.defineProperty

摘要： 1、定义属性的两种形式 let obj = { name: '码农权' } 相当于 Object.defineProperty(obj, 'name' , { value: '码农权', writable: true, //是否可以修改 configurable: true, //是否可配置，是否可阅读全文

posted @ 2022-01-04 23:46 HuangBingQuan 阅读(33) 评论(0) 推荐(0) 编辑

数据代理

摘要：数据代理：定义：通过一个对象代理另一个对象中属性的操作（读写）假设有A B两个对象，我们操作B来修改A这时候 B对象就是代理 Vue的数据双向绑定底层其实没那么复杂面试官也会常常问到数据双向绑定的原理本质上Vue实例代理data对象属性的操作，也就是实例做了一层数据代理什么是数据代理，比如有阅读全文

posted @ 2022-01-04 23:24 HuangBingQuan 阅读(265) 评论(0) 推荐(0) 编辑

计算属性computed与监视属性watch之间的区别

摘要： computed和watch之间的区别： 1、computed能完成的功能，watch都可以完成。 2、watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。阅读全文

posted @ 2022-01-04 21:15 HuangBingQuan 阅读(51) 评论(0) 推荐(0) 编辑

监视属性watch与深度监视

摘要：监视属性watch总结： 1、当被监视的属性变化时，回调函数自动调用，进行相关操作。 2、监视的属性必须存在，才能进行监视 3、监视的两种写法 new Vue时传入watch配置通过vm.$watch监视深度监视总结 1、Vue中的watch默认不监测对象内部值的改变（一层）。 2、配置deep 阅读全文

posted @ 2022-01-04 20:43 HuangBingQuan 阅读(124) 评论(0) 推荐(0) 编辑

键盘事件

摘要： 1、Vue中常用的按键别名： 1.1、回车 => enter 1.2、删除 => delete（捕获“删除”和“退格”键） 1.3、退出 => esc 1.4、空格 => space 1.5、换行 => tab（特殊，必须配合keydown使用） 1.6、上 => up 1.7、下 => down 阅读全文

posted @ 2022-01-04 00:30 HuangBingQuan 阅读(47) 评论(0) 推荐(0) 编辑

2022年1月3日

事件修饰符

摘要： Vue中的事件修饰符 1、prevent：阻止默认行为。 2、stop：阻止事件冒泡 3、once：事件只触发一次 4、capture：使用事件的捕获模式 5、self：只有event.target是当前操作的元素是才触发事件 6、passive：事件的默认行为立即执行，无需等待事件回调执行完毕例阅读全文

posted @ 2022-01-03 23:34 HuangBingQuan 阅读(83) 评论(0) 推荐(0) 编辑

事件的基本使用

摘要：事件的基本使用 1、使用v-on：xxx 或 @xxx 绑定事件，其中xxx是事件名。 2、事件的回调需要配置在methods对象中，最终会挂到vue实例上 3、methdos中配置的函数，不要使用箭头函数！否则this就不是vue实例了 4、methods中配置的函数，都是被vue所管理的函数，t 阅读全文

posted @ 2022-01-03 22:33 HuangBingQuan 阅读(58) 评论(0) 推荐(0) 编辑

什么是BFC？BFC是什么？为什么会有BFC

摘要：块级格式化上下文（Block Formatting Context）简称BFC BFC的目的就是：形成一个完全独立的空间，让空间中的子元素不会影响到外面的布局。如何才能形成这样一个神奇的空间呢？我们通过CSS为元素设置一些属性，就能触发，常用的有四种： float不为none postion不为r 阅读全文

posted @ 2022-01-03 14:19 HuangBingQuan 阅读(353) 评论(0) 推荐(0) 编辑

2022年1月2日

JavaScript懒加载

摘要：方法一通过浏览器提供的InterSectionObserver构造函数，来观察目标与视口是否有交叉，来决定是否让img有src。使用方法： 1、new 一下并传入一个回调（当滚动会触发这个回调并会传入观察目标的信息，例如是否交叉、目标源） 2、设置观察目标 // entrys 是一个数组关于阅读全文

posted @ 2022-01-02 23:54 HuangBingQuan 阅读(77) 评论(0) 推荐(0) 编辑

扩展知识

摘要：配置公钥可以免密推送，操作如下 1、生成公钥：ssh-keygen -t rsa 2、复制公钥，添加到设置中 3、clone ssh协议的链接阅读全文

posted @ 2022-01-02 15:06 HuangBingQuan 阅读(39) 评论(0) 推荐(0) 编辑

2022年1月1日

flex布局

摘要：子项目剩余分配详细总结阅读全文

posted @ 2022-01-01 23:06 HuangBingQuan 阅读(31) 评论(0) 推荐(0) 编辑

git分支管理

摘要：分支管理的作用为什么要有分支 1、某某项目正式发布 2、某某项目开发某个模块，不可以在master分支直接开发 3、发布版本在master分支，开发版本在develop分支。这样开发过程就不会给正式项目引入新BUG 分支管理常用命令 git branch 查看分支 git branch devel 阅读全文

posted @ 2022-01-01 18:26 HuangBingQuan 阅读(36) 评论(0) 推荐(0) 编辑

git的常用命令

摘要：版本库的状态本地操作 git status 查看状态 git add 工作区（编辑区）添加到暂存区 git commit -m "备注说明" 暂存区提交到分支同步远程版本库 git clone url：将远程仓库克隆到本地（在本地没有版本库的情况下执行） git push origin mas 阅读全文

posted @ 2022-01-01 02:36 HuangBingQuan 阅读(17) 评论(0) 推荐(0) 编辑

Superman02

公告