2020年03月_LuckXinXin

12月 11月 10月 09月 08月 07月 06月 05月 04月 03月 02月

原创 ie 和标准下有哪些兼容性的写法。

1）获取事件对象：var ev = ev || window.event2）获取页面的可视区的宽度：document.documentElement.clientWidth || document.body.clientWidth3）获取触发事件的事件源：var target = ev.srcElement||ev.target...

2020-03-31 23:13:50 1257

原创 HTML5 为什么只需要写 !DOCTYPE HTML

答：HTML5 不基于 SGML（其中，SGML—standard general markup language是标准通用标记语言,简单的说，就是比HTML,XML更老的标准，这两者都是由SGML发展而来的），因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）而HTML4.01、XML基于SGML所以需要对DTD进行引用，才能告知浏览器...

2020-03-31 15:50:11 794

原创 XHTML、HTML、XML的异同？

答：XHTML-Extensible Hypertext Markup Language：可扩展超文本标记语言，以 XML 应用的方式定义的 HTML，更严格更纯净的 HTML 版本HTML-Hypertext Markup Language：超文本标记语言，用来显示数据，即用标记标签来描述网页的一种语言XML-Extensible Markup Language：可扩展标记语言，用来传输和...

2020-03-31 13:10:55 211

原创浏览器标准模式（Standards Mode）和怪异模式（Quirks Mode）的区别是什么？

标准模式页面会按照HTML，CSS的定义渲染，而在怪异模式就是浏览器为了兼容很早之前针对旧版本浏览器设计，并未严格遵循W3C标准而产生的一种页面渲染模式。浏览器基于页面中文件类型描述去渲染，如果存在一个完整的DOCTYPE则浏览器将会采用标准模式，如果缺失就会采用怪异模式在Netscape Navigator和Microsoft Internet Explorer为数不多的浏览器盛行时，他们对网...

2020-03-31 09:10:21 656

原创一个满屏品字布局如何设计？简单的思路。

需要用到技术元素水平居中对齐使用margin对齐(推荐)使用left：50%使用text-align：行内元素居中对齐，给父元素设置text-align： center元素对相对窗口定位使用filxed（推荐）：总是根据浏览器的窗口来进行元素的定位使用absolute定位使用html和body的width和height填?这个窗口元素左右...

2020-03-30 21:57:05 276

原创 cssSprite是什么？有什么优缺点？

1）css sprite（雪碧图）的定义CSS Sprites是一种网页图片应用处理方式，就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位。2）优点a) 减少网页的http请求，提高页面的加载速度b) 减少图片的字节：多张图片合并成1...

2020-03-30 10:10:22 3025

原创前端面试题。

在node.js应用中，以下哪个语句可以正确获得http模块？答：var http = package（‘http’）。node中的那个模块被用来创建web server？答：URL模块。下面那个JavaScript库不支持promise规范？答：Q(Q.js)。使用ajax是首先需要创建什么对象？答：XMLHttpRequest。对于一个基本有序的序列，想让其全部有序，同时相求...

2020-03-30 09:23:40 226

原创 vue-cli如何新增自定义指令？

答:1.创建局部指令var app = new Vue({ el: '#app', data: { }, // 创建指令(可以多个) directives: { // 指令名称 dir1: { inserted(el) { // 指令中第一个参数是当前使用指令...

2020-03-30 08:39:53 1137

原创一句话就能回答Vue面试题。

答：1.css只在当前组件起作用答：在style标签中写入scoped即可例如：2.v-if 和 v-show 区别答：v-if按照条件是否渲染，v-show是display的block或none；3.和router的区别答：是路由信息对象，包括，，，，，，等路由信息参数。而router是“路由实例”对象包括了路由的跳转方法，钩子函数等。4.vue.js的两个核心是什么？答：数据...

2020-03-29 14:43:40 312

原创 Vue的路由实现：hash模式和 history模式？

答：hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取；特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，...

2020-03-29 12:42:08 107

原创 vue路由的钩子函数?

答：首页可以控制导航跳转，beforeEach，afterEach等，一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。beforeEach主要有3个参数to，from，next：to：route即将进入的目标路由对象，from：route当前导航正要离开的路由next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制...

2020-03-29 11:53:30 265

原创 Vue实现数据双向绑定的原理：Object.defineProperty（）？

答：vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 gett...

2020-03-28 20:39:42 228

原创 ES6 扩展运算符三个点（...）。

export default withRouter((props) => <DigitalMuseum {...props} />);1 含义扩展运算符（ spread ）是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。1. console.log(...[1, 2, 3]) 2. // 1 2 3 3. console...

2020-03-28 19:45:27 354

原创 Vue的生命周期？

答：beforeCreate（创建前）在数据观测和初始化事件还未开始created（创建后）完成数据观测，属性和方法的运算，初始化事件，el属性还没有显示出来beforeMount（载入前）在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。mounted（载入后）在el被新创建...

2020-03-28 09:20:02 91

原创 Vue组件间的参数传递？

答：1.父组件与子组件传值父组件传给子组件：子组件通过props方法接受数据;子组件传给父组件：$emit方法传递参数2.非父子组件间的数据传递，兄弟组件传值eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适。...

2020-03-27 14:32:19 308

原创 Vue与Angular以及React的区别？

答:1.与AngularJS的区别相同点：都支持指令：内置指令和自定义指令；都支持过滤器：内置过滤器和自定义过滤器；都支持双向数据绑定；都不支持低端浏览器。不同点：AngularJS的学习成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比较简单、直观；在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢；Vue.js使...

2020-03-27 09:10:21 482

原创看下列JavaScript代码,输出什么？解释==与===。

var undefined;undefined == null; // true1 == true; // true2 == true; // false0 == false; // true0 == ''; // trueNaN == NaN; // false[] == false; // true[] == ![]; // trueundefin...

2020-03-27 02:49:52 508

原创 vue如何自定义一个过滤器？

答：html代码：<div id="app"> <input type="text" v-model="msg" /> {{msg| capitalize }}</div>JS代码：var vm=new Vue({ el:"#app", data:{ msg:'' }, filte...

2020-03-26 17:49:33 751

原创对于MVVM的理解？

答:MVVM 是 Model-View-ViewModel 的缩写。Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。View 代表UI 组件，它负责将数据模型转化成UI 展现出来。ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。在MVVM架构下，View 和 Mod...

2020-03-26 09:27:27 124

原创对于即将到来的 vue3.0 特性你有什么了解的吗？

答：它对于：（1）监测机制的改变3.0 将带来基于代理 Proxy 的 observer 实现，提供全语言覆盖的反应性跟踪。这消除了 Vue 2 当中基于 Object.defineProperty 的实现所存在的很多限制：• 只能监测属性，不能监测对象• 检测属性的添加和删除；• 检测数组索引和长度的变更；• 支持 Map、Set、WeakMap 和 WeakSet。新的 obs...

2020-03-26 09:05:53 390

原创 Vue 中的 key 有什么作用？

答：首先，key 是为 Vue 中的标记，通过这个它，diff 操作可以更准确、更快速。Vue 的 diff 过程可以概括为：oldCh 和 newCh 各有两个头尾的变量 oldStartIndex、oldEndIndex 和 newStartIndex、newEndIndex，它们的新节点和旧节点会进行两两对比，即一共有4种比较方式：newStartIndex 和oldStartInde...

2020-03-25 14:23:17 779

原创你对 Vue 项目进行哪些优化？

答：第一个方面：代码层面的优化• v-if 和 v-show 区分使用场景• computed 和 watch 区分使用场景• v-for 遍历必须为 item 添加 key，且避免同时使用 v-if• 长列表性能优化• 事件的销毁• 图片资源懒加载• 路由懒加载• 第三方插件的按需引入• 优化无限列表性能• 服务端渲染 SSR or 预渲染第二个方面：Webpack 层面...

2020-03-25 14:22:43 1338

原创 Vue 怎么用 vm.$set() 解决对象新增属性不能响应的问题？

答：首先，因为Vue 无法检测到对象属性的添加或删除，所以Vue 提供了 Vue.set (object, propertyName, value)来实现为对象添加响应式属性其次，我认为vm.$set 的实现原理针对目标的种类不同分为两个方面：第一方面：如果目标是数组，直接使用数组的 splice 方法触发响应式；第二方面：如果目标是对象，会先判读属性是否存在、对象是否是响应式，最终如果要...

2020-03-25 09:21:17 885

原创 Vue 组件间通信有哪几种方式？

答：Vue 组件间通信只要指以下 3 类通信：父子组件通信、隔代组件通信、兄弟组件通信，下面我们分别介绍每种通信方式且会说明此种方法可适用于哪类组件间通信。（1）props / $emit 适用父子组件通信这种方法是 Vue 组件的基础，相信大部分同学耳闻能详，所以此处就不举例展开介绍。（2）ref 与 $parent / $children 适用父子组件通信• ref：如果在普通的...

2020-03-24 12:16:09 662

原创 Vue中v-model 的原理？

答:v-model 指令主要用在表单元素上实现数据双向绑定的。例如给：input、textarea、select 等创建双向数据绑定，本质上不过是语法糖，其实v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：• text 和 textarea 元素使用 value 属性和 input 事件；• checkbox 和 radio 使用 checked 属性和 change...

2020-03-24 09:25:10 149

原创 Vue中组件中 data 为什么是一个函数？

答：如果不用函数，所有复用的组件数据会共享，这样数据互相影响。因为data是引用类型，如果不用函数，所有组件的data会指向同一块内存区域，导致数据之间互相影响。而使用函数时，每次实例化组件时，调用函数时，return一个新的data对象。这样每个实例可以维护一份被返回对象的独立的拷贝，组件实例之间的 data 属性值不会互相影响。...

2020-03-24 08:57:35 115

原创 Vue中谈谈你对 keep-alive 的了解？

答;keep-alive 可以缓存其它组件及其的组件的状态，避免了组件的频繁创建和销毁。它有三个特性：1.用于缓存组件，一般结合路由和动态组件一起使用。2.提供 include 和 exclude 属性。两者都支持字符串或正则表达式， include 表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存，其中 exclude 的优先级比 include 高；...

2020-03-23 09:07:12 438

原创 Vue中父组件可以监听到子组件的生命周期吗？

答：可以。有两种方法：1.在父组件中定义一个事件，在子组件中用$emit去触发。2.父组件引用子组件时，给父组件添加@hook 来监听。其它的生命周期事件，例如：created，updated 等都可以监听。...

2020-03-23 08:51:22 1064

原创 Vue中在什么阶段才能访问操作DOM？

答：在 mounted 中可以访问操作 DOM。因为在钩子函数 mounted 被调用前，Vue 已经将编译好的模板挂载到页面上。

2020-03-23 08:35:08 3131

原创 Vue中在哪个生命周期内调用异步请求？

答：一般来说，可以在，created，mounted中都可以发送数据请求，但是，大部分时候，会在created发送请求。Created的使用场景：如果页面首次渲染的就来自后端数据。因为，此时data已经挂载到vue实例了。在 created（如果希望首次选的数据来自于后端，就在此处发请求）（只发了异步请求，渲染是在后端响应之后才进行的）、beforeMount、mounted（在mounte...

2020-03-22 22:10:25 4323

原创 Vue 的父组件和子组件生命周期钩子函数执行顺序？

答：Vue 的父子组件钩子函数的执行顺序可以归类为4个部分：第一部分：首次加载渲染父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted第二部分：子组件更新父 be...

2020-03-22 10:43:08 729

原创谈谈你对 Vue 生命周期的理解？

答：（1）生命周期是什么？Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。（2）各个生命周期的作用...

2020-03-22 10:26:02 375

原创直接给一个数组项赋值，Vue 能检测到变化吗？

答：不能，用索引直接设置一个数组项时或者当你修改数组的长度时，Vue 不能检测到数组的变动。也就是：vm.items[indexOfItem] = newValue和vm.items.length = newLength，这是由于 JavaScript 的限制，为了解决他们，Vue 也提供了操作方法：Vue.setvm.$set（Vue.set的一个别名）Array.prototy...

2020-03-22 10:13:05 2786 1

原创 Vue中computed 和 watch 的区别和运用的场景？

答：首先，computed 和 watch都可以添加实现监听。其次，我去从他们的本质和运用场景区分一下他们。第一个方面就是从本质来说：computed：它是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值，它可以设置getter和setter.watch：更多的是「观察」...

2020-03-21 13:52:00 1056

原创怎样理解 Vue 的单向数据流？

答：首先，单项数据流是发生在父子组件传值的时候，所有的 prop 使得其父子 prop 之间形成了一个单向下行绑定。也就是：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态。而且，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。所以，在一个子组件内部改变 prop，Vue 会在浏览器的控制台中发出警告。子组件想修改...

2020-03-21 12:55:51 1370

原创 Vue中Class 与 Style 如何动态绑定？

答：Class 可以通过对象语法和数组语法进行动态绑定。Style 也可以通过对象语法和数组语法进行动态绑定。

2020-03-21 12:32:52 389

原创 Vue中v-show 与 v-if 有什么区别？

答：共同点：v-show 与 v-if都能控制dom元素的显示与隐藏。不同点：v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 “display”...

2020-03-20 14:30:57 104

原创 get和post的区别有哪些，何时使用post？

get 是从服务器上获取数据，post 是向服务器传送数据。 get 请求返回 request - URI 所指出的任意信息。get 是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址，用户看不到这个过...

2020-03-20 08:38:48 210

原创简述JavaScript中的事件代理是怎样实现的？

答：在元素的父节点注册事件，通过事件冒牌，在父节点捕获事件。

2020-03-19 22:33:04 169

原创说说你对 SPA 单页面的理解，它的优缺点分别是什么？

答：首先：SPA的英文是single-page application ，整个项目中只有一个页面。其次，单页面的实现思路：就是在 Web 页面初始化时加载所有的 HTML、JavaScript 和 CSS，页面的内容的变化，靠动态创建dom。也就是一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新请求（加载）或跳转；取而代之的是利用路由机制实现 HTML 内容的动态变换，UI 与用户...

2020-03-19 14:31:25 2431