- 博客(23)
- 收藏
- 关注
RSS订阅原创 JS中this指向问题
JS中this指向问题默认绑定全局环境下的this指向了window<script> console.log(this)</script>函数独立调用,函数内部的this也指向了window<script> function fn() { console.log(this) } fn()</script>被嵌套的函数独立调用时,this默认指向了wi
2021-04-01 11:59:57
70
原创 JS中offset、client、scroll用法
offset、client、scroll用法offset定位父级offsetParent与当前元素最近的经过定位的父级元素元素自身有fixed定位，offsetParent是null元素自身无fixed定位，但有其他定位，offsetParent是body元素自身无定位，父级元素存在定位，offsetParent是以最近的经过定位的父级元素body元素的offsetParent是null可以通过element.offsetParent查看元素的定位父级offsetWidth和off
2021-04-01 11:59:26
105
原创 JS面向对象
JS面向对象new命令原理创建一个对象作为将要返回的对象实例将这个空对象的原型对象——proto——指向了构造函数的prototype属性对象将这个实例对象的值赋值给函数内部的this关键字执行构造函数体内的代码创建对象的方式字面量<script> // 字面量 const obj={ name:'test', age:22, arr:[1,2,3], sayHello:function(){
2021-04-01 11:58:45
54
原创 JS执行期上下文
JS执行期上下文例子console.log(a) //undefined 1console.log(b) //undefined 2var a = 1;var b = 2;function fn(x) { console.log(a) //undefined 5 var a = 10 console.log(a) //10 6 function bar(x) { console.log(a)
2021-03-31 20:54:10
86
原创 JS防抖节流
JS防抖节流限制函数的执行次数防抖通过setTimeout的方式，在一定时间间隔内，将多次触发变成一次触发防抖函数function debounce(fn, timer) { let t = null return function () { //第一次点击 t=null为false firstClick为true let firstClick = !t // 清空定时器
2021-03-31 20:53:27
51
原创 JS字符串常用的方法
JS字符串常用的方法charAt从一个字符串中返回指定的字符语法：str.charAt(index)<script> let str = 'sadassa' console.log(str.charAt(1))//a</script>charCodeAt返回索引处字符的ASCII码语法：str.charCodeAt(index)<script> let str = 'sadas
2021-03-31 20:50:52
54
原创 JS数组常用方法
JS数组常用方法toString返回一个字符串，表示指定的数组及其元素语法：arr.toString()<script> const arr = [3, 7, 5, 8, 1, 0, 5] console.log(arr.toString())//3,7,5,8,1,0,5</script>join将一个数组或一个类数组对象的所有元素按自己的设定连接成一个字符串并返回这个字符串语法：arr.join([sep
2021-03-31 20:49:52
70
原创 ES6学习
ES6js数据类型基本数据类型:String、Number、Boolean、Symbol、undefined、null引用数据类型:Objectlet可以先声明再赋值变量不能重复声明块级作用域暂时性死区只要块级作用域内存在let或const命令，它所声明的变量就“绑定”这个区域，不再受外部的影响<script> var tmp = 123; if (true) { tmp = 'abc' // Reference
2021-03-20 17:02:05
48
原创 vue基础
vue介绍什么是vuevue是一个前端开发框架，用于降低UI复杂度vue的特点渐进性响应性组件化环境配置node.js官网https://nodejs.org/zh-cn/检查是否安装成功node --version配置淘宝镜像npm包的服务器在国外，下载速度会很慢，配置淘宝镜像（国内）终端中输入npm config set registry https://registry.npm.taobao.org检查是否配置成功npm config
2021-03-20 16:59:09
52
原创 vue项目上线相关配置(node.js)
通过node创建web服务器// 安装expressnpm i expressconst express = require('express')const app = express()// 托管打包后的静态资源app.use(express.static('./dist'))app.listen(80, () => { console.log('server running in http://127.0.0.1:80')})开启gzip配置// 安装插件compr
2020-11-03 22:36:27
119
原创 vue项目优化(首页内容定制)
首页内容定制不同的打包环境下，首页内容可能会有所不同。我们可以通过插件的方式进行定制。vue.config.jsmodule.exports = { // 修改webpack默认打包入口 chainWebpack: config => { // 生产模式(发布模式) config.when(process.env.NODE_ENV === 'production', config => { config.entry('app').clear().add(
2020-11-03 22:08:01
217
原创 vue项目优化(通过externals加载外部CDN资源)
在发布模式下，使用externals配置项，可以使所配置的插件不会被打包进js文件中，同时我们需要在public/index.html文件的头部，添加这些未被打包的CDN资源引用vue.config.jsmodule.exports = { // 修改webpack默认打包入口 chainWebpack: config => { // 生产模式(发布模式) config.when(process.env.NODE_ENV === 'production', config =
2020-11-03 21:56:24
669
1
原创 vue项目优化(配置webpack，为开发模式与发布模式(生产模式)指定不同的打包入口)
为开发模式与发布模式(生产模式)指定不同的打包入口默认情况下，Vue项目的开发模式与发布模式，共用同一个打包的入口文件(即src/main.js)。为了将项目的开发过程与发布过程分离，我们可以为两种模式，各自指定打包的入口文件，即：1.开发模式的入口文件为src/main-dev.js2.发布模式的入口文件为src/main-prod.js通过chainWebpack来自定义webpack的打包配置(链式编程)通过vue-cli3.0工具生成的项目，默认隐藏了所有的webpack的配置项通过配
2020-11-03 21:36:50
1033
原创 vue项目优化（移除console）
在执行build期间，移除所有的console安装开发依赖npm install babel-plugin-transform-remove-console --save-dev配置babel.config.js// 这是项目发布阶段需要用到的babel插件const prodPlugins = []// 判断，在生产模式下，去除consoleif (process.env.NODE_ENV === 'production') { prodPlugins.push('transform-
2020-11-03 21:18:20
264
原创 vue中使用嵌套路由(history方式),刷新页面，出现白屏
vue中使用嵌套路由(history方式),刷新页面，出现白屏路由配置：export default { routes: [{ path: "/", name:"Home",//使用别名意味着以后修改path时，不需要去页面中修改路径 component: () => import("@/views/Home"), }, { path: "/channel/:id", name: "ChannelNews",
2020-09-12 13:56:58
1254
1
原创 使用vue-cli中遇到的问题
使用vue-cli脚手架遇到的问题版本：@vue/cli 4.54运行npm run build之后，打开dist文件夹下的index.html文件，出现以下错误解决方法新建一个vue.config.js文件module.exports = { publicPath: './'}
2020-09-08 20:28:19
100
原创 todo列表实例
vue官方文档上的小实例v-on:submit.prevent=“addNewTodo”,指在该表单中的任何提交按钮都可以触发该事件is=“todo-item” attribute。这种做法在使用 DOM 模板时是十分必要的，因为在 ul元素内只有 li元素会被看作有效内容。这样做实现的效果与 todo-item相同，但是可以避开一些潜在的浏览器解析错误。vm.$emit( event, arg ) //触发当前实例上的事件<!DOCTYPE html><html lang=
2020-08-30 22:03:45
371
原创 vue指令动态参数issue
vue指令动态参数<div id="app"> <!-- 动态参数 --> <a v-bind:[attributeName]='url'>...</a> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> const vm=new Vue({ el:'#app',
2020-08-29 21:56:08
439
2
原创 node学习笔记
Node介绍为什么要学习node.js企业需求具有服务器端开发经验更好前端后端全栈开发工程师(全干)基本的网站开发能力 服务端 前端 运维部署Node.js是什么Node.js构建于chrome的v8引擎之上node.js不是一门语言node.js不是库、不是渲染node.js是一个javascript运行时的环境简单来讲就是node.js可以解析和执行javascript代码以前只有浏览器可以解析执行javascript代码也
2020-08-28 10:52:54
915
原创 箭头函数
箭头函数ES6中允许使用箭头=>定义函数let f = v => v;//等同于let f = function (v) { return v;}function foo(a, b) { return a + b + '10'}//等同于let foo = (a, b) => a + b + '10'// 一个参数let add = value => value;// 两个参数let add = (value, value2) => valu
2020-07-02 16:35:52
111
原创 js中for-in、for-of、for-each用法
js中for-in、for-of、for-each用法for-in可以遍历对象，或者数组 let arr=[1,2,3,4,5]; let obj={ name:'mei', age:22, sex:'男' } //遍历数组 for(let i in arr){ consloe.log(i)//这里输出的是数组arr当前的下标0 1 2 3 4 consloe.log(arr[i])//这里输出的就是数组arr里边的每个元素 1 2 3 4 5 } //遍历对象
2020-07-02 15:56:22
234
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人