- 博客(28)
- 收藏
- 关注
RSS订阅原创 项目打包和自动化部署
在传统的开发模式中，开发的整个过程是按部就班就行：但是这种模式存在很大的弊端：DevOps是Development和Operations两个词的结合，将开发和运维结合起来的模式：伴随着DevOps一起出现的两个词就是持续集成和持续交付(部署)：持续集成CI：持续交付和持续部署：云服务器我们可以有很多的选择：阿里云、腾讯云、华为云。但是在我们的课程中，我选择目前使用更加广泛的阿里云来讲解：我们需要注册阿里云账号https://aliyun.com/注册即可，非常简单购买云服务器其实是购买一个实例。1.来到控制
2022-08-07 15:44:57
282
原创 vue实现抽奖大转盘
1. 实现原理实际解决用户需求：当用户点击抽奖时，会请求接口获取中奖的奖品信息，前端根据中奖编号进行修改css样式，让转盘旋转，调整角度对应后端返回的奖品。如果抽奖有多次机会的话，每次需要抽奖结束后需要重置角度2.html 代码.wheel img.turntable( src='@/assets/img/second-anniversary/turntable.png' :style="{transform:'rotate('+rotateAngle+'deg)',tra
2021-08-03 16:21:22
2978
2
原创 eslint下载和安装
1.下载点击扩展然后输入eslint就可以了2. 配置安装好就可以可以看到这行代码copy到setting.json配置文件中点击图中的按钮选择设置点击打开配置文件复制代码就可以了3.最后看下启动eslint没有（你的vue项目中必须安装了eslint的包可以再package.json查看）注意解释一下文中可能还有一些细节没有解释到位，不清楚的可以评论或者私信我...
2020-12-04 15:57:35
1438
1
原创 分享两种常见的解决if-else嵌套的方法
分享两种常见的解决if-else嵌套的方法1.三目运算符-比较适合嵌套层数少而且没有太多逻辑的判断语句2.利用逆向思维逻辑语句“！”来减少嵌套层次注意解释一下1.三目运算符-比较适合嵌套层数少而且没有太多逻辑的判断语句// 立交交易使用if-else嵌套的方法 gotoTrade() { let isApp = true if (isApp) { window.location = 'https://www.baidu.c
2020-12-04 15:29:32
1684
原创 js中的事件处理模型 - 事件冒泡，捕获
事件冒泡A结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上）事件捕获A 结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素。（自顶向下）B IE没有事件捕获触发顺序：先捕获，后冒泡focus, blur, change, submit, reset, select等事件没有冒泡取消冒泡A: w3c标准event.stopPropagation()但不支持ie9一下B： IE独有event.can.
2020-07-27 13:24:32
127
原创 js中的常见事件
ele.onxxx = function(event){}兼容性很好，但是只能绑定一个事件基本等同于写在html行间程序this指向domobj.addEventListener(type,function(){},false)IE9以下不兼容，可以绑定多个事件程序this指向domobj.attachEven(on+type,fn)IE独有，一个事件可以绑定多个处理程序程序this指向window封装一个方法解决绑定兼容性问题function addEvent(elem,type.
2020-07-27 13:02:54
92
原创 js中的定时器
setIntervalvar delay = 1000var timer = setInterval(function(){console.log(a)//会每隔1秒打印一次a},delay)//当delay改变时没有用，定时器只有第一次timer有效clearInterval(1)//清除定时器的方法setTimeoutvar delay = 1000var timer = setTimeout(function(){console.log(a)//只打印一次a},delay.
2020-07-27 12:34:10
97
原创 vue中常见前端面试题
vue组件之间的传值（1）父组件向子组件传递数据【父组件部分】在调用组件的时候，使用v-bind将要传递给子组件值的自定义属性和数据源里的变量进行绑定<子组件 ：自定义属性名 = ‘数据源里的变量名’></组件名>`在这里插入代码片`【子组件部分】使用props 从父组件里获取想要传递给子组件的值（使用自定属性绑定数据源）props：['自定义属性名']在props中添加了元素之后，可直接使用，不需要再data中再添加变量（2）子组件向父组件传值【父组件.
2020-07-19 22:27:57
166
1
原创 v-model的使用
表单控件在实际开发中是非常常见的，特别是对于用户信息提交，需要大量的表单vue中使用v-model指令来实现表单元素和数据的双向绑定<input type = 'text' v-model='message'><h1>{{message}}</h1>data(){return {message:""}}v-model可以看成v-bind和v-on的结合<input type = 'text' :value='message' @input.
2020-07-16 17:50:52
313
原创 vue中那些处理数组的方法是响应式的
因为vue是响应式的，所以当数据发生改变，vue会自动检测数据变化，进行视图更新vue中包含一组观察数据编译的方法，使他们改变数组也是也会触发视图更新push（）pop（）shift()unshift()sort()reserve()splice()methods:{updateData(){//push方法this.arr.push(12)//popthis.arr.pop()//shiftthis.arr.shift()//sortthis.arr.sort().
2020-07-16 17:13:08
489
原创 vue中的修饰符（v-on,v-model)
v-on的修饰符.stop–>调用event.stopPropagation()阻止冒泡<button @click.stop = 'dothis'><button>.prevent–>调用event.preventDefault()阻止默认行为 <button @click .prevent = 'doThis'><button> //阻止默认行为，没有表达式 <form @submit.prevent><
2020-07-16 16:58:53
288
原创 vue的特点以及常用的标签
特点1.vue是一个渐进式框架，什么是渐进式呢？渐进式意味着你可以将vue作为你应用的一部分嵌入其中，带来更丰富的交互体验或者如果你希望将更多的业务逻辑使用vue实现，那么vue的核心以及其生态系统比如core+vue+vuex，也可以满足你各种各样的需求2.vue的特点和一些常见web高级功能解耦视图和数据可复用的组件前端路由技术状态管理虚拟domvue中常用标签v-fordata(){return {arr:['美人鱼','少林足球','唐伯虎点秋香']}}&
2020-07-16 16:33:11
769
原创 js中常见的报错类型和“use strict“模式兼容问题
js常见的六种报错类型EvalError: eval()的使用与定义不一致RangeError: 数值越界ReferenceError： 非法或不能识别的引用值SyntaxError： 发生语法解析错误TypeError： 操作数类型错误URLError： url处理函数使用不当可以利用try{}catch（）{}进行错误捕捉使用try。。catch后如果报错不会影响代码执行es5严格模式（’use strict’)1.‘use strict’不在兼容es3的一些不规则语法，使用全
2020-07-14 20:41:35
800
原创 js中的数组和数组类
数组数组的定义·//new Array()var a = new Array(10)console.log(a) // [empty*10]//字面量的方式var arr = [10]console.log(arr) //10数组的读写var arr = [1,2,3,4]//不可以溢出读console.log(arr[11]) //arr[5] = 5 //可以溢出写数组常用的方法会改变原数组push//在数组的最后一位添加一个var arr = [1,2
2020-07-14 16:05:25
141
原创 js如何实现深度克隆
如何实现深度克隆遍历对象for(var prop in obj)判断是不是原始值 typeof(obj[prop]) == object判断引用值是数组还是对象instanceof toString constructor递归function deepClone(origin,target){var traget = target || {},toStr = Object.prototype.toString,arrStr = '[object Array]'for(var prop
2020-07-13 20:47:08
160
原创 如何确定js中this指向谁
this函数预编译过程 this --> windowfunction test(c){//var this = Object.create(test.prototype)//{//__proto__:test.prototype//}var a = 234;function b() {}}//预编译AO {arguments:[1],this: window,c: 1,a: undefined,b: function(){}}test(1)全局作用域里
2020-07-13 20:21:16
230
原创 js中的继承模式，命名空间，对象枚举
继承模式传统模式 -->原型链（过多的继承了没用的属性）Grand.prototype.lastName = 'wu'function Grand() {}var grand = new Grand()Father.prototype = grandfunction Father(){this.name = 'hehe'}var father = new Father()Son.prototype = fatherfunction Son() {}var son = new
2020-07-13 16:46:39
101
原创 对js中的原型，原型链，call，applay的理解
原型定义：原型是function对象的一个属性，它定义了构造函数制造出的对象的公共祖先，通过该构造函数产生的对象，可以继承该原型的属性和方法，原型也是对象Person.prototype.name = '小明'Person.prototype.say = function(){console.log('hello word')}function Person(){}var person = new Person()console.log(person.name) //小明person.
2020-07-13 00:45:15
201
原创 对js中的对象和包装类的理解
1.什么是对象？对象就是一个事物拥有自己的属性和功能比如说车是一个对象他有自己的颜色，名字，大小，价格这些属性，他还有自己的功能：能跑，能载人（个人理解的，可能不到位）2.对象创建的方式var obj = {} //plainObject 对象字面量/对象直接量var obj = new Object() //1.系统自带的构造函数2.自定义function Person(){} //构造函数大头峰命名规则var person = new Person()3.构造函数的内部原理在函数体最
2020-07-12 23:50:07
170
原创 如何解决由闭包引起的打印出来的值不是自己想要的值
1.我们先看一下闭包引起的问题function test() {var arr = []for(var i = 0; i < 10; i++){arr[i] = function () {console.log(i + " ")}}return arr}var arr = test()for(var i = 0; i < 10; i++){arr[i]()}//输出10个102.分析一下造成这种情况的原因：由于arr中的函数执行时test中的i=10,因此他们打印出
2020-07-12 23:10:41
211
原创 js中的作用域如何理解
作用域1.[[scope]]:每个javascript函数都是一个对象，对象中有些属性我们可以访问，但有些不可以，这些属性仅供JavaScript引擎存取，[[scope]]就是其中一个。[[scope]]指的就是我们所说的作用域，其中存储了运行期上下文的集合。2.作用域链：[[scope]]中所存储的执行期上下文对象的集合，这个集合呈链式链接，我们把这种链式链接叫做作用域链。`function a(){function b(){var bb =234;aa=0;}var aa = 123
2020-07-12 16:06:27
85
原创 js的预编译做了哪些事情
预编译js运行的三部曲：1语法解析：总体扫描一遍一遍看一下是不是有低级语法错误2.预编译：函数执行前会进行预编译3.解释执行：一行一行的进行编译我们主要说一下预编译//预编译//变量未经声明就赋值，此变量就为全局变量function a(){var a = b =20console.log(a) //20}console.log(b) //20console.log(a) //报错//变量 声明提升console.log(a) //undefinedvar a = 123/
2020-07-12 15:14:11
336
原创 js中的函数以及特殊函数立即执行函数
1.函数的声明有两方式function test(){} //函数声明var test = function（）{} //函数表达式，这是我们常用的2.函数组成形式函数有函数名，参数（实参，形参），返回值组成function test(n){//test 函数的名称 n函数的形参n++return n //n函数的返回值，返回后后面的语句不再执行}test(2) //2 函数的实参3当函数的实参数量大于形参时可以通过arguments来获取var test = function（a
2020-07-12 14:14:14
101
原创 js中显示类型转换和隐式类型转换
显示类型转换Nmber（）调用这个方法会转换成数字类型Number('123') //123Number('123a') //NaNNumber('undefined') //NaNNumber(false) // 0Number(true) //1Number(null) //0parseInt()转换成整数并取整直接舍去小数parseInt(123.12) //123parseInt(true) //NaNparseInt('123a') //12
2020-07-12 12:26:58
351
原创 斐波那契数列和阶乘
我会用两种方法来实现斐波那契数列和阶乘一种是for循环的形式另外一种是常见的递归1.斐波那契数列for循环的方式//斐波那契数列1，1，2，3，5，8，13function(n){var first = 1,second = 1,third;if(n===1||n===2){ //如果n=1或n=2直接返回1return 1}``for(var i =1;i<=n;i++){third = first + second //下一位等于前两位的和first = secondse
2020-07-12 03:17:23
630
原创 javascript中常见的数据类型和运算符
javascript中常见的数据类型和运算符原始值和引用值原始值引用值运算符比较运算符逻辑运算符原始值和引用值原始值js中的原始值有6种：undefinded,number,string,boolean,null,symbol他们以栈的形式存储。（Symbol是ES6新增的一种数据类型，表示独一无二的值，Symbol最大的用途是用来定义对象的唯一属性名）引用值js中常见的引用值有object，function，array，date，RegExp，error等他以堆的形式存放。运算符1.+ 当加
2020-07-12 02:49:47
145
原创 vue如何实现点击导航栏按钮切换页面后,导航栏按钮背景也跟着切换.
效果展示图html代码我用了pug模板，所以只需要写但标签就可以了<template lang="pug"> .record img.title(src="@/assets/img/invite-page/mgn/invite-title.png") .nav-bar ...
2020-01-02 17:28:22
2663
原创 vue使用swiper实现中间完整两边半个轮播
vue中使用swiper实现中间完整两边半个的轮播图下载swiper编写页面代码展示效果图下载swipercnpm install swiper编写页面代码<template> <div class="swiper-container"> <div class="swiper-wrapper"> <div v-for="(it...
2020-01-02 16:56:28
2260
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人