### query 源码路径地址：`src/platforms/web/util/index.js` ```js /** * Query an element selector if it's not an element already. */ export function query (el: string | Element): Element { if (typeof el === 'string') { // querySelector() 方法仅仅返回匹配指定选择器的第一个元素 const selected = document.querySelector(el) if (!selected) { process.env.NODE_ENV !== 'production' && warn( 'Cannot find element: ' + el ) // // 找不到就自己创建一个 div - DOM return document.create

浏览器打开多个标签，怎么进行判断呢？或者说是怎么监听浏览器活跃标签的变化呢 ### visibilitychange ```js document.addEventListener('visibilitychange',function(){ //浏览器切换事件 if(document.visibilityState=='hidden') { // 离开当前tab标签 console.log("离开当前tab标签"); }else { // 回到当前tab标签 console.log("回到当前tab标签"); } }); ```

### js 支持汉字转化为拼音 ### 6763汉字 ```js /** * 收录常用汉字6763个，不支持声调，支持多音字，并按照汉字使用频率由低到高排序 */ export const pinyinObj = {"a":"阿啊呵腌嗄吖锕","e":"额阿俄恶鹅遏鄂厄饿峨扼娥鳄哦蛾噩愕讹锷垩婀鹗萼谔莪腭锇颚呃阏屙苊轭","ai":"爱埃艾碍癌哀挨矮隘蔼唉皑哎霭捱暧嫒嗳瑷嗌锿砹","ei":"诶","xi":"系西席息希习吸喜细析戏洗悉锡溪惜稀袭夕洒晰昔牺腊烯熙媳栖膝隙犀蹊硒兮熄曦禧嬉玺奚汐徙羲铣淅嘻歙熹矽蟋郗唏皙隰樨浠忾蜥檄郄翕阋鳃舾屣葸螅咭粞觋欷僖醯鼷裼穸饩舄禊诶菥蓰","yi":"一以已意议义益亿易医艺食依移衣异伊仪宜射遗疑毅谊亦疫役忆抑尾乙译翼蛇溢椅沂泄逸蚁夷邑怡绎彝裔姨熠贻矣屹颐倚诣胰奕翌疙弈轶蛾驿壹猗臆弋铱旖漪迤佚翊诒怿痍懿饴峄揖眙镒仡黟肄咿翳挹缢呓刈咦嶷羿钇殪荑薏蜴镱噫癔苡悒嗌瘗衤佾埸圯舣酏劓","an":"安案按岸暗鞍氨俺胺铵谙庵黯鹌桉埯犴揞厂广","han":"厂汉韩含旱寒汗涵函喊憾罕焊翰邯撼瀚憨捍酣悍鼾邗颔蚶晗菡旰顸犴焓撖","ang":"

### LinearLayout 线性布局 这个布局将它所包含的控件在线性方向上一次排列，方向分为 水平方向和数值方向 ### TableLayout 表格布局 表格布局与HTML中的table td tr标签类似 ### FrameLayout 帧布局 ### RelativeLayout 相对布局 ### GridLayout 网格布局 ### AbsoluteLayout 绝对布局

> nodejs 怎么发送get 请求 ### 原生 ```js var http = require('http'); // qs 是对参数进行格式化的 var qs = require('querystring'); // 提交的数据 let data = { name: ‘vuexx’, time: new Date().getTime() }; let content = qs.stringify(data); let options = { hostname: '127.0.0.1', // 请求地址 port: 10086, // 请求接口端口 path: '/vuexx/xxx?' + content, method: 'GET' }; let data = '' var req = http.request(options, function (res) { res.setEncoding('u

Vue parseHtml 将DOM转换为虚拟DOM ```html <div id="div1"></div> ``` ```json { "tag":"div", "attrs":[ { "id":"div1" } ], "children":[], "type":1 } ``` ```js function parse(template) { var stack = []; // 缓存模板中解析的每个节点的 ast var root; // 根节点，是 ast var currentParent; // 当前解析的标签的父节点 /** * parseHTML 处理 template 匹配标签，再传入 start，end，chars 等方法 **/ parseHTML(template, { start: (){}, end: (){}, // 为 起始标

element-ui表格使用的时候，出现宽度无线扩大的情况 原因：在fieldset标签内使用了table ```css .el-table__header, .el-table__body{ width: 100% !important; table-layout: auto !important; } ```

### 防止使用缓存 ```html <meta http-equiv="Expires" content="0"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-control" content="no-cache"> <meta http-equiv="Cache" content="no-cache"> ``` ### 缓存设置说明 HTTP协议中关于缓存的信息头关键字： * Cache-Control(HTTP1.1) * Pragma(HTTP1.0) * last-Modified * Expires ### Pragma HTTP1.0中通过Pragma 控制页面缓存，可以设置：Pragma或no-cache 通常控制不让浏览器或中间缓存服务器缓存页面，通常不仅设置的值为no- cache，还加上Expires置为0来达到目的 但是如我们刻意需要浏览器或缓存服务器缓存住我们的页面这个值则要设置为 Pragma ###

```html <template> <div v-for="( item, $index ) in data" key="$index"> {{ renderChild( $createElement, item.children ) }} <slot :name="name"></slot> </div> </template> <script> export default { data () { return { name: 'xxx' } }, methods: { renderChild ( h, children ) { this.$slots[ this.name ] = vnode; }, }, }; </script> ```

git 放弃本地更改 ```bash git checkout . #本地所有的修改，没有提交的，都返回到原来的状态 git reset --hard version #返回到某个节点，不保留修改 ```

我们显示金钱数字的时候，一般都是三位一个逗号，来显示金额信息，比如：9,111,222.89 ### vue处理金额 ```bash # npm安装 npm install numbro ``` js vue 中使用： ```js // 使用 import numbro from 'numbro' Vue.prototype.formatMoney = function (num, mantissa) { const params = { thousandSeparated: true } if (typeof mantissa !== 'undefined') { Object.assign(params, { mantissa }) } return numbro(num || 0).format(params) } // 调用 {{formatMoney(1889988.22)}} -> 1,889,988.22 ```

前端怎么解决1px问题、移动端1px问题 ### 问题产生的原因 由于不同的手机有不同的像素密度导致的。如果移动显示屏的分辨率始终是普通屏幕的2倍，1px的边框在devicePixelRatio=2的移动显示屏下会显示成2px，所以在高清瓶下看着1px非常宽 CSS像素为1px宽的直线，对应的物理像素是不同的，可能是2px或者3px,而设计师想要的1px宽的直线,其实就是1物理像素宽。 对于CSS而言，可以认为是border: 0.5px;，这是多倍屏下能显示的最小单位。然而，并不是所有手机浏览器都能识别border: 0.5px，有的系统里，0.5px会被当成为0px处理 尤其是苹果的多倍屏幕显示等 ### 解决方案 * 使用border-image实现 * 使用background-image实现 * 使用box-shadow模拟边框 * 伪元素+transform * 用JS计算rem基准值和viewport缩放值

我们都知道 Vue 是数据绑定的，那么如果我们使用 jQuery 进行DOM操作的话，vue数据绑定可能是无法触发的，尤其是输入框 input 那么，我们怎么解决这个问题呢 可以使用 new Event('input') ```js const element = el.getElementsByTagName('input')[0] const newport = element.value.replace(/\s+/g, '') element.value = newport element.dispatchEvent(new Event('input')) ``` 也可以使用 new InputEvent ```js keyboardInput(input[0], value) function keyboardInput(dom, st) { var evt = new InputEvent('input', { inputType: 'insertText', data: st, dataTransfer: null

### 前端性能优化--6大角度综合型优化方案 超清原画 完整无密 MP4格式支持任何设备 [**百度网盘分享**](http://www.51xuebc.com/thread-210-1-1.html) 我们常说性能永远是第一需求，作为一个前端工程师，不管使用什么框架，不管从事什么类型的网站或应用开发，只要是项目被用户使用，性能优化就永远是你需要关注的问题。通常情况下，工程师们在深入了解前端技术的原理后，才能总结出性能优化的方案，需要多年经验的积累。前端技术日新月异，优秀的性能优化方案在近几年也层出不穷。本课程，我会带你使用当今行业中非常前沿&专业的方案，解决前端性能优化问题。无论是为了解决工作中的实际问题，还是为了提升能力，这门课都能帮到你。 适合人群 1-3年开发经验的前端开发者 初入社会的毕业生 技术储备要求 HTML/CSS/JS基础 基本的Webpack, React, Node.js知识 章节目录： 第1章 课程介绍 介绍这门课程要讲的主要内容，讲解方式、课程主线、以及能有的收获。 1-1 课程导学 【课程背景，大纲速览】试看 第2章

### require.context require.context是一个webpack提供的Api，通过执行require.context函数获取一个特定的上下文，主要是用于实现自动化导入模块 什么时候用？ 当一个js里面需要手动引入过多的其他文件夹里面的文件时，就可以使用。 比如批量导入某个文件下所有的文件，可以用 require.context 批量读取文件， ```js // 线上一层路由结构 let prdRouteMap = [] // 开发模式 二层路由 const secondLevelRouterMap = [] files.keys().forEach((key, index) => { Object.keys(files(key)).forEach((item, index) => { const node = files(key)[item] prdRouteMap = prdRouteMap.concat(node) if (!verifySwitch) { secon

### $attrs: 当组件在调用时传入的属性没有在props里面定义时，传入的属性将被绑定到$attrs属性内（class与style除外，他们会挂载到组件最外层元素上），并可通过v-bind="$attrs"传入到内部组件中 ``` <com-test :abc="a" ddf="d"></com-test> props: [abc] ``` 这个时候，传递进来的abc 是在props 里面的，但是ddf不在，可以用$attr获取ddf ### $listeners: 当组件被调用时，外部监听的这个组件的所有事件都可以通过$listeners获取到。并可通过v-on="$listeners"传入到内部组件中。

bash.sh关联vue.config.js、vue.config.js 和 bash.sh 一起运行、也就是脚本文件和我们的打包运行动作文件相结合 这里推荐大家使用npm脚本，使用 && 来链接命令 ```json scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "dev": "bash scripts/release.sh && npm run serve" }, ```

VueRouter 源码分析 index.js 初始化 VueRouter vue-router/src/index.js ```js /* @flow */ import { install } from './install' import { START } from './util/route' import { assert } from './util/warn' import { inBrowser } from './util/dom' import { cleanPath } from './util/path' import { createMatcher } from './create-matcher' import { normalizeLocation } from './util/location' import { supportsPushState } from './util/push-state' import { HashHistory } from './history/hash' import { H

Vue-Router 源码分析，入口 install 文件 ```js import View from './components/view' import Link from './components/link' // 保存初始化传递进来的Vue实例 export let _Vue export function install (Vue) { // 通过一个全局变量来确保只安装一次 if (install.installed && _Vue === Vue) return install.installed = true _Vue = Vue const isDef = v => v !== undefined // 注册实例 const registerInstance = (vm, callVal) => { // 至少存在一个 VueComponent 时, _parentVnode 属性才存在 let i = vm.$options._parentVnode //

### 通过 nvm 管理安装nodejs nvm官方网站：https://github.com/nvm-sh/nvm ```bash curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash ``` 下载完成后加入系统环境，否则有时候会出现关掉终端后，node命令无法识别 ```bash source ~/.bashrc ```