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); };