04 2020 档案
摘要：1、静态资源的优化 主要是减少静态资源的加载时间，主要包括html、js、css和图片。 a、减少http请求数：合并js、css、制作雪碧图以及使用http缓存； b、减小资源的大小：压缩文件、压缩图片，小图使用base64编码等； c、异步组件和图片懒加载； d、CDN加速和缓存（bootCND
阅读全文
摘要：es6是ECMAScript的第六次修订，于2015年完成，也叫ES2015。 特点：语法上更加简洁，提高开发效率。 一、箭头函数 （当要求动态上下文的时候就不能够用箭头函数） 特点： 1、箭头函数中，this的指向是定义时所在的作用域对象，而非运行时； 2、不能够用作构造函数，即不能使用new命令
阅读全文
摘要：1、xss（跨站脚本攻击）：富文本、评论 利用站点开放的文本编辑并发布的功能，输入并执行js脚本，窃取cookie等敏感信息。 预防方法： 方法一：cookie添加httpOnly属性，这是使用js是不能读取和操作cookie的。 方法二：在cookie中添加校验信息。 方法三：对用户输入进行编码（
阅读全文
摘要：一、同源策略 1、定义： 同源策略即协议、域名、端口都要相同。不同源的客户端脚本在没有授权的情况下，不能读取对方的资源。 2、目的： 保证用户信息安全，防止恶意网站窃取数据。 3、哪些行为受同源限制： cookie、webStorage、indexDB DOM、iframe对象无法读取 ajax不能
阅读全文
摘要：1、get参数拼接在url上，post则放在body中，post相对上比get安全一些； 2、get请求参数会被保存在浏览器历史记录里，而post不会；（为了防止CSRF攻击，很多公司把get统一改成了post） 3、get请求会被浏览器缓存，post不会； 3、通常浏览器和服务器会限制url的长度
阅读全文
摘要：一、https的连接方式 1、客户使用https的url访问web服务器，要求建立ssl连接； 2、服务器收到请求，将网站的证书信息（包含公钥）发送一份给客户端； 3、客户端与服务端协商信息的加密等级，建立会话秘钥，并用公钥加密，传送给服务器 4、服务器用自己的私钥解密会话秘钥，并用会话秘钥加密数据
阅读全文
摘要：一、tcp/ip协议 (tcp协议和ip协议是众多协议中最重要的，所以用这两者命名) tcp/ip协议包含了互联网基础的网络协议，特点是分层管理： 应用层：http协议（超文本传输）、ftp协议（文件传输）、dns协议（域名系统）； 传输层：tcp协议（建立连接、超时重传、发送和接收方确认）、udp
阅读全文
摘要：两者都是前端构建工具。 gulp 是基于任务和流的，找到一个或一类的文件，对其进行一系列链式操作，整个链式操作构成一个任务，多个任务构成web整个构建流程。 webpack 是基于入口的，自动地递归解析所有依赖的资源文件，用不同的loader来处理不同的文件，用plugin来扩展webpack的功能
阅读全文
摘要：wbpack是一个静态模块打包器，它将项目当做一个整体，通过一个指定的入口文件（main.js），找到项目所有依赖的相关文件，并通过loader处理他们，最终打包成一个多或多个浏览器可识别的js文件。 webpack.config.js的配置 let webpack=require('webpack
阅读全文
摘要：混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。 相当于扩充父组件的属性、方法等，类似于在原型对象中注册方法。 如果在引用mixins的同时，在组件中重复定义相同的方法，则mixins中的方法会被覆盖 <div id="app"> <child></child> <ki
阅读全文
摘要：children:[] <template> <div class="navbar"> <ul id="main"> <li><router-link to="/food" >商品</router-link></li> <li><router-link to="/rating">评价</router
阅读全文
摘要：作用：拦截导航，完成跳转或取消。 三种方式： 1、全局导航钩子 2、单个路由独享 3、组件内导航钩子 1、全局导航钩子： //全局前置守卫 var router=new VueRouter({...}); router.beforeEach((to,from,next)=>{ //to 目标ro
阅读全文
摘要：作用：提高首屏加载速度，解决白屏问题，提高用户体验。 定义：懒加载即按需加载，在需要的时候才会加载。 方式： 1.vue异步组件 2.es6的import() 3.webpack的require.ensure() 1.vue异步组件 特点：一个组件会生成一个js文件 { path:'/home',
阅读全文
摘要：1、区别： this.$router是全局路由器对象 this.$route是当前激活的路由对象，包含了当前的路由信息。 console.log(this.$route); { fullPath:'/home' //包含查询参数和 hash 的完整路径 path:'', //当前路由路径，绝对路径
阅读全文
摘要：1、params（相当于post） （1）只能用name，不能用path （2）参数不显示在路径上 （3）刷新页面参数会被清空 传递参数： this.$router.push({ name:'details', params:{ number:123, name:'product'
阅读全文
摘要：定义： { path:'/details/:id' name:'Details', component:Details } 获取传参： console.log(this.$route.params.id)
阅读全文
摘要：<router-link :to='' class='active-class'> //路由声明式跳转 ，active-class是标签被点击时的样式 <router-view> //渲染路由的容器 <keep-alive> //缓存组件
阅读全文
摘要：路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资源，请求不同的页面是路由的其中一种功能。 vue-router是vue.js官方路由管理器。vue的单页应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。（传统页面切换是用超链接a标签进行切换） #####
阅读全文
摘要：主要是执行install方法，用来进行全局注册，如果注册过了不会重新注册。 vue.use()往全局注入一个插件，供全局真接使用, 不需要单独引用。
阅读全文
摘要：1、什么是插槽？ 父组件所携带的内容插入到子组件的某个位置。插槽是vue实现内容分发的一套api，通过slot标签作为分发内容的出口。 插槽显示不显示以及显示什么，由父组件决定，插槽显示在哪里，由子组件决定。 作用： 使模块分块，更具模块化和重用性。 2、用法： 默认插槽： 父组件： <templa
阅读全文
摘要：1、父组件=>子组件 props 2、子组件=>父组件 .$emit() .$on() 3、兄弟组件：event-bus const bus=new Vue(); Vue.prototype.$bus=bus; 4、vuex 5、跨级组件：provide/inject 6、ref /$parent
阅读全文
摘要：1.vuex是什么 vuex是vue.js的一种状态管理的模式，它通过全局注入store对象，来实现组件间的数据共享。适用于复杂的数据处理，如深层级组件的通信。 2.vuex的五个属性： state，mutation，action，getter，module state:（相当于vue中的data）
阅读全文
摘要：vue.js采用数据劫持结合发布-订阅者模式，通过Object.defineProperty()来劫持（重新定义）data中各个属性的setter、getter,在数据变动时，发布消息给订阅者，触发相应的监听回调。 （setter和getter是对象的存储器属性，是一个函数，用来获取和设置值） <!
阅读全文
摘要：1、我们在不同地方使用同一个组件时，容易产生数据相互干扰。 2、函数可以产生新的作用域，避免变量污染。
阅读全文
摘要：const app=new Vue({ el:'#root', template:'', data:{}, beforeCreate(){ //events、data已经初始化，但是没有绑定响应属性 }, created(){ //data已经绑定响应属性 }, beforeMount(){ //执
阅读全文
摘要：<button @click="addObjB"></button> data:{ obj:{ a:'' } } methods:{ addObjB(){ this.$set(this.obj,'b',111) } } Vue数组、对象改变视图不更新： 第一种情况： 基本数据类型和对象：实例化的时候
阅读全文
摘要：1.深度监控，监测所有属性的变化 watch:{ obj:{ handler(newVal,oldVal){ }, deep:true } } 2.监测某个属性的变化： watch:{ 'obj.a':{ handler(newVal,oldVal){ } }, '$route.path'(newV
阅读全文
摘要：1、定义 虚拟dom就是一个简单的对象，包含标签名（tag）、属性（attr）、子元素（children），通过js操作virtual DOM，最终映射到真实的dom上。 2、为什么要用虚拟dom： 频繁地操作dom，会造成页面的回流和重绘，增加性能开销，降低页面的渲染速度。 把dom的操作放到js
阅读全文
摘要：1、vue响应原理： vue.js采用数据劫持结合发布-订阅者模式，通过Object.defineProperty()来劫持data中各个属性的setter、getter,在数据变动时，发布消息给订阅者，触发响应的监听回调。 （setter和getter是对象的存储器属性，是一个函数，用来获取和设置
阅读全文
浙公网安备 33010602011771号