- 博客(77)
- 收藏
- 关注
原创 2面试题2.0
所以,用JS对象模拟DOM节点的好处是,页面的更新可以先全部反映在JS对象(虚拟DOM)上,操作内存中的JS对象的速度显然要更快,等更新完成后,再将最终的JS对象映射成真实的DOM,交由浏览器去绘制。Promise.race()方法同样是将多个Promise实例包装成一个新的Promise实例,但是只要有一个Promise 实例状态发生变化,就将新的Promise实例的状态改变,且终值由第一个完成的 Promise提供。过渡是轻量级的动画,过渡中无需定义关键帧,它解决的问题是当属性改变的时候实行缓缓改变。
2024-03-22 15:58:12
663
原创 1面试题vue
数据变更,视图自动更新使用Object.defineProperty()方法来监听属性的变化,实现双向数据绑定。Object.defineProperty()方法可以控制对象的属性访问权限,实现响应式原理,当定义一个响应式属性时,Vue将使用Object.defineProperty()方法绑定该属性的getter和setter方法到一个观察者对象。当有任何对属性的更改时,它将触发setter方法,然后执行相应的更新操作。
2024-02-26 08:05:30
475
1
原创 Vue中子组件修改父组件传来的Prop值
vue中子组件不能直接修改父组件传来的prop值,Prop 是一种传递数据的机制,父组件通过 Prop 向子组件传递数据,子组件通过 Props 接收父组件传递过来的数据,这些数据被封装成一个个解构体形式的对象,不能直接进行修改。在 Vue 中,子组件可以通过 $emit() 方法来触发父组件中定义的事件。当父组件收到事件时,它可以调用一个方法来更新它自己的状态,传递给子组件一个新的 Prop。,即只有父组件能够更新 Prop,然后数据会自动流向子组件,从而避免了数据的混乱与不可预测性。
2023-08-15 17:56:29
3203
原创 Promise处理异步操作
Promise是一种在JavaScript中处理异步操作的技术。Promise对象表示一个尚未完成的异步操作,它可以在将来的某个时候产生结果。Promise对象的状态可以是未完成、已完成或已拒绝。当Promise对象处于未完成状态时,我们可以附加一个或多个处理程序,以便在Promise对象的状态发生变化时执行特定的操作。一旦创建了Promise对象,我们就可以使用then()方法附加处理程序。then()方法接受两个函数参数,第一个函数表示成功时要执行的操作,第二个函数表示失败时要执行的操作。
2023-08-15 11:33:27
278
原创 父组件监听子组件的生命周期
的事件用来监听子组件的事件,只不过事件名和钩子函数同名,当子组件发布时,即执行this.$emit('钩子函数created/mounted',参数)时,在父组件则可以监听到,然后执行回调,直接在父组件中,插入子组件的地方,使用@hook.声明周期函数名="函数名"即可。原理:就是父子组件通信的基础上(方法1),添加@hook,形成了对应生命周期函数的自动发布,方法1每次都是手动执行发布。推荐使用:更简单的方式可以在父组件引用子组件时通过 @hook 来监听生命周期。其实就是在父组件上封装了一个。
2023-05-31 10:39:55
452
原创 word-wrap: break-word和word-break: break-all的区别
word-wrap: break-word和word-break: break-all
2022-12-19 15:34:56
232
1
原创 js兼容性
选择器兼容性getElementsByClassName( IE9以及以上支持)querySelector/querySelectorAll (IE8以及以上支持)forEach遍历数组( IE9以及以上支持)兼容方法:for循环数组addEventListener绑定事件addEventListener( IE9以及以上支持)attachEvent (IE678支持),但是要注意它的事件名字参数要加on。兼容方法:绑定函数封装//绑定事件function ad...
2021-11-15 20:02:30
1388
原创 面试题01
watch和computed区别computed不支持异步,当computed内有异步操作时无效,无法监听数据变化;而watch支持异步
2021-11-10 19:59:00
479
原创 vue组件和框架
vue-router:实现SPA间“页面”之间的跳转axios:http工具,实现向API请求数据,以及拦截器的实现vuex:管理复杂的数据流向,状态机工具,特化的Flux
2021-11-01 16:20:05
100
原创 vue-打包
vue.config.jsmodule.exports = {//webpack的配置对象 publicPath: "./",//基本路径 outputDir:'dist',//打包文件输出的目录 assetsDir: "static",//放置生成的静态资源 (js、css、img、fonts)文件夹 的 (相对于 outputDir 的) 目录}webpack.config.js(不用脚手架)npm i -D @babel/core @babel/preset
2021-10-27 12:03:14
63
原创 跨域与跨域访问
跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。跨域的严格一点的定义是:只要 协议,域名,端口有任何一个的不同,就被当作是跨域
2021-10-27 09:05:16
182
原创 vue-状态管理(仓库)
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。 小型项目(不适用vuex) 中小型项目(store模式) 中大型项目 什么是“状态管理模式”状态自管理应用包含以下几个部分: state,驱动应.
2021-10-22 14:23:43
509
原创 vue-路由
路由用 Vue.js + Vue Router 创建单页应用,感觉很自然:使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 Vue Router 添加进来,我们需要做的是,将组件 (components) 映射到路由 (routes),然后告诉 Vue Router 在哪里渲染它们。起步我们来看一下脚手架的给我们大家的路由实例://导入创建路由对象方法和hash 模式路径方法import{createRouter,createWebHashHistory}...
2021-10-21 15:08:33
2482
原创 vue-混入
混入mixinMixin 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个 mixin 对象可以包含任意组件选项。当组件使用 mixin 对象时,所有 mixin 对象的选项将被“混合”进入该组件本身的选项。varobj={ data:function(){ return{ name:'zhangsan' } }}exportdefault{mixins:[obj]}选项合并...
2021-10-20 14:52:04
389
原创 JS中函数的参数是按值传递还是按引用传递
JS中基本类型是按值传递的,对象类型是按共享传递的var a = 1function add(x){ x=2; }add(a);console.log(a)//值不变 1var obj={ b:1,}function add1(obj){ obj.b = 2}add1(obj)console.log(obj.b)//被修改 2
2021-10-18 18:58:54
113
原创 vue-表单输入绑定、计算属性、侦听器
表单输入绑定:你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。
2021-10-18 18:44:40
568
原创 vue语法
模板语法1.插值文本数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值:<span>Message: {{ msg }}</span>双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用v-html指令<div v-html="h"></div>export default{data(){return{ h:'<h1> Hello World
2021-10-15 15:38:09
112
原创 css样式
overflow:当内容溢出元素框时发生的事情。值 描述 visible 默认值。内容不会被修剪,会呈现在元素框之外。 hidden 内容会被修剪,并且其余内容是不可见的。 scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。 ...
2021-10-14 19:26:13
40
原创 html居中布局的方法
如何将一个文本在块元素进行水平居中? text-align:center 如何将一个文本在块元素进行垂直居中? 1.line-height, 2.padding,不设高度,3. 使用display将元素模拟成表格 display:table-cell,vertical-align:middle vertical-align 属性设置元素的垂直对齐方式。 如何将一个块元素进行水平居中...
2021-10-14 19:20:07
640
原创 es6内容-类和方法
class类新的class写法只是让对象原型的写法更加清晰更像面向对象编程,通过class关键字,可以定义类。构造函数:constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加。实例属性和方法:定义在类体中的属性称为实例属性,定义在类体中的方法称为实例方法。不推荐在实例上定义方法,因为这样做方法会创建在实例上。原型属性和方法:原型属性和方法顾名思义就是在
2021-10-13 15:41:29
234
原创 ES6内容-解构与方法
函数功能新增1.函数的参数解构function add({a,b}){ console.log(a+b)}var obj ={a:1,b:2}add(obj)function add1([a=1,b=2]){ console.log(a+b)}add1([])//即使有默认值,最少也要传递解构,默认值可以被覆盖2.rest参数function add(a,...b){//将余下的实参保存在b中 console.log(b)//[2,3,4,5]返回
2021-10-12 16:59:26
109
原创 全局作用域和函数作用域
全局作用域有一个全局对象window,他代表浏览器窗口,创建的变量都会作为window对象的属性保存创建的函数都会作为window对象的方法保存
2021-10-10 23:40:06
76
原创 forEach
回调函数:一个函数被作为参数传递给另一个函数//注意到click方法中是一个函数而不是一个变量//它就是回调函数$("#btn_1").click(function() { alert("Btn 1 Clicked");}); //或者function click() { // 它就是回调函数 alert("Btn 1 Clicked");}$("#btn_1").click(click); var arr = ['李白','杜甫','蜜雪冰城','古茗','一
2021-10-09 22:09:06
72
原创 防抖与节流
防抖是将多次执行变为最后一次执行,节流是将多次执行变成每隔一段时间执行。防抖和节流的作用都是防止函数多次调用。区别在于,假设一个用户一直触发这个函数,且每次触发函数的间隔小于wait,防抖的情况下只会调用一次,而节流的 情况会每隔一定时间(参数wait)调用函数。应用场景:1.有些项目中,我们要使用到实时搜索,有些情况下,可能用户没有输完内容,就开始搜索了,这样体验不佳,我们就可以加上节流的方案2.当需要改变窗口大小,或者滚动条位置的获取,或者元素拖放时的位置获取时,一般我们只想要最后一次的
2021-10-08 18:44:14
312
原创 ES6简介
什么是ECMAscriptjavascript的组成:ECMAscript(ES6升级的部分)+dom+bomES6简介ES6,是ECMAScript6.0ES6主要为了解决ES5的先天不足,比如JavaScript里没有类的概念ES6做的改变语法方面 let ()=>{} ... 功能方面 数组扩展 对象扩展 字符串扩展 扩展方面 set/map symbol promise ... 模块化开发 ...
2021-10-08 14:42:49
178
原创 BS的用法
引入BS<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script><script src="https://c
2021-09-23 14:25:06
404
原创 H5API
语义标签 <nav>网站导航块 <section>表示页面中的一个内容块 <article>表示页面中的一块与上下文不相关的内容块 <aside>元素表示当前页面或文章的附属信息部分 <header>表示页面中一个标题区域 <footer>底部标签 <hgroup>用于页面中与标题区域组合 <figure>一段独立的流内容 &l
2021-09-18 14:32:33
109
原创 二进制 十进制转换
十进制转二进制num.toString(2) //返回字符串二进制转十进制parseIn(num,2) //返回整数parseInt(num,8); //八进制转十进制parseInt(num,16); //十六进制转十进制parseInt(num).toString(8) //十进制转八进制parseInt(num).toString(16) //十进制转十六进制parseInt(num,2).toString(8) //二进制转八进制parseInt(num
2021-09-17 19:08:29
63
原创 jQuery
一.核心1.查找dom$('div')2.将dom对象转化为jQuery对象var a1 = document.getElementById('a');$(a1);3.创建元素$(<div></div>).appendTo(a1);//追加到某个盒子底部属性 each$('ul li').each(function(i){ console.log(i); $(this).css('background','red');})//
2021-09-16 17:32:13
50
原创 AJAX的使用
HttpRequest标准的HttpRequest做出一个同步的调用,必须等待服务器端返回响应,然后对页面进行加载(一般会呈递一个新的页面)AJAX原理Ajax简单来说是通过XMLHttpRequest对象来向服务器发送异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。这其中最关键的一步就是页面的部分从服务器获得请求数据XMLHttpRequest浏览器在XMLHttpRequest类上定义了它们的HTTP API,这个类的每个实例都表示一个独立的请求/响应对
2021-09-15 19:09:31
75
原创 bom对象
BOM的核心对象是window,它表示浏览器的一个实例BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关。窗口位置window.screenLeftwindow.screenTop 返回窗口相对于屏幕的X和Y坐标window.pageXOffsetwindow.pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置document.documentElement.scrollTopdocument.documentElement...
2021-09-15 18:41:36
66
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人