dreamingbaobei的博客

TypeScript 由微软开发的编程语言，是JavaScript的一个超集，是添加了类型系统的 JavaScript可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。在学习TypeScript之前，请保证先熟悉了JS基础、ES6和NPM的简单实用。一、全局安装typescriptnpm install -g typescript安装完成后就可以使用 tsc命令来执行 TypeScript 的代码// 查看版本号tsc -v通常使用 .ts 作

slot又称插槽,通常用于父子组件之间，用于父组件向子组件`传递模板内容`，在子组件中可以设定可以放置插槽的名称和要传递给父组件的子组件数据，在父组件中向子组件通过指令声明插槽和接收子组件传递的数据。

sync-validator是一个表单的异步验证的第三方库。传入验证规则对象，可以新建一个验证器对象。验证器对象的`validate`方法用于验证数据是否符合验证规则。

Vue模板的表达式语法仅支持单个表达式，用于简单运算；对于复杂的逻辑计算应当使用计算属性computed。computed可以依赖（计算）props、data、vuex的数据，即可以声明了一个计算属性，令其响应props/data/vuex的数据变化，返回一个经过某种计算的结果。

指令在定义的时候，名称前面不需要加 v- 前缀，在调用的时候，需要在指令名称前加上 v- 前缀来进行调用。自定义指令的注册分为全局自定义指令和局部指令。

Vue中子组件不能直接引用父组件的数据，需要通过props选项接收来自父组件的数据。

要实现客户端与服务器端的通信，最常接触的是http（https）协议，http通信只能是客户端发起请求，服务器响应。服务器不能主动向客户端传递消息。HTTP 协议无法做到服务器主动向客户端推送信息，2008年诞生的WebSocket 协议可以实现客户端与服务器端的双向对话，即：服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息。WebSocket 协议的底层协议也是TCP协议WebSocket 协议的标识符为ws,加密后为wssWebSocket 协议没有同源限制，即WebSocke

JS中Object对象的静态方法getOwnPropertyDescriptor可以返回指定对象的指定属性的描述,该描述是一个对象，称为属性描述符对象。属性描述符是ECMAScript5新增的语法，它就是一个内部对象，用来描述对象的属性的特性。属性和方法说明configurable可配置性，是否可以使用delete删除属性，以及是否可以修改属性描述符的特性，默认值为trueenumerable可枚举性，是否出现在对象的属性枚举中，比如是否可以通过for-in循环返回

在项目实践中，往往需要用户登录后由后端返回用户的权限，来动态配置路由,vue-router提供了两个方法router.addRoutes(),router.addRoute()可以进行动态路由配置，这里需要注意的是vue-router的options属性并不是响应式的，在添加（修改）路由规则后，router.options.routes属性不会改变，目前，如果需要更新router.options.routes，则需要手动更改。

史上最全常用正则表达式大全 很多不太懂正则的朋友，在遇到需要用正则校验数据时，往往是在网上去找很久，结果找来的还是不很符合要求。所以我最近把开发中常用的一些正则表达式整理了一下，在这里分享一下。给自己留个底，也给朋友们做个参考。一、校验数字的表达式 1. 数字：^[0-9]*$2. n位的数字：^\d{n}$3. 至少n位的数字：^\d...

MockJs用于拦截 Ajax 请求，生成随机数据，是前端很重要的一个工具。

Vue 的内置组件component组件动态绑定组件,根据数据不同更换不同的组件,component通过属性is的值可以渲染不同的组件。<component :is="currentTabComponent"></component>transition组件为组件的载入和切换提供动画效果transition-group组件作为多个元素/组件的过渡效果keep-alive组件能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。包裹动态组件时，会缓存不活动的组件

Vue是做什么的是用于构建用户界面的渐进式框架是一个轻量级的JavaScript MVVM库，是做到了数据双向绑定的框架。VUe.js的核心思想是数据驱动和组件化渐进式含义是：主张最少。每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。Vue的版本Vue已经有了三个版本，目前最常用的是Vue2Vue的安装在网页中用<script src="https://cdn.jsdelivr.net

1、字符串模板Vue实例的模板可以在Vue实例的选项template中定义，属性值的本质是一个字符串，如果组件的template过长难以阅读，可以将模板写在script标签中，或者使用Vue提供的内联模板功能,将组件模板设置在组件之外。<div id="app"></div>new Vue({ el: '#app', data: { message: 'Hello Vue!' }, template:`<p>{{

一切从前后端分离开始理解MVVM框架要先从前后端分离说起，传统前端先写一个静态页面，写好后，让后端去套模板，前端无法独立调试代码，这样做导致无论前端还是后端对页面的维护都非常困难，用户体验很差。前后端分离是指前端专注于客户端，复杂渲染页面和显示数据；后端专注做数据的操作；前后端通过接口交互，交互方式是前端发送异步请求后端给，后端接受请求返回数据，前端接受数据并使用数据。前后端分离后，前端才开始需要工程化才需要软件设计模式，这就有了MVC 和MVVM框架。MVC 框架MVC 即 Model-View

JS中涉及到数组查询的方法见下表：方法描述参数返回值indexOf()搜索数组中的元素，并返回它所在的位置。要搜索的元素 ，查找的起始位置元素第一次出现的索引lastIndexOf()搜索数组中的元素，并返回它最后出现的位置要搜索的元素 ，查找的起始位置元素最后一次出现的索引includes()判断一个数组是否包含一个指定的值要查找的元素值Booleanfind()返回符合传入测试（函数）条件的数组元素函数,this符合条件的第一个元素的值

常用配置项：配置项说明类型默认值更多publicPath设置部署应用包时的基本 URLString‘/’详情outputDir设置项目打包生成的文件的存储目录String‘dist’详情assetsDir指定放置打包生成的静态资源 (js、css、img、fonts) 的目录(相对于outputDir)String‘’详情indexPath设置生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径

VS Code是免费软件，直接到官网下载安装即可，如果选用这款编辑器，建议花点时间实习一下这款软件，安装必要的插件，会大大提供编码效率。笔者从从前使用webstorm做前端项目，下面记录在项目实践中的一些配置。

Vue项目中如果引入了Vue router实例,就可以在Vue实例中通过$route访问到当前匹配到的路由对象。$route对象代表着当前路由对象，属性包括：path:String,当前路由对象的名称|当前路由对象的路径，会被解析为绝对路径queryObject,|路由中携带的查询参数paramsObject,包含路由中的动态片段和全匹配片段的键值对。matched:Array,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。即匹配到的所有的 RouteRecord 对象ful

前端构建前端构建其实是工程化、自动化思想在前端开发中的体现，将一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。过去，前端一直在各种为战，不停的造轮子，前端只会一种语言js,js只能在浏览器运行，前端工程化无从谈起，在node出现之后，各种前端构建工具才如雨后春笋般层出不穷。前端构建可以实现如下内容：代码转换：将 TypeScript/es6 编译成JavaScript、将 SCSS 编译成 CSS等。文件优化：压缩JavaScript、CSS、HTML 代码，压缩合并图片等。代码

在前面所有的文章中，我们都是在围绕网页的三部分，结构（HTML）、表现(CSS)、行为(JS)分离的方式来介绍的,传统的前端，就是在html文件中引入css文件和js文件（包含jQuery之类的js库），来实现web应用的一部分，通常包括：页面的静态实现，即所谓的切图或者DIV+CSS页面实现使用js及其插件完成页面的动态效果表单提交、数据验证或使用ajax与后端交互数据这时候前端在WEB项目中，并不涉及太多的业务逻辑，通常代码最后要交给后端来实现与服务器的交互，前端的岗位在项目中通常是面目模糊

相信对Console对象大家已经不会陌生了，我们常常调用它来调试js代码,在浏览器中按F12调出开发者工具，可以看到Console面板，在js中使用console对象，结果会输出到Console面板，也可以在此面板直接输入js代码，回车后代码就会执行。console对象是宿主对象，IE8及以下浏览器不支持console对象。输出信息log()info()warn()error()table()group()和groupEnd()groupCollapsed()和groupEnd()d

在windows系统搭建VUE环境(安装vue-cli4)中我们使用默认配置创建一个项目hello-world，这次我们首先用图形化界面来创建一个项目。在命令行中输入下面的命令打开一个浏览器窗口vue ui安装这个页面的引导我们来创建一个项目hello-word2,在预设中选择手动配置项目，在功能中做如下选择在配置中做如下选择点击创建项目然后等待即可。...

AJAX是一种异步的客户端和服务端进行交换数据的方法，表现是不重新加载页面的情况下，后台与服务器进行了数据交互，再部分的更新页面。在ES6之前，主要使用浏览器提供的接口XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据。我们熟悉的jquery的ajax方法就是对XmlHttpRequest的一种封装，它通过回调函数来传递异步操作的消息。甚至有些人认为jquery的ajax就代...

sessionStorage和localStorage是html5的新特性，和cookie一样，sessionStorage和localStorage也用于客户端存储数据，同样遵循同源策略，但sessionStorage和localStorage可以存储更多的数据，并且不会被HTTP请求携带。基于这样两点好处，sessionStorage和localStorage可以应用到更加复杂的场景中。浏...

文章目录Cookie的产生Cookie是什么Cookie的传输Cookie的存储Cookie的有效期操作浏览器Cookie获取Cookie设置Cookie删除CookieCookie的产生Web应用程序是使用HTTP协议传输数据的，HTTP协议是无状态协议，指协议对于交互没有记忆能力，浏览器与服务器的每一次交互都是新的。为了使WEB应用程序在页面之间共享数据和记录用户状态，最早有两个解决方案...

Event 对象HTML 事件是发生在 HTML 元素上的行为，如网页完成加载，输入字段被修改，按钮被点击等等，事件可以被 JavaScript 侦测到。如用户点击一个按钮，我们给这个按钮上注册的click事件就会被触发，用一个函数“应对”事件，函数的形参就是Event对象。浏览器事件是DOM API的一部分，事件是javascript和HTML交互基础。Event 对象代表事件的状态，只在...

在实际的开发项目中，存在着多种角色。前端就是其中一种，在大型项目中，前端也不可能只有一个，在这样的项目中，怎样协同工具，怎么解决js代码之间的依赖关系，代码怎样维护是个棘手的问题。ES6终于有了module来解决这个问题，那些实现JS模块化的框架终将成为前尘往事，AMD、CMD、CommonJs、ES6的对比。ES6模块化写法一个js文件就可以看成一个模块，如我们现在有两个模块module...

ES6中引入的一种新的函数类型，叫做generator生成器函数，它的特点是能够通过yield表达式中断函数的执行。在普通的函数通过return指定返回值，如果函数被调用，会一直不间断的执行到return终止，如果没有显示return语句，会默认添加到函数的末尾。生成器函数如何定义function* f() {}普通函数和生成器函数的区别：普通函数和生成器函数的构造函数分别是Func...

在移动端布局时，图片的显示是个棘手的问题。通常我们会要求运营在上传图片时使用我们规定比例的文章，但不能保证被严格的执行，必然会导致一些扭曲、页面的跑位等等问题由于移动端图片宽度要适应设备，为避免扭曲，高度不能限定，会图片加载过程中会出现页面的白屏抖动等情况如下图有4个不同比例的图片，使用弹性布局，限定图片的宽度、不限定高度，显然不是我们想要的结果我们使用css来解决图片比例的问题，块...

ProxyProxy的意思是代理，ES6中提供了Proxy构造函数，Proxy的作用可以理解成在目标对象之前架设一层“拦截”，外界对该对象的操作，都必须先通过这层拦截，这种方式可以拦截外界对对象的操作进行过滤和改写，通过Proxy是实现数据劫持的方法之一。这些操作可能是对目标对象属性的读、写，属性的定义等等，如果目标对象是函数，还可以拦截call，apply,new操作。要拦截的操作涉及到...

const promise = new Promise(function(resolve, reject) { //实例化后状态：pending if (/* 异步操作成功 */){ resolve(value); // resolve方法调用，状态为：fulfilled } else { reject(error); // reject方法调用，状态...

Javascript最开始被设计出来，是为了解决一些Web上的简单交互的，但随着网络的发展，要解决的问题越来越复杂，在JS编程中，代码总是显得怪里怪气，不过好在在ES6中，增加了Class语法，虽然它本质上属于语法糖，但是至少JS像是真正的面向对象语言了。

对于一个网页，HTML定义网页的结构，CSS描述网页的样子，JavaScript设置一个很经典的例子是说HTML就像 一个人的骨骼、器官，而CSS就是人的皮肤，有了这两样也就构成了一个植物人了，加上javascript这个植物人就可以对外界刺激做出反应，可以思 考、运动、可以给自己整容化妆（改变CSS）等等，成为一个活生生的人；

到底什么是选择器？通过常接触的CSS选择器和jQuery选择器理解一下，我们知道CSS是用于分离网页的结构和表现的，也就是说对于一个网页，HTML定义网页的结构，CSS描述网页的样子，一个很经典的例子是说HTML就像一个人的骨骼、器官，而CSS就是人的皮肤，有了这两样也就构成了一个植物人了，加上javascript,这个植物人就可以对外界刺激做出反应，可以思考、运动、可以给自己整容化妆（改变CSS...

JavaScript 是解释性脚本语言。JS程序就是一系列可执行语句（指令）的集合，默认情况下JS解释器依照语句的编写顺序依次执行（变量和函数的提升有点特殊）。

Javascript程序就是一系列可执行语句（指令）的集合，默认情况下JS解释器依照语句的编写顺序依次执行。流程控制：就是控制程序代码执行顺序，通过规定的语句让程序代码有条件的按照一定的方式执行。顺序结构按照书写顺序来执行，是程序中最基本的流程结构，代码在知行过程中，如果没有条件结构和循环结构就会一直顺序执行。条件结构（选择结构，分支结构）根据给定的条件有选择的执行相应的语句条件控制两...

ECMAScript是客户端脚本语言（JavaScript）的标准。引入js的方法。1、内部JS： 定义&lt;script&gt;，标签体内容就是 js 代码 外部JS：2、外部JS:定义&lt;script&gt;，通过src属性引入外部的js文件注意：script标签可以定义在 html 页面的任何地方。但是定义的位置会影响执行顺序。可以多个定义script标签。JS基本语法规...

可以把变量看做存储数据的容器，JavaScript中变量是弱类型，即无需声明变量的具体类型，当变量被赋值时才确定数据类型。声明（创建） JavaScript 变量一、变量声明定义时用关键字：var。如果不用var，则为全局变量。二、变量赋值（初始化）变量声明后可以存放任何类型的值，未经赋值（初始化）的变量，会保存一个特殊的值“undefined”,JavaScript可以直接初始化变...

在Javascript学习中常常看到一句话，一切皆对象，这句话要怎么理解？客观世界中有很多事物，任何一个事物都不是孤立存在的，比如一个真实存在的人Perter,他可以属于一个抽象的老年男人、美国人、男人、人类、灵长类、动物、地球生物、硅基生命、物质、宇宙…,我们以男人这个分类为例，讲讲对象的类，男人是个抽象的概念，Perter作为一个客观存在的男人，继承了男人的属性，比如：有一条Y染色体，还继...