for_422_1

vue-cli：

安装

npm install -g vue-cli  //全局安装vue-cli 

vue -V  //查看版本号

vue init webpack name   //选择webpack模板生成项目目录

npm run dev  //以开发模式运行项目

项目文件认识

build   // 编译配置文件，一般不用管

    |-build.js

    |-check-versions.js

    |-logo.png

    |-utils.js

    |-vue-loader.conf.js

    |-webpack.base.conf.js

    |-webpack.dev.conf.js

    |-webpack.prod.conf.js

    |-webpack.test.conf.js

config  // 项目基本设置文件夹

    |-dev.env.js    // 开发配置文件

    |-index.js  // 配置主文件

    |-prod.env.js   // 编译配置文件

node_modules    // 项目依赖包文件夹

src // 我们的项目的源码编写文件

    |-assets    // 初始项目资源目录，回头删掉

    |-components    // 组件目录

    |-HelloWorld.vue    // 测试组件

    |-router    // 路由配置文件夹

    |-index.js  // 路由配置文件

    |-App.vue   // APP入口文件

    |-main.js   // 主配置文件

static  // 资源放置目录

index.html  // 项目入口文件

package.json    // 项目依赖包配置文件

杂项

组件导入导出

import Search from "./pages/Search"   //组件导入

export default {
        name: "Footmsg",
      props:{
          msg:{
            type:String,
            default:''
          }
      }
    }                                 //组件导出，将组件暴露在全局

css样式定制（只在当前组件中起作用）

<style scoped>

</style>

vue进行dom操作

this.$refs.wrap.style.transition='left 1s';  //使用refs来操作dom

对于offsetWidth始终保持整数造成轮播图出现移动距离偏移的解决

getBoundingClientRect().width.toFixed(2)    //获取浮点数宽度

关于vue生命周期中created()和mounted()的区别

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

Es6面向对象时实现一个类：

class Queue {
    
    constructor(){

          //这里是构造函数
    }
    push(){

          //这里是挂载在原型上的方法，类似于原来的this.prototype.push=function(){}
    }

}

函数中传参时arguments，类似于数组的存在。可以使用遍历数组的方法遍历每个元素，内部为键值对的结构

{ '0': 1, '1': 2, '2': 5, '3': 4, '4': 8, '5': 5 }

js双栈实现队列

知识储备
- 栈：栈又称为堆栈，它是一种运算受限的线性表，其限制是仅允许在线性表的固定一端（表尾）进行插入、删除和读取元素等运算，不允许在其他任何位置进行运算，比一般线性表运算更加简单和方便。
- 队列：队列是一种先进先出（First In First Out）的线性表，简称FIFO。允许插入的一端称为队尾，允许删除的一端称为队头。
实现原理
- 实现思路
  - 当检测到入队操作时，将元素压入栈stack1
  - 当检测到出栈操作时：
    - 如果stack2不为空时，直接pop出stack2中元素就行。
    - 如果stack2为空时：
      - stack1为空时，打印“队列为空，请勿操作”
      - stack1不为空时，使用变量b存下stack1的长度，然后stack2依次push（）stack1pop（）的元素即可。
- 遇到的问题
- 实现调用一次push方法，依次将多个元素压入栈（闭包解决）
```
let str = arguments;

let that=this;      //用来保存this指向  不然this会指向window

(function(){

    for(let i=0;i<str.length;i++){

        that.Instack.push(str[i])

     }

 })()  //闭包
```

快速排序

原理

取数组中一个数作为基准值并将其取出（这里我选取中间值作为基准值）
```
let centre_num=arr.splice(centre,1)[0];
```

将数组中剩下元素依次与基准值进行比较，较大值进入right数组，较小值进入left数组。

for(let i=0;i<arr.length;i++){
        if(arr[i]<centre_num){
            left.push(arr[i]);
        }else{
            right.push(arr[i]);
        }
    }           //将数组生于元素与基准值比较，较小的放在left数组中，较大的放在right数组

递归调用quickSort函数，依次对排出来的left，right数组进行排序，最后将排序结果拼接就实现了排序。

return quickSort(left).concat(centre_num,quickSort(right));                     
            //递归调用quickSort函数，并将数组的三部分拼接

对传入数组进行判断，若长度为1，则直接返回。

if(arr.length<=1){
        return arr;             //当判断传入数组为空时，直接返回原数组
    }

二路归并实现排序

原理图
初始化merge（）和getDivide（）两个函数

getDivide（）用来执行“ 分 ”过程，将数组分割成片段，最终成为长度为1的数组。

let getDivide=(arr)=>{                  //定义getDivide函数用来将数组进行分开到长度为1的单位
    if(arr.length<=1){
        return arr;
    }
    let centre=Math.floor(arr.length/2);                //计算数组中间值的索引
    let left=getDivide(arr.slice(0,centre));
    let right=getDivide(arr.slice(centre));                 //使用slice将数组分为两部分
    return merge(left,right);           //调用merge()对分出的数组进行排序
};

merge（）用来执行“ 治 ”过程，对分割的数组进行排序与拼接。

let merge=(left,right)=>{                   //定义merge函数用来排序
    let result=[];
    while (left.length>0 && right.length>0){
        if(left[0]<right[0]){
            result.push(left.shift());
        }else{
            result.push(right.shift());
        }
    }
    return result.concat(left).concat(right);
};

vue-cli：

杂项

js双栈实现队列

快速排序

二路归并实现排序

猜你喜欢