如梦灬初醒-CSDN博客

原创 vue拦截

一、路由拦截在项目中，有些页面往往需要登录后才可以浏览，有些页面则不需要，那么我们就可以通过路由拦截进行处理。首先，需要对router进行修改，如下： import Vue from ‘vue’; import Router from ‘vue-router’; Vue.use(Router); const router = new Router({ { path: ‘/home’, name: ‘Home’, component: () => import(’@/view/pc/homePage

2021-01-12 19:24:54 827

原创 Vue插槽

vue中的插槽————slot 什么是插槽？插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制插槽分类匿名插槽(也叫默认插槽): 没有命名,有且只有一个具名插槽: 相对匿名插槽组件slot标签带name命名的作用域插槽: 子组件内数据可以被父页面拿到(解决了数据只能从父页面传递给子组件) 怎么用插槽？默认情况下

2021-01-11 20:18:25 364

原创 Vue中 import的用法以及export和export default的区别和用法

import Vue是通过webpack实现的模块化，因此可以使用import来引入模块，例如： import Vue from 'vue' import Router from 'vue-router' import util from '@assets/js/util' 此外，你还可以在 bulid/webpack.base.conf.js 文件中修改相关配 resole:{ extensions:['.js','.vue','.json'], alias:{ 'vue$':'vue/dist/vue

2021-01-05 19:58:46 935 1

原创 vue-cli（vue脚手架）搭建项目

vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。这篇文章将会从实操的角度，介绍整个搭建的过程。避坑前言其实这次使用vue-cli的过程并不顺利，反复尝试几次都遇到以下这个报错：创建vue-cli工程项目时的报错在网上查了很多资料才发现原来是node版本过低的问题，虽然没有找到官方对这个“过低”问题的解释，但是根据国外网友的经验之谈，应该是至少使用node6，我将node4更新至node8之后确实没有报错了，顺利搭建。相关答疑帖：https:

2021-01-04 20:37:01 325

原创 VUE组件

VUE组件 1、什么是组件组件是vue里面最强的功能，可以扩展html，封装重用的代码。 2、vue组件的四种形式一、全局组件 1、全局组件含义和使用方法全局组件，就是所有 vue 实例中都可以使用的组件注册全局组件方法如下我们可以使用 Vue.extend() 函数，也可以不用，直接使用 Vue.component()来创建一个 Vue 的构造器 image.png 二、局部组件 1、局部组件含义和使用方法我们使用 Vue 对象的 components 属性来实现局部组件注册，顾名思义局部组件

2020-12-29 19:30:50 237

原创 vue 路由vue Router

在Web开发中，路由是指根据URL分配到对应的处理程序。对于大多数单页面应用，都推荐使用官方支持的vue-router。Vue-router通过管理URL，实现URL和组件的对应，以及通过URL进行组件之间的切换。本文将详细介绍Vue路由vue-router vue Router vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转；首先我们来

2020-12-28 19:48:04 347

原创 Vue自定义指令

Vue自定义指令简述 Vue除了提供了默认内置的指令外，还允许开发人员根据实际情况自定义指令，它的作用价值在于当开发人员在某些场景下需要对普通DOM元素进行操作的时候。注册自定义指令 Vue自定义指令和组件一样存在着全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过 Vue.directive( id, [definition] ) 方式注册全局指令，第一个参数为自定义指令名称（指令名称不需要加 v- 前缀，默认是自动加上前缀的，使用指令的时候一定要加上前缀），第二个参数可以是对象数据，也可以

2020-12-22 19:25:37 321

原创 vue修饰符

vue修饰符修饰符修饰符可以分为：表单修饰符事件修饰符鼠标按键修饰符键值修饰符 v-bind修饰符表单修饰符 .lazy 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：  <input v-model.lazy="msg" > .number 如果想自动将用户的输入值转为数值类型，可以给

2020-12-21 22:23:30 340

原创 Node Express模块

中间件概念在NodeJS中，中间件主要是指封装所有Http请求细节处理的方法。一次Http请求通常包含很多工作，如记录日志、ip过滤、查询字符串、请求体解析、Cookie处理、权限验证、参数验证、异常处理等，但对于Web应用而言，并不希望接触到这么多细节性的处理，因此引入中间件来简化和隔离这些基础设施与业务逻辑之间的细节，让开发者能够关注在业务的开发上，以达到提升开发效率的目的。中间件的行为比较类似Java中过滤器的工作原理，就是在进入具体的业务处理之前，先让过滤器处理。它的工作模型下图所示。 ...

2020-12-15 22:46:34 554

原创 Vue.js 模板语法

Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。插值文本数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值：文本插值 <div id="app"> <p>{{ message }

2020-12-15 20:09:10 203

原创 Node.js模块化

什么是模块？每个.js文件就是一个模块从npm上下载的一个包（可能是由多个文件组成的一个实现特定功能的包）也是一个模块任何文件或目录只要可以被Node.js通过require()函数加载的都是模块每个模块就是一个独立的作用域，模块和模块之间不会互相"污染" 我们可以通过编程的方式，指定某个模块要对外暴露的内容（其实就是指定require的返回值，通过require的返回值对外暴露指定内容）。这个对外暴露内容的过程也叫"导出" module.exports 为什么要进行模块化模块化胡特点方便代码

2020-12-08 18:46:43 214

原创 ES6class与ES3构造函数区别

es6中的class 发布于 2019-07-17 在面向对象的编程中,类是一个用于创建对象，为状态（成员变量）和行为实现（成员函数或方法）提供初始值的可扩展程序代码模板。在实际开发中，我们往往需要创建很多相同类型的对象，如用户、商品或其他对象。我们知道，通过new一个function可以创建一个对象，但在现代的JavaScript里，有一个更高级的“类”结构，对于面向对象编程提供了一些很不错的特性。 Class语法基本的class语法如下： class MyClass{ constructor(){}

2020-12-07 19:56:11 453

原创 Promise和async以及await

Promise Promise是什么？为什么有Promise？Promise是做什么的? Promise是什么？我们先在控制台输出console.dir(Promise)看看Promise 是什么由上可以清楚的知道Promise其实是一个构造函数，自己身上有all、reject、resolve这些方法，原型上有then、catch这些方法。这么说用Promise new出来的对象肯定就有then、catch方法。为什么有Promise？Promise有什么用? 为什么有Promise？因为异

2020-12-01 21:39:34 516

原创 ES6的迭代器和生成器

ES6的迭代器在es6之前，遍历数组都需要使用for循环，通过变量来跟踪数组的索引。如果多个循环嵌套就需要追踪多个变量，代码复杂度会大大增加，也容易产生错用循环变量的bug。 ES6 引入了一个全新的迭代器的概念，它提供一种方法能够顺序访问一个聚合对象中的各个元素，而不需要暴露该对象的内部表现。迭代器对象（iterator） ES6 对迭代器对象的定义是：实现了next方法的对象，其中next方法返回一个对象，这个对象包含两个属性，分别是done和value. Symbol.iterator ES6新增

2020-12-01 21:04:28 234

原创 templatejs使用总结

templatejs使用总结概述 template.js是一个基于 jquery 的前端 javascript 模板，插件主要解决数据渲染时的繁琐的数据处理。模板解决了html片段连接效率低下和繁琐的问题。看了很多相关的博客，博客内容几乎一样，很多知识点并没有详细的说明，对此经过两天的实验研究，把研究的结果记录下来。模板标签 1.{{each}}:双标签，用于遍历对象，数组或者 json 对象。 2.{{if}}:双标签，用于数据类型的判断，条件可以是表达式。 3.{{else}}:单标签，配合 {{i

2020-11-24 20:00:32 3790

原创 form表单序列化

form表单序列化 $ (“form”).serialize()和 new FormData($(’#uploadForm’)[0])都是序列化表单，实现表单的异步提交，但是二者有区别首先，前者，只能序列化表单中的数据，比如文本框等input select等的数据，但是对于文件，比如文件上传，无法实现，那么这时候，FormData就上场了，注意点如果name值相同的表单提交，该name值会出现多次，且对应不同表单的值表单元素没有name属性、含有disabled属性都会被禁止提交 seriali

2020-11-24 19:00:20 3476

原创移动端事件

移动端事件类型事件名称描述包含touches数组事件名称描述包含touches数组 touchstart 当用户在触摸平面上放置了一个触点时触发。事件的目标 element 将是触点位置上的那个目标 element 是 touchmove 当用户在触摸平面上移动触点时触发。事件的目标 element 和这个 touchmove 事件对应的 touchstart 事件的目标 element 相同，哪怕当 touchmove 事件触发时，触点已经移出了该 element 。是

2020-11-17 19:43:26 299

原创原生js的ajax请求

原生js的ajax请求传统方法的缺点: 传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽，由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。什么是ajax

2020-11-17 18:30:42 196

原创移动端web视口

三个视口移动前端中常说的 viewport （视口）就是浏览器显示页面内容的屏幕区域布局视口一般移动设备的浏览器都默认meta标签name 设置了一个viewport ，定义一个虚拟的layout viewport（布局视口），用于解决页面在手机上显示的问题。iOS, Android基本都将这个视口分辨率设置为 980px，所以pc上的网页基本能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。视觉视口虽然独立的布局视口很大程度上帮助了桌面网站过渡到手机上。但我们不能完全忽

2020-11-10 19:30:26 406

原创网页开发的尺寸单位 px，百分比，em，rem

网页开发的尺寸单位平时写pc端页面时，一般是px作为单位，遇到一些比较复杂的需要定位的也会夹杂使用百分比;但是在移动端时候px很容易布局就会乱，如果使用的是相对单位比如 em，rem 下面就说他们之间的区别单位与区别： px：像素，相对于屏幕分辨率而言的，简单来说就是平时我们写静态页面时用px作单位，但是在firefox/chrome会发现我们的布局发生了变化；百分比：这比较适合块状的页面设计，但是他相对于不同屏幕而言的，比如经常在写移动端的时候也会用到 em：是相对长度单位，相对于父级元

2020-11-10 19:17:22 3029

原创 bootstrap模态框简单案例

模态框（Modal）模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下提示信息，确认信息，表单,登录，注册等内容。模态框弹出时其他页面元素不可被选中。首先需要定义一个按钮同时定义 data-toggle=“modal” data-target="#exampleModalCenter" <button type="button" class="btn btn-primary" data-toggle="modal" data-targ

2020-11-03 18:41:58 731

原创 jquery animate动画函数

animate 定义和用法 animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。只有数字值可创建动画（比如 “margin:30px”）。字符串值无法创建动画（比如 “background-color:red”）。注释：使用 “+=” 或 “-=” 来创建相对动画（relative animations）返回值 animate()函数的返回值为jQuery类型，返回当前jQuery对象本身。

2020-11-01 13:34:21 1112

原创 jQuery的过滤选择

过滤选择器：过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、表单过滤内容过滤 :contains(text) 选取包含给定文本的元素 :empty 选取不包含任何子元素或者文本的空元素 :parent 选取含有子元素或者文本的元素 :has(selector) //选取所有含有选择器所匹配的元素的元素 <div>这个是一个有内容的div</div> <br /> <div><p>这是一个有p元素的div

2020-11-01 13:09:37 201

原创 jquery操作节点

一、创建节点 var box = $(‘节点‘); //创建一个节点 $(‘body‘).appended(box);　　　　　　//将节点插入元素内部二、插入节点内部插入节点方法 append(content)　　　　　　　　向指定元素后面插入节点content append(function (index,hml) {}) 　　使用匿名函数向指定元素后面插入节点content（html是原节点） appendTo(content)　　　　　　　　将指定元素移入到指定元素content内部

2020-10-26 19:59:55 220

原创 jquery基础动画

三组基本的动画显示：show 、隐藏hide、显示与隐藏切换toggle 让页面上的元素不可见或者课件，一般可以通过设置css的display。但是通过css直接修改是静态的布局，如果在代码执行的时候，一般是通过js控制元素的style属性，这里jQuery提供了一个快捷的方法.hide()来达到这个效果　　　1. show([speed],[callback]) 　　　　可选：speed-动画的持续时间，可以是毫秒，还可以是固定的字符串　　　　可选：callback-回调函数，动画结束后执行　　

2020-10-25 18:18:29 229

原创 css3关键帧动画animation

CSS关键帧动画 @keyframes 设定动画规则。 animation 所有动画属性的简写属性，用于设置六个动画属性： animation-name/animation-duration/animation-timing-function/animation-delay/ animation-iteration-count/animation-direction animation-name 属性为@keyframes 动画规则名称。若设置为none则覆盖已有的动画效果。 anim

2020-10-18 20:31:04 520 1

原创 box-shadow的使用

基础说明：外阴影：box-shadow: X轴 Y轴 Rpx color; 属性说明（顺序依次对应）：阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值（大小）阴影的颜色内阴影：box-shadow: X轴 Y轴 Rpx color inset; 默认是外阴影内阴影：inset 可以设置成内部阴影注（PS）：此属性使用于盒模型如(div,p,h1,h2,h3,h4,h5,h6等) 不是用来设置文字阴影如果设置文字阴影请参考知

2020-10-18 19:50:14 489

原创调用百度地图进行路线规划

调用百度地图进行路线规划需要用到百度地图API来进行定位签到、路线规划、导航等功能，在此做一个总结，方便以后查阅大致分为以下几个步骤 1：准备页面（根据HTML标准，每一份HTML文档都应该声明正确的文档类型，我们建议您使用最新的符合HTML5规范的文档声明） 2：适应移动端页面展示（下面我们添加一个meta标签，以便使您的页面更好的在移动平台上展示。） <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&g

2020-10-11 18:26:28 6321

原创 js会话存储，本地存储

使用JS向浏览器的某一个位置中存储一些内容，浏览器即使关闭了，存储的信息也不会销毁，当在重新打开浏览器的时候我们依然可以获取到上一次存储的信息在H5中提供了两种储存方式 localStorage:永久存储在客户端的本地 sessionStorage:信息的会话存储，会话窗口存在信息也存在，会话窗口关闭信息就消失了 sessionStorage sessionStorag是一个全局对象属性：查看存储的数据个数： sessionStorage .length 方法：读取数据： sessionSto

2020-10-07 20:03:46 3308

原创 js 事件绑定的几种方法

js 事件绑定 js中事件的绑定主要分为DOM 0 和DOM 2 中的方法 DOM0的事件绑定直接在dom对象上绑定事件。列如：div.nclick =function(){}; 特点：一个DOM对象只能注册一个同类型的函数，因为注册多个同类型的函数的话，就会发生覆盖，之前注册的函数就会无效。适用所有的浏览器 <button>点击</button> <script type="text/javascript"> var btn = document.get

2020-10-07 17:41:58 477

原创 SVG的渐变色

渐变渐变是一种从一种颜色到另一种颜色的平滑过渡，两种主要渐变是线性渐变和径向渐变。 svg中的渐变在svg中的渐变也是利用标签来实现的：线性渐变 linearGradient 、径向渐变 radialGradient 是利用渐变标签的ID 在需要填充的图像的标签中使用 style=“fill:url(#orange_red)” 线性渐变 linearGradient < linearGradient > 可用来定义 SVG 的线性渐变，主要是定义方向和颜色。 < linearGr

2020-10-06 18:33:51 3462

原创事件模型和事件委托

事件模型模型类型：DOM 0（原始事件类型）、DOM 2 DOM 0 直接在dom上绑定事件。列如：div.nclick =function(){}; 特点： 1、DOM0级事件模型是早期的事件模型，所有的浏览器都是支持的。 2、一个DOM对象只能注册一个同类型的函数，因为注册多个同类型的函数的话，就会发生覆盖，之前注册的函数就会无效。 3、DOM0不会阻止事件冒泡的发生 DOM 2 使用addEventListener和removeEventListener来注册和解除事件支持事件流的捕获和冒泡，

2020-10-06 18:08:05 348

原创 canvas 中save() 和restore()

save()和restore()方法是绘制复杂图形必不可少的方法.它们分别是用来保存和恢复 canvas 状态的，都没有参数。 canvas.save()用来保存先前状态的 canvas.restore()用来恢复之前保存的状态注：两种方法必须搭配使用，否则没有效果对canvas中特定元素的旋转平移等操作实际上是对整个画布进行了操作，默认情况下那么每一次绘图都会在上一次的基础上进行操作，最后导致错位。比如说你相对于原点30度递增旋转，30，60，90.如果不使用save 以及 restore 就会变

2020-09-27 22:35:43 2686

原创 HTML5Canvas绘制渐变图

什么是 Canvas？ HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 canvas 元素. 注意: Internet Explorer 8 及更早 IE 版本的浏览器不支持 canvas元素创建一个画布（Canvas）一个画布在网页

2020-09-26 14:33:55 882

原创 JS键盘事件

在 JavaScript 中，当操作键盘时，会触发键盘事件，键盘事件主要包括下面 3 种类型： keydown：在键盘上按下某个键时触发。如果按住某个键，会不断触发该事件，但是 Opera 浏览器不支持这种连续操作。该事件处理函数返回 false 时，会取消默认的动作 keypress：按下某个键盘键并释放时触发。如果按住某个键，会不断触发该事件。该事件处理函数返回 false 时，会取消默认的动作（如输入的键盘字符）。 keyup：释放某个键盘键时触发。该事件仅在松开键盘时触发一次，不是一个持续的响应状

2020-09-20 15:43:35 920

原创 js防抖和节流

函数防抖当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行，如果设定时间到来之前，又触发了事件，就重新开始计算延迟。也就是说当一直触发这个函数，且每次触发函数的间隔小于既定时间，那么防抖的情况下只会执行一次。 function antiShake(fn, wait) { var timeout = null; //定义一个定时器 return function() { if(timeout !== null) { clearTim

2020-09-20 13:15:19 196

原创 js中的克隆

在js中克隆被分为深度克隆和浅克隆克隆的概念深克隆所有元素或属性完全复制，与原对象完全脱离，也就是说所有对新对象的修改都不会映射到原对象中浅克隆原始类型为值传递，对象类型仍为引用传递，所以改变新对象中的引用值会改变原对象中 var lilei = { sname: 'Li Lei', sage: 12, cars: [1, 2, 3], inrt() { console

2020-09-13 16:16:52 767

原创 js定时器

js中的定时器 js 定时器有以下两个方法： setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。可以叫做周期性定时器 setTimeout() ：在指定的毫秒数后调用函数或计算表达式。可以叫做一次性定时器定时器语法参数一：可以是函数不带参数, 或者是字符串参数二：定时的时间 setTimeout (test,1000)； //1秒后执行字符串，可以执行的代码 setTimeout (‘

2020-09-13 15:16:00 469

原创浅谈 js中的事件对象event

一、Event对象 Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些详细信息（包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息等。这个对象是在执行事件时，浏览器通过函数传递过来的。）都会被临时保存到一个指定的地方——event对象，供我们在需要的时候调用二、获取event对象在 W3C 规范中，event 对象是随事件处理函

2020-09-06 19:37:50 356

原创 js 中的dom节点的关系操作

DOM (Document Object Model) 用来表示文档中对象的标准模型就称为DOM 节点：页面中的所有内容都是节点节点类型：元素节点 Node.Element 属性节点 Node.Attribute 文本节点 Node.text 注释节点 Node.Comment 节点类型的属性： nodeType 节点类型（nodeType）可以通过节点元素的nodeType属性得到节点类型 element 1 元素节点 text 3 文本节点（空白行也是文本节点） comment 8

2020-09-06 15:08:06 282

空空如也

空空如也