前端笔记1

           1.子组件向父组件共享数据：在子组件中使用$emit('自定义名字',传递的数据) 在父组件中@自定义名字="一个方法" 在methods中定义这个方法

           2.兄弟组件间数据共享的方案：eventbus

数据发送方：bus.$emit

数据接收方:bus.$on

            3.什么是ref引用:ref用来辅助开发者在不依赖jquery的情况下。获取dom元素或者组件的引用

每个vue的组件实例上，都包含一个$refs对象，里面存储着对应的dom元素或组件的引用。默认情况下，组件的$refs指向一个空对象。

             4.组件的$nexttick（cb)方法，会把cb回调推迟到下一个dom更新周期之后执行，通俗的理解是：等组件的dom更新完成之后。再执行cb回调函数，从而能保证cb回调函数可以操作到最新的dom元元素

             5.回调地狱：多层回调函数的相互嵌套，就形成了回调地狱。

缺点：代码耦合性太强。牵一发而动全身，难以维护。

大量冗余的代码相互嵌套，代码的可读性变差。

               6.async await

不需要再.then的方式拿到最终结果。

注意事项：1：如果在function中使用了await，则function必须被async修饰

2：在async方法中，第一个await之前的代码会同步执行，await之后的代码会异步执行

              7.shell常用指令：

dir：列出当前目录下所有文件

cd 目录名：进入到指定的目录

. 表示当前目录

..表示上一级目录

md hello :新建hello文件夹

rd hello：删除hello文件夹

               8.进程和线程：

进程：负责为程序的运行提供必备的环境 。进程就相当于工厂中的车间

线程：计算机中最小的计算单位，线程负责执行 进程中的程序。线程就相当于工厂中的工人

              9. node.js:是一个能够在服务器端运行javascript的开放源代码，跨平台javascript运行环境

 模块化：在node中一个js文件就是一个模块

在node中，通过require（）函数来引入外部模块。require（）可以传递一个文件的路径作为参数，node将会自动根据该路径来引入外部模块。这里路径，如果使用相对路径，必须以.或..开头

require（“”）

            10.使用require（）引入模块以后，该函数会返回一个对象，这个对象代表的是引入的模块。

            11.在node中，每一个js文件中的js代码都是独立运行在函数中，而不是全局作用域，所以一个模块中的变量和函数在其它模块中无法访问。

我们可以通过exports向外部暴露变量和方法，只需要将需要暴露给外部的变量或方法设置为exports的属性即可。

           12.在node中有一个全局对象global，他的作用和网页中window类似。在全局创建的变量都会作为global的属性保存。在全局创建的函数都会作为global的方法保存。

arguments.callee这个属性保存在是当前正在执行的函数对象 。

            13.实际上模块中的代码都是包装在一个函数中执行的，并且在函数执行时，同时传递进了5个实参

exports：该对象用来将变量或函数暴露到外部

，require：函数，用来引入外部的模块

，module，代表的是当前模块本身，exports就是module的属性，既可以使用exports导出，也可以使用module.exports导出

_filename：当前模块一个完整路径

_dirname：当前模块所在文件夹的路径

exports 与module.exports区别：

exports:

exports(module.exports).name=“xxx”

exports(module.exports).age=18

exports(module.exports).sayname=function(){}

module.exports:

module.exports(exports不行)={

name:"xxx"

sayname:function(){}

} 

exports只能通过.来向外暴露内部变量  module.exports即可以.也可以{}

                14移动端：

fontsize计算：document.documentElement.style.fontSize=document.documentElement.clientwidth/设计稿宽度* 随便一个数（基准fontsize）                   width：设计稿宽度/随便一个数rem

省略号显示：

当单行文本溢出显示省略号需要同时设置以下声明：

1：容器宽度：width

2：强制文本在一行内显示：white-space：nowrap

3：溢出内容为隐藏：overflow：hidden

4：溢出文本显示省略号：text-overflow：ellipsis

             15.display:flex  影响：1.子元素默认横向排列  2.行内元素变成了块级元素     3.只有一个元素的时候，margin:auto自动居中 

             16设备像素比=物理像素/css像素

一张设计稿在移动端布局的时候可以使用1：百分比2：弹性盒布局3：rem布局

<meta name="viewport" content="width=device-width, initial-scale=1.0 (user-scalable=no 这个是允许或者不允许用户放大)">

：：webkit-scrollbar{display：none} 滚动条隐藏

              17.弹性盒子

flex-shrink:1挤压   flex-shrink：0

父盒子：：：：（里面的子元素一起变化）

主轴在侧面：flex-direction:column

justify-content:flex-star/flex-end/center/space-between/space-around 调整主轴上的子项

align-items：flex-star/flex-end/center 调整侧轴上的子项

flex-wrap:wrap 折行

align-content：flex-start 控制折行后行间距/flex-star/flex-end/center/space-between/space-around

子盒子：：：：

align-self:flex-start/flex-end/center/baseline(与start没区别)/stretch（拉伸：当主轴是横向时高度占满否则宽度沾满）

设置子盒子顺序的时候用order 默认order：0  数值越大盒子越靠后

设置flex：1的子盒子会占满剩余空间

主轴在纵轴的时候不设置宽度 中间部分用flex;1就会三栏布局

column-count:5(显示的列数)  column-gap：10px（调整列间距）column-rule：2px solid red（分割线） column-fill：auto（  列高度统一   auto把父盒子占满）column-width：500px（调整列宽）column-span：all（横跨所有列） break-inside：avoid（禁止盒子内部折行）

em：相对单位，相对于父元素的字体大小 

rem：相对单位，相对于根元素（html）字体大小

                18.ajax

 创建ajax对象 var xhr=new xmlhttprequest()

配置本次请求信息  xhr.open(请求方式，请求地址，是否异步)

注册请求完成事件  xhr.οnlοad=function(){}

把请求发送出去xhr.send()

              19.请求方式get与post：

get：偏向获取的语义化，参数是查询字符串，大小有限制2kb左右，参数位置在地址后面（xxx？后）

post：偏向提交的语义化，参数格式多样，但是需要特殊说明（），理论上没有限制，参数位置在请求体内（send（）内）

                  20.混入minix

1.当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行合并，比如。数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先

2.同名钩子函数将合并为一个数组，因此都将被调用，另外，混入对象的钩子将在组件自身钩子之前调用。

                  21.对于数组的响应

Vue 不能检测以下数组的变动：

1. 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
2. 当你修改数组的长度时，例如：vm.items.length = newLength

举个例子：

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将在响应式系统内触发状态更新：

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

为了解决第二类问题，你可以使用 splice：

vm.items.splice(newLength)

                        22.webpack 

 template:代表模板用哪个里面的

filename：名字叫什么

inject：<script>标签写在哪里

想要把上一次打包的清除掉的时候  在output内设置clean：true

node.js

包实际上是一个压缩文件。解压以后还原为目录。符合规范的目录应该包含如下文件：package.json（描述文件）bin（可执行二进制文件）lib（js代码）doc（文档）test（单元测试）

commonjs的包规范允许我们将一组相关的模块组合到一起，形成一组完整的工具。commonjs的包规范由包结构（用于组织包中的各种文件）和包描述文件（描述包的相关信息，以供外部读取分析）两部分组成 

npm的命令：

npm -v 查看npm的版本

npm version 查看所有模块的版本

npm search 包名 搜索包

npm install/i 包名 安装包

npm remove/r 包名 删除包

npm install 包名 --save 安装包并添加到依赖中

npm install 下载当前项目所依赖的包

npm install 包名 -g 全局安装包（全局安装的包一般都是一些工具）

通过npm下载的包都放到node_modules文件夹中，我们通过npm下载的包，直接通过包名引入即可

npm在使用模块名字来引入模块时，他会首先在当前目录的node_modules中寻找是否含有该模块，如果有则直接使用，如果没有则会去上一级目录的node-modules中寻找如果有则直接使用，如果没有则再去上一级目录寻找，直到找到为止，直到找到磁盘的根目录，如果依然没有。则报错