Vue组件通信

2018年07月15日 1.3k 字大概 6 分钟

组件

(Component) 是 Vue.js最强大的功能之一。组件可以扩展，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。

通信类型

父组件与子组件通信

父组件给子组件传递数据 props: 使用props，父组件可以使用props向子组件传递数据

// 父组件 
<template>
    <child :msg="message"></child>
</template>
 
<script>
    
import child from './child.vue';
 
export default {
    components: {
        child
    },
    data () {
        return {
            message: 'father message';
        }
    }
}
</script>

// 子组件
  <template>
      <div>{{msg}}</div>
  </template>
    
  <script>
  export default {
  // props 另一种写法, 不声明类型与默认值
  // props: ['msg']
      props: {
          msg: {
              type: String,
              required: true
          }
      }
  }
  </script>
```  

- 子组件向父组件通信  

> 在Vue 中子组件一般不具有操作数据和处理事件的权利，所有的数据和事件的处理都要交给父组件进行操作  

**方法一 :** 在子组件中通过$emit()将组件内部的时间传递给父组件的事件进行   

```js  
// 父组件
<template>
<child @msgFunc="func"></child>
</template>

<script>

import child from './child.vue';

export default {
components: {
    child
},
methods: {
    func (msg) {
        console.log(msg);
    }
}
}
</script>

// 子组件  
<template>
<button @click="handleClick">点我</button>
</template>

<script>
export default {
props: {
    msg: {
        type: String,
        required: true
    }
},
methods () {
    handleClick () {
        // 提交出去的处理方法的名称与父组件接收的需一致
        this.$emit('msgFunc');
    }
}
}
</script>  
```  

**方法二:** 通过修改父组件传递的props来修改父组件数据  
> 这种方法只能在父组件传递一个引用变量时可以使用，字面变量无法达到相应效果。因为饮用变量最终无论是父组件中的数据还是子组件得到的props中的数据都是指向同一块内存地址，所以修改了子组件中props的数据即修改了父组件的数据。

> 但是并不推荐这么做，并不建议直接修改props的值，如果数据是用于显示修改的，在实际开发中我经常会将其放入data中，在需要回传给父组件的时候再用事件回传数据。这样做保持了组件独立以及解耦，不会因为使用同一份数据而导致数据流异常混乱，只通过特定的接口传递数据来达到修改数据的目的，而内部数据状态由专门的data负责管理  

---  

## 兄弟组件进行通信  

> 刚开始学习使用Vue时, 在Vue项目中的两个兄弟组件之间如果要进行通信， 通常会通过一个父组件进行数据请求再给子组件传递数据。    


- Vuex 是官方推荐的状态管理方案, 不过如果只是中小型项目，状态管理也没有很复杂的话，使用 Vuex 有种杀鸡用牛刀的感觉    

- Vue 官方推荐使用一个 Vue 实例作为中央事件总线, 即 `EventBus`  ,在需要使用的地方import该Bus   

  > EventBus 解决了兄弟组件之间的事件传递问题，它的本质是订阅发布者模式，同一个事件发布组件发布了，订阅组件就能获得事件的改变摆脱了兄弟组件之间传值需要父组件转达，Vue事件实例，作为中间者不在页面上显示且具有vue的API 如 emit on   

```js  
    // bus.js => new 一个 Vue 实例
    import Vue from 'vue'
    export default new Vue()  

    // clickComponent.vue 相当于发布者, 在需要的组件中订阅就能进行通信
    <template>
      <div>
        <a href="#"class="click" :data-index="index" @click.prevent="doClick($event)">点我</a>
      </div>
    </template>

    <script>
    import Bus from '@/common/bus.js'
    export default {
      props: {
        index: Number
      },
      methods: {
        doClick (event) {
           // console.log(event.target.dataset.index)
           Bus.$emit('getTarget', event.target.dataset.index)
          //  this.$emit('global: getTarget', event.target.dataset.index)
        }
      }
    }
    </script>

    // showComponents.vue 另一个兄弟组件 进行订阅

    <template>
      <div>
        {{html}}
      </div>
    </template>

    <script>
    import Bus from '@/common/bus.js'
    export default {
      data () {
        return {
          html: '还没有点击'
        }
      },
      created () {
         Bus.$on('getTarget', index => {
           this.html = `第${index}个元素`
         })
        //this.$on('global: getTarget', index => {
       //   this.html = `第${index}个元素`
       // })
      }
    }
    </script>
```  
  在node中有一个 `vue-event-proxy` npm包能够实现与EventBus同样的功能，需要安装该npm包, 并且在main.js中进行`引入 `  


```js
  import EventProxy from 'vue-event-proxy'
  Vue.use(EventProxy)   // 激活使用
  // 完成后即可以使用上面组件中js注释部分的代码代替Bus代码

排序

2018年07月15日 815 字大概 3 分钟

算法题

如下数字: 35 99 18 76 12

桶排序
有[100] for初始化数组
将数字放到相应的位置

思想：

    利用数组的下标是有序的,待排序的数字大小在下标的范围内，当数组下标等于要排序的数组时
    用待排序的数字坐桶的下标 给相应项+1 类似于做标记的
    myIdea:当下标等于待排序的数字大小 即输出下标 相当于输出较小的数字 
    ```  

    **时间复杂度:**  
       时间复杂度 循环  
       O(M+N) 一重循环最大值99 100，又一重循环N，  
       之后又有一层循环M 有值的桶子  
       嵌套循环 >= 0 1 2 3有限的，<N   M+N  
         多层循环是最花时间M+N  
         O(M+N+M+N)=O(2*(M+N))  O(M+N)
 
    **缺点:** 占物理内存，因为要分配M个元素的数组  
        
- 冒泡排序  

```js
// 冒泡排序 
// 思想: 比较相邻的元素。如果第一个比第二个大，就交换两数顺序  
const source_arr = [35,18, 99, 18, 76, 12];
function bubbleSort(arr) {
    const len = arr.length;
    for (let i = 0; i < len; i++) {
        for (let j = 0; j < len - 1 - i; j++) {
            if (arr[j] > arr[j+1]) {        // 相邻元素两两对比
                let temp = arr[j+1];        // 元素交换
                arr[j+1] = arr[j];
                arr[j] = temp;
            }
        }
    }
    return arr;
}
console.log(bubbleSort(source_arr));

选择排序

第一重循环默认把 i 个作为最小值与后面 j 循环中的的数进行比较，也就是通过第二重循环与后面的值进行比较

// n^2
// 找到数组中最小的值放在第一位，第二小的放在第二位...
// 基址查询
function SelectSort(arr) {
  let len = arr.length
  for(let i = 0; i < len; i++) {
    let minIndex = i
    // 如果已经选择了， 前面的就一定是有序的
    for( let j = i; j < len; j++) {
      if( arr[j] < arr[minIndex]) {
        // 循环和默认的最小值进行比较， 如果更小纪录下标
        minIndex = j
        console.log(i, j)
      }
    }
    if(minIndex !== i) {
      [arr[minIndex], arr[i]] = [arr[i], arr[minIndex]]
    }
  }
  return arr
}
console.log(SelectSort([45,21,45,12,56,12,67,32,98]))

快排排序

因为采用了分治思想，所以快形象的例子三个数之间进行排序 a b c 再加递归

// 简单排序： 冒泡、选择、插入 时间复杂度都是 n^2
// 复杂排序： 快排、堆排、归并排序 时间复杂度都是 (log2^n)* n
// 分治
// 快排 log2(n)* n for循环 n次
  // 1. 随机选择一个数组中的一个数作为一个基准 一般是中点
  // 2. 其余数字跟他比较， 小的放左边 大的放右边
  // 3. 利用递归的思想， 将左右两边的数重复以上两步
function QuickSort(arr) {
  // 这里是出口 当数组长度小于等于1的时候结束递归
  if(arr.length <= 1) {
    return arr
  }
  let pivotIndex = Math.floor(arr.length /2)
  // 把中间基准值从数组提出来
  pivot = arr.splice(pivotIndex, 1)[0]  // 选出相应位置的值
  console.log(pivot)
  let left = [], right = []
  for(let i = 0, len = arr.length ; i < len; i++) {
    if( arr[i] < pivot) {
      left.push(arr[i])
    } else {
      right.push(arr[i])
    }
  }
  return QuickSort(left).concat(pivot, QuickSort(right))
}
console.log(QuickSort([85, 24, 63, 45, 17, 31, 78, 56]))

Webpack 相关

2018年07月03日 20 字大概 1 分钟

entry 入口

output 出口

resolve

devServer

module

rules

loader

plugins

optimization 优化

参考链接
 官方文档传送门

LazyLoad(懒加载)

2018年05月04日 231 字大概 1 分钟

懒加载

懒加载（延迟加载）是一种网页性能优化的方式，一般优先加载可视区域内的内容，其他部分进入可视区域再进行加载，能够提高用户体验。
节省http请求数量、节省用户流量

Css3属性

2018年05月04日 1.8k 字大概 7 分钟

text-shadow属性

介绍:

text-shadow属性可以给页面上的文字增添阴影效果，text-shadow在Css2.1的时候是被删除了的一个属性，但是呢在 3.0 的Css中又恢复了使用

使用方法

text-shadow : length length length color

注：前两个参数在使用的时候必须给定

第一个length表示阴影离开文字横方向的距离
第二个length表示阴影离开文字纵方向的距离
第二个length表示阴影模糊半径即模糊范围
color 表示阴影颜色可以放在三个length之前也可以放在之后如果不给值则使用元素默认color

$ 指定多个阴影：每个阴影用逗号隔开
text-shadow : 15px 15px 5px #000,30px,30px,5px #f60;
background-size属性
介绍:
在Css3中可以使用background-size来指定背景图像的尺寸

使用方法
background-size: auto || length || percentage || cover || contain
auto: 默认值保持背景图片的原始宽高比
length: 设置背景图片的宽度和高度，如果只设置一个值，则第二个值会被设置为auto 按宽高比进行放大缩小
percentage: 以父元素的百分比来设置宽度和高度，如果只设置一个值同上
cover: 此值是将图片放大，以适合铺满整个容器，这个主要用在当图片小于容器又无法使用background-repeat来实现，就采用cover将背景图片放大到适合容器的大小，但是会使图片失真
contain: 与cover相反，将背景图片缩小以适合铺满整个容器，这个主要用在当背景图片大于元素容器时，而又需要将背景全部显示出来，就可以用contain将图片缩小到适合容器的大小，这种方法同样会使图片失真

在一个元素中显示多个背景图片

介绍:

在Css3一个元素可以显示多个背景图像，还可以将多个背景图像进行重叠显示，这样对背景中所用素材调整变得更加容易。

使用方法

background-image:url(1.png),url(2,png),url(3.png);

图层的排序方法: 浏览器中显示时叠放的顺序是从上往下指定的，第一个图片放在最上面，最后指定的放在下面

Css3的变形功能

transform属性

介绍:
在Css3中可以利用transform属性来实现文字或图像的旋转、缩放、倾斜、和移动。但是需要做兼容性处理，如下

-webkit-transform: rotateX(60deg);
-moz-transform: rotateX(60deg);
-ms-transform: rotateX(60deg); /*IE9*/
-o-transform: rotateX(60deg);

rotate(旋转)：
- rotate(60deg);顺时针旋转 deg是Css3中的角度单位
  -webkit-transform: rotateX(60deg);
- rotateX(angle) rotateY(angle) rotateZ(angle)
  绕对应的轴进行3D旋转
- rotate3D(X,Y,Z,deg) 定义 3D 旋转
scale(缩放)：
transform:scale(值) 值所指的是缩(小)放(大)倍率如果值为负数并没有效果纯属无聊
- scale(x,y) 使元素在x轴 y轴方向同时缩放
- scaleX(.5) 你应该懂得
- scaleY(.5) 同上
skew(倾斜)
transform:skew(deg) 倾斜角度
- skew(x,y) 元素在水平和垂直方向上同时倾斜只有一个参数时，只在水平方向上倾斜
- skewX(x) 元素仅在水平方向倾斜
- skewY(y) 元素在垂直方向倾斜
translate(值) 指定移动的距离负值即反方向移动
- translate(x,y);在x轴和y轴同时移动，只有一个参数时，仅在水平方向移动;
- translateX(x);x轴方向移动
- translateY(y);y轴方向移动
transform-origin 改变元素基点
属性使用：transform-origin:bottom;
各个基点参考如图：
对一个元素使用多种变形的方法：
transform：方法一，方法二，方法三..;
/*同样也需要做兼容性处理*/ transform: translate(50px),rotate(60deg),scale(2);
Css3的动画功能
demo
transition 支持从一个属性平滑过渡到另外一个属性

语法:

transition: property duration timing-function delay;

transition 主要包含四个属性值:
执行变换的属性: transition-property,属性规定应用过渡效果的CSS属性的名称。(当指定的CSS属性改变时，过渡效果将开始)值有三个类型:

A、none 没有属性会获得过渡效果。
B、all所有属性都将获得过渡效果。
C、property定义应用过渡效果的CSS 属性名称列表，列表以逗号分隔。

变换延续的时间: transition-duration规定完成过渡效果需妻花费的时间(以秒或毫秒计》，默认值0没有效果

在延续时间段，变换的速率变化transition-timing-function
值:

A. ease:  (逐渐变慢) 默认值，ease函数等同于贝塞尔曲线(0.25,0.1,0.25,1.0).  
B. linear:  (匀速)，linear 函数等同于贝塞尔曲线(0.0,0.0,1.0,1.0).  
C. ease-in: (加速)，ease-in 函数等同于贝塞尔曲线(0.42,0,1.0,1.0).  
D. ease-out:  (减速)，ease-out 函数等同于贝塞尔曲线(0,0,0.58,1.0).  
E. ease-in-out :  (加速然后减速)，ease-in-out 函数等同于贝塞尔曲线(0.42,0,0.58,1.0)  
F. cubic-bezier(n,n,n,n)在cubic-bezier 函数中定义自己的值。可能的值是0 至1之间的数值。

animation 支持通过关键帧的指定来在页面上产生更复杂的动画效果

用 transition和Animations的区别 :

transition和Animations的区别在于，transition只能通过指定属性的开始值与结束值，然后通过两属性值之间进行垂滑过渡的方式来实现动画效果，所以transition不能实现复杂的动画效果，而Animations功能是是通过关键幀以及每个关键帧中的属性值来实现更为复杂的动画效果。

Animations的使用方法:
参考我的飞机Demo更好哦

@-webkit-keyframes 关键帧合集名称{  
    创建关键帧的代码  
}  
0%~100%{  
    本关键帧中的样式   
}   
// 关键帧创建好了之后，还要在元素的样式中使用该关键帧。方法如下: 
元素{
  - webkit-animation-name :关键帧合集名称 ;
  - webkit-animation-duration:5s ;
  - webkit-animation-timing-function :linear;-webkit-animation-iteration-count:infnite  
}
```css
  -webkit-animation-name 指定合集名称，  
  -webkit-animation-duration 整个动画执行完成需要的时间，  
  -webkit-animation-timing-function 实现动画的方法
  
  -webkit-animation-iteration-count 属性的属性值设定为某个整数值，那么这个动画播放的次数就等于这个整数值(infinite是无限循环播放)。

实现动画的方式:
A、linear: 匀速进行.
B、ease-in: 开始速度很慢，然后沿曲线进行加快，
C、ease-out: 开始速度很快，然后沿着曲线进行减速.
D、ease: 开始时速度很快，然后沿着曲线进行减速，然后再沿着曲线加速，
E、ease-in-out: 开始时速度很慢，然后沿着曲线进行加速，然后再沿着曲线减速.

也可以以合集的形式进行样式书写：

animation: name duration timing-function delay iteration-count direction;

Css3之Flex布局

2018年05月02日 898 字大概 4 分钟

Flex(flexible box) 弹性布局

传统的布局解决方案，基于盒模型，通过 css中的display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

概念
- 任何容器都可以设为flex布局
- 采用flex布局的元素即为flex container，其子元素为容器成员(flex item)
- 设为flex布局以后，子元素的float/clear/vertical-align属性将会失效
主轴和交叉轴
- 容器默认存在水平主轴main axis和垂直的交叉轴cross axis
- flex-item排列的方向是主轴
flex-container容器属性
- flex-direction决定主轴的方向(同时也是flex-item的排列方向)
  
  flex-direction: row | row-reverse | column | column-reverse;
  - row（默认值）：主轴是水平方向，flex-item水平从左往右排列
  - column : 主轴呈垂直方向,从上边沿向下排列
  - reverse参数: 将起始与终点进行互换
- flex-wrap 属性定义如果在一条轴线上排不下，换行的规则
  
  flex-wrap：nowrap | wrap | wrap-reverse
  - nowrap（默认值）：不换行
  - wrap : 自然换行直接将多余的元素从下一行开始排列
  - wrap-reverse: 将第一行排列到下方
- flex-flow 是flex-direction和flex-wrap的简写，默认值为row nowrap
- justify-content:定义flex-item在主轴main-axis上的对齐方式
  
  justify-content: flex-start | flex-end | center | space-between | space-around
  - flex-start（默认值）：左对齐；
  - flex-end右对齐；
  - center居中；
  - space-between：两端对其，flex-item间的间隔距离相等
  - space-around：每个flex-item两侧的间隔相等，相当于设置左右margin值相等
- align-items : 定义flex-item在交叉轴的对齐方式
  
  align-items: flex-start | flex-end | center | baseline | strecth。五个取值与交叉轴方向有关
  - flex-start|flex-end|center和flex-direction一样，只不过是在交叉轴起点、终点、中点对齐；
  - baseline：flex-item的第一行文字的基线对齐
  - stretch（默认值）：如果flex-item没有设置高度或者值为auto，将占满整个容器高度
- align-content：如果容器内出现多跟轴线（即出现wrap），定义主轴在交叉轴上的对齐方式，只有一根轴线时不起作用
  
  align-content: flex-start | flex-end | center | space-between | space-around | stretch
  - stretch（默认值）：轴线沾满整个交叉轴
  - space-between：与交叉轴两端对齐，轴线间的间隔平均分布
  - space-around：每根轴线两侧的间隔相等
  - flex-start：与交叉轴起点对其
flex-item项目的属性
- order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
- flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大.
  
  如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
- flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。负值对该属性无效。
- flex 属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
  
  flex: none | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ]
- flex-basis
- align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
  
  align-self: auto | flex-start | flex-end | center | baseline | stretch;

Vue组件通信

组件

通信类型

父组件与子组件通信

排序

算法题

Webpack 相关

entry 入口

output 出口

resolve

devServer

module

rules

loader

plugins

optimization 优化

LazyLoad(懒加载)

懒加载

Css3属性

text-shadow属性

使用方法

background-size属性

介绍:

使用方法

在一个元素中显示多个背景图片

介绍:

使用方法

Css3的变形功能

transform属性

Css3的动画功能

transition 支持从一个属性平滑过渡到另外一个属性

animation 支持通过关键帧的指定来在页面上产生更复杂的动画效果

Css3之Flex布局

Flex(flexible box) 弹性布局

`transition` 支持从一个属性平滑过渡到另外一个属性