gogopaner-CSDN博客

原创 vue事件修饰符温故

vue事件修饰符在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。.stop.prevent.capture.self.once.passive<!-- 阻止单击事件继续传播 --&g

2021-08-06 16:17:28 83

原创使用Object.defineProperty()和Object.getOwnPropertyDescriptor()方法实现深拷贝

使用Object.defineProperty()和Object.getOwnPropertyDescriptor()方法实现深拷贝下面展示一些内联代码片。var extend = function (to, from) { for (var property in from) { // hasOwnProperty那一行用来过滤掉继承的属性，否则可能会报错，因为Object.getOwnPropertyDescriptor读不到继承属性的属性描述对象。 if (!from.hasOwnPro

2021-03-31 10:55:02 355

原创伪数组转数组,apply&slice方法将类似数组的对象转换成数组

apply&slice方法将类似数组的对象转换成数组 // 利用数组对象的slice方法，可以将一个类似数组的对象（比如arguments对象）转为真正的数组。 Array.prototype.slice.apply({0: 1, length: 1}) // [1] Array.prototype.slice.apply({0: 1}) // [] Array.prototype.slice.apply({0: 1, length: 2}) // [1, undefined] A

2020-07-04 20:56:15 329

原创 new 命令的原理

new命令的原理var Vehicle = function (p) { this.price = p;};var v = new Vehicle(500);console.log( v.price ) // 500**1.创建一个空对象,作为将要返回的对象实例2.把这个空对象赋值给函数内部的 this3.把这个空对象的原型,指向这个构造函数的 prototype 属性 // v.proto === Vehicle.prototype4.开始执行构造函数内部的代码**// 如果构

2020-07-04 20:54:30 201

原创数组的链式使用

数组的链式使用// 数组方法之中，有不少返回的还是数组，所以可以链式使用。 var users = [ {name: 'tom', email: 'tom@example.com'}, {name: 'peter', email: 'peter@example.com'} ]; users .map(function (user) { return user.email; }) .filter(function (email) { return /

2020-07-04 20:51:21 644

原创属性描述对象,对象拷贝

属性描述对象// 默认值 { value: undefined, writable: true, enumerable: true, configurable: true, get: undefined, set: undefined } // 属性描述对象提供6个元属性。对象的拷贝var extend = function (to, from) { for (var property in from) { to[property] = fro

2020-07-04 20:49:29 2377

原创 Object 对象

Object 对象1.概述Object对象本身的方法Object.print = function (o) { console.log(o) }; // 上面代码中，print方法就是直接定义在Object对象上。Object的实例方法 Object.prototype.print = function () { console.log(this); }; var obj = new Object(); obj.print() // Object // ob

2020-07-04 20:43:52 148

原创 Vue全家桶-Vuex

1.Vue 概述1.1 组件之间共享数据的方式父向子传值: v-bind 属性绑定子向父传值: v-on 事件绑定兄弟组件之间共享数据: EventBus$on 接收数据的那个组件$emit 发送数据的那个组件1.2 Vuex 是什么Vuex 是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享1.3 使用 Vuex 统一管理状态的好处1. 能够在 Vuex 中集中管理共享的数据,易于开发和后期维护2. 能够高效地实现组件之间的数据共享,提高开发效率3.

2020-06-28 09:39:40 123

原创 Vue全家桶 - 项目优化上线

项目优化1.1 项目优化策略使用 NProgress 进度条 Loading 效果1. 安装依赖 npm i nprogress --save2. 引入 import NProgress from 'nprogress' import 'nprogress/nprogress.css'3. 在 request拦截器中,展示进度条 nprogress.start() 在 response 拦截器中,隐藏进度条 NProgress.d

2020-06-26 20:26:58 272

原创 Vue 服务器启动,本地启动,点击登录报错

服务器启动,本地启动,点击登录报错,显示跨域报错 CORS报错, 显示未设置 Allow-Header-Origin 未设置,可能并不是跨域问题使用webpack创建的vue项目，会有一个默认端口号: 8080服务器监听端口号设置的端口如果也是:8080,造成了端口冲突本地端口和服务器端口不能设置一致...

2020-06-17 10:26:45 370

原创 Vue全家桶-前端工程化(模块化)

前端工程化(模块化)1.模块化的相关规范1.1 模块化概述传统开发模式的主要问题 * 命名冲突 * 文件依赖通过模块化解决上述问题 * 模块化就是单独的一个功能封装到一个模块(文件)中,模块之间相互隔离,但是可以通过特定的接口公开内部成员,也可以依赖别的模块 * 模块化开发的好处:方便代码的重用,从而提升开发效率,并且方便后期的维护1.2 浏览器端模块化规范1.3 服务器端模块化规范 1. CommonJS 模块分为单文件模块与包1.4 大一统的模块化规

2020-06-14 19:11:12 567

原创 Vue全家桶-路由

1.路由的基本概念与原理1.1 路由1.后端路由 * 概念: 根据不同的用户 URL请求, 返回不同的内容 * 本质: URL请求地址与服务器资源之间的对应关系2. SPA (Single Page Application) * 后端渲染(存在性能问题) * Ajax前端渲染(前端渲染提高性能,但是不支持浏览器的前进后退操作) * SPA (Single Page Application) 单页面应用程序:整个网站只有一个页面,内容

2020-06-12 19:54:37 130

原创 Vue全家桶-前后端交互2

2.6 Promise 常用的 API 1. 实例方法 * p.then() 得到异步任务的正确结果 * p.catch() 获取异常信息 * p.finally() 成功与否都会执行(尚且不是正式标准) 2.对象方法 * Promise.all() 并发处理多个异步任务,所有任务都执行完成才能得到结果 var p1 = queryData('http://localhost:3000/a1') var p2

2020-06-11 14:18:31 218

原创 Vue全家桶- 常用特性(指令)

常用特性概览:1.表单操作inputtextareaselectradiocheckbox 表单域修饰符: number:转化为数值 trim:去掉开始和结尾的空格 lazy:将input事件转为change事件2.自定义指令 Vue.directive('focus',{ inserted : 在被绑定元素插入父节点时调用 inserted(el){ el:表示指令所绑定的元

2020-06-10 22:24:07 136

原创 Vue全家桶-组件化开发

1.组件化开发思想* 标准* 分治* 重用* 组合组件化规范: Web ComponentsWeb Components 通过创建封装好功能的定制元素解决问题2.组件的注册方式2.1 全局组件注册语法Vue.component(组件名称,{data:组件数据,(函数,return 对象)template:组件模块内容})用法:<组件名称></组件名称>2.2 组件注册注意data 需要为函数,保证每个数据相互独立组件模板的内容必须是单个的根源组

2020-06-10 22:21:50 195

原创 Vue全家桶-前后端交互

1.前后端交互模式1.1 接口调用方式* 原生ajax* 基于jQuery的ajax* fetch API* axios1.2 URL 地址格式1.传统形式的URL格式: scheme://host:port/path?query#fragment协议://域名:端口/路径?参数#锚点(哈希Hash)2.Restful形式的URLHTTP请求方式GET 查询POST 添加PUT 修改DELETE 删除符合规则的URL地址http://www.hello.com/books/

2020-06-10 22:20:38 287

gogopaner的博客