
前端
txwsmsm7023_
做人要努力,做人要开心。
展开
-
ES6对象扩展
ES6简化了对象的定义属性定义简化,就是给对象定义一个属性名字,完后再对象外面给属性名字复制,这样的话变量本身级存储的就是属性值得值,很方便,是将属性值用属性名字吧值给引进来,感觉很省空间呀,var foo = "bar";var baz = { foo };baz; // { foo: "baz" }// 等价于var baz = { foo: foo };//值foo是标识ba...原创 2019-06-30 13:39:47 · 104 阅读 · 0 评论 -
ES6对象新增方法
Object.is():它用来比较两个值是否严格相等,和严格表达式(===)差不多,Object.is()弥补了ES5的==和===的缺点,弥补了===的NaN不等于自身,以及+0等于-0的缺点。==:会自动转换类型,是比较的值是否相等不在乎数据的类型是数字还是字符串,所及数据类型会自动转换 ===:是绝对等于,同时要比较数值和类型,但是他有一个缺点,就是NaN不等于其本身Object.as...原创 2019-06-30 15:23:15 · 141 阅读 · 0 评论 -
ES6的symbol
Javascript七种数据类型:undefined、null、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)、symbol。为了使对象属性名的值为独一无二的,引入symbol值类型,独一无二的值。Symbol 值通过Symbol函数生成。这就是说,对象的属性名现在可以有两种类型,一种是原来就有的字符串,另一种就是新增的 Symbol 类型。...原创 2019-06-30 16:35:54 · 81 阅读 · 0 评论 -
Es6的set类型
es6新增set类型数据结构,set和数组差不多只是内部元素的值是不可以重复的,但是成员的值都是唯一的,没有重复的值。创建语法:构造函数new Set():创建一个set类型的数据结构变量 add():向set对象中添加元素,会自动过滤重复变量 delete():清除指定的值,返回布尔性,true标识删除成功 has():判断一个值是否是set成员,true岱庙有该值 clear():清...原创 2019-06-30 17:20:40 · 223 阅读 · 0 评论 -
ES6的map类型
为了改善对象的属性名只能是字符串和symbol这个特性,方便让属性名的值为各种类型,所以就有了map类型,也是键值对形式存在的,类似对象,比对象更灵活map创建语法:new Map(): 参数可以是数组哦,进行下面的操作const items = [ ['name', '张三'], ['title', 'Author']];const map = new Map();i...原创 2019-06-30 17:51:24 · 293 阅读 · 0 评论 -
vuex的用法总结
什么是vuex:专门为Vue设计的一种状态管理模式,采用集中式存储管理应用的所有组件的状态,方便非父子的组件之间的通信,利用的是其state中存储的数据。 为什么需要有vuex:因为组件之间的通信很复杂,由于传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱,通常会导致代码无...原创 2019-07-15 17:03:47 · 267 阅读 · 0 评论 -
vue中结构
new vue({ el://用来获取要渲染的标签的ID data:{//英语存储对象数据} methods:{//用于创建对象的方法} watch:{用于事件监听data中的属性值得变化格式data中的变量:function(){}} computed:{计算属性必须有return值} filters:{} ...原创 2019-07-14 15:51:09 · 231 阅读 · 0 评论 -
vue-钩子函数理解
钩子(Hook)概念源于Windows的消息处理机制,通过设置钩子,应用程序对所有消息事件进行拦截,然后执行钩子函数。let btn = document.getElementById("btn");btn.onclick = () => { console.log("i'm a hook");}上面的例子,在按钮点击时候立即执行钩子函数。而看下面的例子:bt...原创 2019-07-13 23:37:43 · 245 阅读 · 0 评论 -
Vue--自定义指令
为什么会有自定义指令呢?因为Vue推崇不要直接的去操作DOM对象,所以我们需要将一些操作转化成指令的方式去绑定到元素的身上,实现对标签的操作 自定义指令也要以v-开头 全局指令自定义:Vue.directive(指令名称,对象类型)定义指令参数的名字的时候不需要加v-,但是调用的时候需要加v- 参数2是一个对象类型包含下面的这些方法 bind:function(el,binding){}...原创 2019-07-13 23:54:08 · 206 阅读 · 0 评论 -
Vue的生命周期
Vue生命周期:Vue从创建、运行,到销毁的过程总是伴随着各种事件,这些时间叫做生命周期 生命周期钩子=生命周期函数=生命周期事件 Vue生命周期分类 创建期间的生命周期函数:(下面是钩子函数)beforeCreate:实例刚在内存中创建出来还没有初始化data和methods属性 create:实例在内存创建好,data和methods已经初始化完成,但是还没有开始便以为模板 bef...原创 2019-07-14 00:24:38 · 106 阅读 · 0 评论 -
vue-resource和axios实现请求
vue-resource 首先要导入包 利用this.$http.方法名(get(),post()等),返回的是promise对象可以调用then get(url ,potion) post(url,body,option)option 中的{emulateJSON:true}设置表单提交类型 获取返回信息的属性body:获取服务器返回的信息axios 引入axios的包 impo...原创 2019-07-14 00:47:27 · 120 阅读 · 0 评论 -
vue--组件
组件:为了拆分Vue的代码量,以不同的组件来划分功能模块,将来我们需要什么样的功能就去调用什么样的组件 组件化:是从 UI界面进行划分的,方便组件重用 模块化:是从代码逻辑进行划分的 注意:组件的模板即template中的标签必须只有一个根元素 组件定义的三种方式:使用const com=Vue.extend({template:指定组件展示的HTML结构})创建组件模板对象,Vue.c...原创 2019-07-14 01:06:54 · 91 阅读 · 0 评论 -
vue如何获取dom的文本呢
Vue的原则是尽可能不要操作dom元素所以那么诶诶和获取元素内容呢,Vue提供了ref属性给dom文档元素定义ref='refname'属性其值随便起,只是为了下面映射 通过this.$refs.refname。innerText//此时获取到的是DOM的元素对象在调用innertext来获取内容...原创 2019-07-14 09:09:34 · 6404 阅读 · 0 评论 -
vue之路由
学习文档:https://router.vuejs.org/zh/ 前端路由:实现方式有两种:hash和history 下载安装路由cdn 用<script>引入下载的路由,会有一个路由的构造对象vueRounter,路径后面会增加#/ 作用:不同组件之前的切换用的 new vueRounter({ route:[//路由的的匹配规则]}),下面是route包含的对象属性:...原创 2019-07-14 11:49:28 · 102 阅读 · 0 评论 -
webpack
网页中会引入哪些常见的静态资源 js,css(.css,.less,scss),images(jpg,png,svg),字体文件(svg,ttf,eot,woff,woff2),模板文件(.ejs.vue)网页中引入静态资源有什么问题?网页加载速度慢,多次发起二次请求 要处理错综复杂的依赖关系webpack:是前端一个项目构建工具基于node开发出来的一个前端工具,是基于整个项...原创 2019-07-14 15:51:27 · 125 阅读 · 0 评论 -
webpack使用过程
什么是webpack:静态模块打包器(https://www.webpackjs.com/concepts/,https://blog.51cto.com/13258913/2155826)模块化、压缩打包工具干什么的代码变成1行 去除多余的空格和回车 去除多余的引号 可以编译其他自定义的"后缀名"操作安装形式全局安装:npm install webpack -g |npm ins...原创 2019-07-22 12:17:55 · 109 阅读 · 0 评论 -
nuxt路由中的params和query
定义路由路由表,配置的整个项目中可以访问的所有的路由信息建议每一个路由都加一个name属性,在页面跳转的时候使用建议name不能重复const router=new VueRouter({ routes:[ { path: '/detail', // 表示路径,表示url地址栏中输入的内容 component: Home...转载 2019-08-06 22:42:27 · 5121 阅读 · 1 评论 -
$mount("#app")Vue的手动挂在函数
出现的意义:其实$mount()函数和Vue的el功能是一样的,将组件挂载到DOM元素之上,不同的是挂载的时机是不一样的。 el:是在Vue的实例创建过程中的create()钩子函数中进行初始化的 $mount():是手动挂起,挂载的时机是在及调用他的时候触发的 参数形式:一种是绑定DOM的id引用,另一种是DOM元素 ...原创 2019-08-07 12:13:44 · 1058 阅读 · 0 评论 -
render:h=>h(App)到底实现了什么呢?
首先要知道render是Vue的一个函数,用于渲染dom的,其次h=>h(App)是一个es6语法。最终等价于: 了解一下createElement()函数。主要是用来渲染元素或者是组建的。 1、ES6的写法,表示Vue实例选项对象的render方法作为一个函数,接受传入的参数h函数,返回h(App)的函数调用结果 2、Vue在创建Vue实例时,通过调用render方法来渲染实...原创 2019-08-07 15:30:19 · 219 阅读 · 0 评论 -
数组和对象的遍历方法
一、遍历对象方法1.for...in遍历输出的是对象自身的属性以及原型链上可枚举的属性(不含Symbol属性),原型链上的属性最后输出说明先遍历的是自身的可枚举属性,后遍历原型链上的 1 2 3 4 5 6 7 8 9 10 11 12 13 eg: var...原创 2019-08-07 21:42:45 · 222 阅读 · 0 评论 -
Vue中的export default导出的是什么?为什么不可以用export
最近一直好迷惑<template>和<style>标签明明不再export default 中为什么会被导出呀(捂脸,感觉自己太菜啦),完后就一顿查,下面做一下总结首先了解一下export default 的导出内容: *.vue 文件,这个文件会被 vue-loader(如果你用的是 Webpack 的话)加工处理。其中<template>部分会被...原创 2019-08-21 12:13:49 · 4808 阅读 · 5 评论 -
callback回调函数的理解
什么是回调函数:函数A是函数B 的参数,那么函数A就叫做回调函数 为什么会有回调函数呢?:把函数作为参数,这样可以给一个函数传递不同的函数,因此会发生不同的回调行为,比将函数定义在另一个函数体中的形式更加灵活 callback()什么意思:其实callback是函数的名字,callback()是调用函数的意思 ...原创 2019-08-16 15:45:56 · 179 阅读 · 0 评论 -
JSON.parse(JSON.stringify('XXXX'))原来是用来实现深拷贝的呀
在提交表单的时候有时候需要我们将提交的数据中的某些需要删除数据对象中的某个元素,所以用JSON.parse(JSON.stringify(obj))来实现深拷贝得到一个对象,将该对象传给下个请求做参数 JSON.parse(JSON.stringify(obj))我们一般用来深拷贝,其过程说白了 就是利用JSON.stringify 将js对象序列化(JSON字符串),再使用JSON.parse...原创 2019-08-16 21:51:43 · 802 阅读 · 0 评论 -
nuxt路由传参总结
了解nuxt路由先了解page目录下面的目录生成原则:nuxt中的跳转页尽量不要用<a>标签了,因为他提供了<nuxt-link >标签 to跳转到具体路由:<nuxt-link to='路由path'> 或<nuxt-link to="路由路径/${动态参数}" :to传参方式params和query传参 params方式:<n...原创 2019-08-06 18:44:16 · 1079 阅读 · 0 评论 -
vue中的ref和$refs的含义和用法
ref:用在DOM层给dom元素或子组件信息绑定注册信息,引用信息会注册到父组件的$refs属性上面,如果在普通DOM上使用在代表的是DOM元素,如果是在子组件上使用,则代表的是组件实例 $refs:用来在Vue对象中引用注册了ref的元素 ref有什么作用呢:只要是想要在Vue中使用DOM元素,则必须在元素上用ref注册引用信息,之后再Vue中用$ref.注册名字引用该元素 ...原创 2019-08-06 16:19:13 · 3236 阅读 · 0 评论 -
nuxt安装运行npm run dev时报错解决
在nuxt安装完成之后,我们运行npm run dev 时会报如下的错误,查了好久都说是babel版本不兼容的问题,但是我卸载安装好几次还是失败,后来找到了一篇说是安装的nuxt版本太新会有问题,所以先卸载安装一个只之前的版本先卸载nuxt :npm uninstall nuxt 安装指定版本:npm install nuxt@1.4.2 再次运行 npm run dev 就可以啦 ...原创 2019-08-03 20:57:27 · 2770 阅读 · 1 评论 -
Vue动态组件
什么是动态组件 就是通过<component></component>的is="组件名"属性来决定在component显示哪个组件。在Vue中就需要用绑定属性:is="变量名" <div id="example"> <component :is="currentView"></component>&...原创 2019-07-22 17:44:08 · 140 阅读 · 0 评论 -
nuxt.js
中文教程:https://zh.nuxtjs.org/guide什么是nuxt Nuxt.js 是一个基于 Vue.js 的通用应用框架。 通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的UI渲染。 我们的目标是创建一个灵活的应用框架,你可以基于它初始化新项目的基础结构代码,或者在已有 Node.js 项目中使用 Nuxt.js。 Nuxt.js ...原创 2019-08-04 16:59:56 · 324 阅读 · 0 评论 -
前端算法
算符复杂度算法:https://www.jianshu.com/p/f4cca5ce055a 快速查找:https://www.cnblogs.com/zuojiayi/p/6229902.html 二分法查找:https://www.cnblogs.com/zuojiayi/p/6229902.html 二叉树:https://segmentfault.com/a/119000001779...2019-07-26 23:31:51 · 175 阅读 · 0 评论 -
Vue中的props属性中的变量和data中变量的区别
data就是返回一个组件自身的数据对象 props是组件用来接收父组件数据对象的(用于组建通信) 两者概念不同原创 2019-07-28 17:25:26 · 2981 阅读 · 0 评论 -
methods、watch、computed的区别在哪里
methods:用于定义普通的方法,执行实际:待调用的时候执行 computed:是在DOM加载后立即执行便于组件渲染,返回的结果是依赖于data中的数据,会将结果进行缓存,只有当data中的值发生变化是才会重新计算结果,computed是实时监控data中数据变化的 watch:观察的是数据的变动,也可以用于返回属性的计算结果,这个调用的时机是,只要检测的对象改变就会调用,不会像compu一...原创 2019-08-08 15:08:24 · 104 阅读 · 0 评论 -
Vue插槽slot的使用
前提:直接在组件中添加HTML节点是不会显示的,这个时候只有在组件中添加了插槽才会可以在组件中显示添加的节点信息。例如: <template-button><h1>如果组件中没有添加插槽slot这个标题不会显示</h1></template-button> 但是如果在定义</template-button>组件的时候,在里面添加了sl...原创 2019-07-28 19:10:33 · 186 阅读 · 0 评论 -
vue项目目录的介绍
参考的菜鸟驿站很详细的:https://www.runoob.com/vue2/vue-directory-structure.html下面看一下一个项目都会有哪些初始化目录:目录解析:(了解一下每个目录下面都是放什么的)目录/文件 说明 build 项目构建(webpack)相关代码 config 配置目录,包括端口号等。我们初学可以使用默认的。 n...原创 2019-07-04 15:05:46 · 176 阅读 · 0 评论 -
vue的v指令
v-标签v-cloak:状态闪烁,利用改属性避免闪烁状态[v-cloak]{display:none} v-text(等价于{{}}):用于输出Vue对象的文本内容,会覆盖标签加载之前的显示内容 v-html:将对象中的包含HTML标签的字符串渲染到HTML中 v-blind(:简写):给属性绑定Vue对象变量的属性,让属性知道他的值十一个变量值去获取变量值,此时属性的值可以是表达式可以是...原创 2019-07-13 17:17:01 · 318 阅读 · 0 评论 -
ES字符串扩展
ES6 加强了对 Unicode 的支持,允许采用\uxxxx形式表示一个字符,其中xxxx表示字符的 Unicode 码点。但是,这种表示法只限于码点在\u0000~\uFFFF之间的字符。超出这个范围的字符,必须用两个双字节的形式表示如果超出了\uFFFF上线的字符如果直接标识是不可以被理解的所以要用{}将码点包含起来标识就可以正确的获取四个字节的字符啦 ES6 为字符串添加了遍历器接口...原创 2019-06-25 11:14:57 · 131 阅读 · 0 评论 -
ES6字符串的新增方法
String.fromCodePoint():返回指定码点对应的字符,此时的码点是可以大于0xFFFF(UTF-16)的。 String.fromCharCode()方法,返回Unicode 码点对应字符,但是这个方法不能识别码点大于0xFFFF的字符。 codePointAt():返回指定脚标下字符的码点,码点可以大于0xFFFF,对于那些需要4个字节储存的字符(Unicode ...原创 2019-06-25 12:12:06 · 163 阅读 · 0 评论 -
RegExp正则表达式
构造方法var regex = new RegExp('xyz', 'i'):第一个参数是字符串,第二个参数是修饰符 var regex = new RegExp(/xyz/i):参数是匹配模式和修饰符 var regex = new RegExp(/xyz/g, 'i'):仅ES6支持,第二个参数会覆盖第一个参数的修饰符,regexp.flags获取正则对象的修饰符值,此时的值为iU修饰...原创 2019-06-25 17:50:50 · 262 阅读 · 0 评论 -
ES6的Number和Math的扩展
ES6把之前的number全局方法上都加上了Number对象,这样做的目的,是逐步减少全局性方法,使得语言逐步模块化。 Number扩展 Number():1、将非数值的类型转化成数值类型,2、可以把八进制和二进制转化为10进制,ES6中,0b标识二进制0o表示是八进制, Number.isFinite():用来检查一个数值是否为有限的(finite),返回值为布尔类型(只能用在数值...原创 2019-06-25 23:13:14 · 236 阅读 · 0 评论 -
ES6的proxy
proxy表示代理的意思,可以修改某些操作的默认行为,在访问摸一个对象的时候必须要先经过proxy,所以proxy支持一种机制,对外界的访问提供一种过滤和改写的功能。说白了就是以代理的形式改变一个对象的返回结果呢。语法:p=new Proxy(target,handler);创建实例对象target:是个对象,需要做拦截的目标对象 handler:也是一个对象,用来指定拦截的所需要返回的行...原创 2019-07-01 16:49:35 · 109 阅读 · 0 评论 -
同步和异步、单线程和多线程
之前一直混淆同步和单线程之间的概念今就这几个概念谈一下自己的理解1、同步(Sync)先说一下概念:所谓同步,就是发出一个功能调用时,在没有得到结果之前,该调用就不返回或继续执行后续操作。我理解是:同步就是1对1的关系,就是我发出了请求,在我没有的到相应的同时,我要一直等待,需要响应的一方也不可以做别的事情只能一直去给请求方作出响应,即请求方在没有的到响应的时候不再发请求让响应方去做另一...原创 2019-05-29 12:20:52 · 2397 阅读 · 0 评论