旘鸢-CSDN博客

vue中的.sync修饰符在Vue中，子父组件最常用的通信方式就是通过props进行数据传递，props值只能在父组件中更新并传递给子组件，在子组件内部，是不允许改变传递进来的props值，这样做是为了保证数据单向流通。但有时候，我们会遇到一些场景，需要在子组件内部改变props属性值并更新到父组件中，这时就需要用到.sync修饰符。在下面demo中，通过定义一个Child子组件并设置name属性来显示一句欢迎语，当点击按钮时，通过在父组件中来改变name属性的值；当点击欢迎语时，则通过在Child子

2022-03-17 12:49:31 202

原创对 Vue 数据响应式的理解

数据响应式概念响应式即对外界的变化做出的反应的一种形式。const vm = new Vue({data:{n: 0}})当修改 vm.n 或 data.n 时，render(data…) 中的 n 就会做出响应的响应。这个联动的过程就是 vue 的数据响应式。vue 目前通过 Object.defineProperty 来实现数据响应式vm相当于data的代理Vue响应式方法Object.defineProperty可以给对象添加属性value可以给对象添加getter/set

2022-03-14 13:28:02 239 1

原创 Vue 两个版本的区别和使用方法

两个版本对应的文件名就是vue的完整版和非完整版vue.jsvue.runtime.js建议去用BootCDN的BootCDN的网站链接区别template 和 render 怎么用vue完整版template的使用，直接写到html里面，或者javascript里面<template> <div id="app"> {{n}} <button @click="add">+1</button> </div&

2022-03-02 20:17:49 461

原创浅析 MVC

一、MVC介绍MVC是一种机构设计模式，主要分为三部分，分别为：M（model）、V（view）和C（controller）二、MVC 三个对象分别做什么，给出伪代码示例 M（model）主要用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法，会有一个或多个视图监听模型。一旦模型的数据发生改变，模型将通知有关的视图。二、MVC 三个对象分别做什么，给出伪代码示例Model的样例：const m = { data:{ 程序所需要的数据 }, create(){ 增加数据

2021-11-08 06:16:20 218

原创说说你对前端的理解

大多数人对前端的认识可能是写点简单的 HTML，CSS 样式，制作点网页界面，其实不然。2005 年之前，前端开发这个词还是很少见的，尤其在国内。但近几年的前端可谓是飞速发展，在没有前端岗位之前，一个项目中负责后台功能逻辑处理的代码和前端页面展示代码混在一起，不免会给开发和维护带来各种问题，渐渐的许多大中小公司开始把前后端的界限分的越来越明确，前端工程师只管前端的事情，后端工程师只管后端的事情。前端工程师的主要工作就是通过代码方式，增强系统的交互功能，同时结合后台开发技术，进行互联网的 Web 和 A

2021-09-23 18:49:16 3475

原创说说跨域

1.什么是跨域？跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。1.1关于跨域的几个问题?为什么a.wang.com访问wang.com也算跨域？因为历史上，出现过不同的公司共用域名，a.wang.com和wang.com不一定是同一个网站，浏览器谨慎起见，认为这是不同的源。为什么不同端口也算跨域？原因同上，一个端口一个公司的情况也不是没有的。记住：安全链条的强度取决于最弱的一环，所有和安全相关的问题都要谨慎对待。为什么两

2021-09-23 18:47:22 81

原创你对 Promise 的了解？

1.Promise 的用途Promise 是异步编程的一种解决方案，所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。2.如何创建一个 new Promiseconst promise = new Promise(function(resolve, reject) { // ... some code

2021-09-23 18:24:44 46

原创数组排序

给出正整数数组 array = [2,1,5,3,8,4,9,5]请写出一个函数 sort，使得 sort(array) 得到从小到大排好序的数组 [1,2,3,4,5,5,8,9]新的数组可以是在 array 自身上改的，也可以是完全新开辟的内存。不得使用 JS 内置的 sort APIlet minIndex = (numbers) => { let index = 0; for (let i = 0; i < numbers.length; i++) {

2021-09-23 18:15:41 154

原创你如何理解 JS 的继承？

一.基于原型链的继承基本原理是：将父类的实例赋值给子类的原型。 // 父类 function Staff() { this.company = 'tianchuang'; this.list = []; } // 父类的原型 Staff.prototype.getComName = function() { return this.company; };// 子类 function Coder(name, skill) { this.name

2021-09-23 18:12:07 87

原创 DOM 事件相关

什么是事件委托？怎么阻止默认动作？怎么阻止事件冒泡？1.什么是事件委托？事件委托也称之为事件代理（Event Delegation）。是JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。举例：比如一个宿舍的同学同时快递到了，一种方法就是他们一个个去领取，还有一种方法就是把这件事情委托给宿舍长，让一个人出去拿好所有快递，然后再根据收件人一一分发给每个宿舍同学； .

2021-09-23 18:07:47 90

原创著名面试题：如何实现数组去重？

著名面试题：如何实现数组去重？假设有数组 array = [1,5,2,3,4,2,3,1,3,4]你要写一个函数 unique，使得unique(array) 的值为 [1,5,2,3,4]也就是把重复的值都去掉，只保留不重复的值。方法一不使用 Set，借鉴计数排序的原理unique = (array) => {const hash = []for(let i=0;i<array.length; i++){hash[array[i]] = true}const res

2021-09-23 17:55:33 164

原创请说出至少 10 个 HTTP 状态码，并描述各状态码的意义。

状态码400 表示客户端请求的语法错误，服务器无法理解状态码401 表示请求要求用户的身份认证状态码402 表示保留，将来使用状态码403 表示服务器理解请求客户端的请求，但是拒绝执行此请求状态码404 表示服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面状态码405 表示客户端请求中的方法被禁止状态码406 表示服务器无法根据客户端请求的内容特性完成请求状态码407 表示请求要求代理的身份认证，与401类似，但请求者应当使用代.

2021-09-23 17:50:50 680

原创 call、apply、bind的用法分别是什么？

call：call 是函数的正常调用方式，并指定上下文 this。apply：apply 的作用和 call 一样，只是在调用的时候，传参数的方式不同。区别是 apply 接受的是数组参数，call 接受的是连续参数。如下代码：function add(x,y){ return x+y;}add.call(add, 1, 2); //3add.apply(add, [1, 2]); //3bind：bind 接受的参数跟 call 一致，只是 bind 不会立即调用，它会生成一个新的函

2021-09-23 17:49:16 89

原创什么是闭包？闭包的用途是什么？闭包的缺点是什么？

什么是闭包？闭包的用途是什么？闭包的缺点是什么？1.什么是闭包理解闭包，首先必须理解变量作用域。JavaScript 有两种作用域：全局作用域和函数作用域。函数内部可以直接读取全局变量。下面代码中，函数f1可以读取全局变量n。var n = 111;function f1() { console.log(n);}f1() //111函数f1内部声明的变量n，函数外是无法读取的。如果出于种种原因，需要得到函数内的局部变量。只有通过变通方法才能实现。那就是在函数的内部，再定义一个函数。

2021-09-23 17:47:09 166

原创简述 DOM 事件模型或 DOM 事件机

DOM 事件模型DOM 的事件操作（监听和触发），都定义在EventTarget接口。所有节点对象都部署了这个接口，其他一些需要事件通信的浏览器内置对象（比如，XMLHttpRequest、AudioNode、AudioContext）也部署了这个接口。该接口主要提供三个实例方法：addEventListener：绑定事件的监听函数removeEventListener：移除事件的监听函数dispatchEvent：触发事件事件模型一个事件发生后，会在子元素及父元素之间进行传播（propa

2021-09-13 14:19:17 270

原创 jQuery设计思想

JQuery是目前使用最广泛、使用时间最久的函数库。据统计，全世界排名前100万的网站中，有83.7%的网站都在使用JQuery。对于一个前端开发者来说，学习JQuery是十分必要的，我们可以通过学习JQuery深入了解到它的设计思想和设计模式。为我们学习其他更复杂的库打下基础。JQuery虽然入门容易，但是想完全掌握却并不轻松，所以我写下这篇文章试图理清在学习JQuery时遇到的问题和设计思路jQuery 如何获取元素使用 jQuery 的第一步，往往是将一个选择表达式，放进构造函数 jQuery

2021-09-11 13:07:36 69

原创 JS 函数的执行时机

解释为什么如下代码会打印 6 个 6let i = 0for(i = 0; i<6; i++){ setTimeout(()=>{ console.log(i) },0)}执行结果如下：期待得到的结果是0、1、2、3、4、5 ，但最终得到的结果是6个6，原因如下：setTimeout延时器里面的代码不会立即执行，而是将代码放到等待队列中，因此队列中会有6个console.log(i)，等待区域内其他主程序执行完毕后再执行；for循环作为主程序，执行完之后i=6

2021-08-16 23:09:19 41

原创 JS 对象基本用法（Object）

JavaScript有七种数据类型，分别为number、string、symbol、bool、undefined、null和object，其中object是唯一一种复杂类型。object对象定义无序的数据集合键值对的集合声明对象的两种语法object可以被定义成无序的数据集合，也可以被定义成键值对的集合，下面是object的两种写法：下面是一种常用的简写方式，‘name’和‘age’是键（key），‘Alex’和‘18’是值（value）let obj ={'name':'Alex'

2021-08-10 16:53:50 1301

原创 JS 的基本语法

什么是表达式和语句表达式：产生一个值语句语句：执行一个操作表达式1+2 //值为3add(1,2) //表达式的值为函数的返回值console.log //表达式的值为函数本身console.log(3) //表达式的值为多少？ undefined语句var a = 1 //是一个语句二者区别：表达式一般都有值，语句有可能有也可能没有值。语句一般会改变环境（声明、赋值）标识符的规则规则第一个字符

2021-08-07 18:20:27 73

原创《JavaScript 的诞生》

JavaScript 的诞生JavaScript 的历史JavaScript 诞生记JavaScript 的设计缺陷为什么Javascript有设计缺陷？JavaScript 的10个设计缺陷JavaScript 的历史JavaScript（简称“JS”）诞生于1995年。布兰登 • 艾奇（Brendan Eich，1961年～），JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理

2021-08-01 23:33:59 296

hiahdnf的博客

原创手写Promise

原创手写AJAX

原创手写发布订阅

原创手写节流 throttle、防抖 debounce

原创 JS如何实现继承

原创常见七种方式实现垂直居中

原创 Vue 中的 .sync 修饰符有什么用