dangerousSugar。-CSDN博客

原创 js操纵dom

选择器document.getElementById //ID选择器大小写敏感document.getElementsByClassName //类选择器 document.getElementsByTagName //标签选择器document.getElementsByName //name选择器，返回数组 document.querySelector //返回单个Node 匹配到多个结果，只返回第一个document.querySelector

2020-09-29 22:00:38 101

原创 JS中数据类型判断

1 typeof可以判断数据类型，它返回表示数据类型的字符串（返回结果只能包括number,boolean,string,function,object,undefined）；可以使用typeof判断变量是否存在（如if(typeof a!=“undefined”){…}）；Typeof 运算符的问题是无论引用的对象是什么类型它都返回object2 instanceof因为A instanceof B 可以判断A是不是B的实例，返回一个布尔值，由构造类型判断出数据类型console.log(

2020-09-23 21:27:19 155

原创 Class类

JavaScript 语言中，生成实例对象的传统方法是通过构造函数。下面是一个例子。function Point(x, y) { this.x = x; this.y = y;}Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')';};var p = new Point(1, 2);上面这种写法跟传统的面向对象语言（比如 C++ 和 Java）差异很大，很容易让新学习

2020-09-22 20:34:27 561

原创 JavaScript数据类型

基本数据类型number (特殊NaN) NaN:not a number Infinityboolean:true,false或者可以隐式转换在true或false的类型能转换成false只有以下几种情况：0,空串，null,undinfed,NaN,falsestring:用’'或"",或``定义的字符var str1='abuiyicd'var str2="x7ut687yz"var str3=`wuhu ,${str}`null:typeof null Objectundef

2020-09-21 20:55:01 86

原创 vue 自定义指令如何使用

*自定义指令*指令的注册方式和「过滤器」、「混入」、「组件」注册的方式一样都分为两种：一是全局注册，二是局部注册。1.全局注册Vue.directive(‘name’, {})2.局部注册directives: {name: {}}然后在模版中直接使用即可。你好，六哥在这Vue 提供了自定义指令的几个钩子函数：bind：指令第一次绑定到元素时调用，只执行一次。inserted：被绑定的元素，插入到父节点的 DOM 中时调用。update：组件更新时调用。componentUpda

2020-09-18 20:58:18 337

原创 Object.defineProperty()方法有何用

作用：会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象<script>// Object.defineProperty阔以用于给对象添加更新属性let obj = {}// 该方法中包含以下参数：需要添加属性的对象，你需要加的属性，配置项Object.defineProperty(obj, 'name', {// getter函数get() {// get函数中，一定要return当前这个新添加进去的属性作为返回值console.log('你当前获取到

2020-09-17 19:02:24 688

原创 prop 验证和默认值

作用：用于接收来自父组件的数据（子组件期待获得的数据）prop也可以通过v-bind动态赋值：<blog-post v-bind:title="post.title"></blog-post> <blog-post v-bind:title="post.title + ' by ' + post.author.name"></blog-post

2020-09-16 20:05:35 785

原创 async和await

作用: 是一套关于异步的解决方案await有两个作用，一是作为求值关键字，二是将异步操作变成同步操作；如果方法中使用了await，那么在方法前面必须加上async当await作为求值关键字时后面可以跟Promise或表达式，可以直接获取Promise中的值或表达式的值跟Promiseapp.use(async (ctx, next) => { // next()返回的是Promise，a的值是"hello, world!" const a = await next();

2020-09-15 21:15:44 61

原创 vue中如何使用ECharts图表

具体可参考官方网站 https://echarts.apache.org/zh/index.html在项目终端输入命令npm install echarts --save然后在页面里写一个div//实例 <div class="box" ref="eCharts"></div>然后再script标签引入echarts<script> import echarts from 'echarts' export default {

2020-09-14 20:42:18 107

原创基本数据类型与引用数据类型的区别

常用的基本数据类型Number（数值类型）、String（字符串类型）、Boolean（布尔类型）、Null（空）、Undefined（未定义）常用的引用数据类型Object（对象）、Array（数组）、Function（函数）、Data基本数据类型和引用数据类型的区别1.存放的内存分配不同我们的内存分为两部分，一部分是栈内存（小），部分是堆内存（大）；1> 基本数据类型存储在栈内存中基本数据类型值直接存储在变量访问的位置，因为它们占据的空间是固定的，所以可将他们存储在较小的内存区

2020-09-11 20:23:46 192

原创关于数组

forEach() ：就是for的升级版，forEach返回值undeifnedfilter():过滤,遍历满足条件的数组元素，返回新数组map():对原数组加工处理，得到一个新数组reduce():归并，将多个值归并成一个值findIndex() 找下标find() 找数组中匹配的元素every() 全部满足才返回true，否则为falsesome() 只要有一个满足就返回true,否则为falseincludes() 判断数组中是否含有某个值，含有返回true,不含有返回falsef

2020-09-09 21:59:17 83

原创 vue里的全局守卫如何使用

在登录页面的路由里配置meta{ path: '/login', name: 'Login', meta:{ requireAuth:true }, component: () => import('../views/Login.vue') }在route.js里写入全局路由守卫router.beforeEach((to, from, next) => { console.log('to',to);

2020-09-07 21:38:59 518

原创 JS继承

1 原型链继承父类的实例作为子类的原型function Woman(){ }Woman.prototype= new People();Woman.prototype.name = 'haixia';let womanObj = new Woman();优点：简单易于实现，父类的新增的实例与属性子类都能访问缺点：可以在子类中增加实例属性，如果要新增加原型属性和方法需要在new 父类构造函数的后面无法实现多继承创建子类实例时，不能向父类构造函数中传参数2.借用构造函数继承（伪造对象、

2020-09-04 19:44:47 65

原创 js操作dom

**DOM操作方法**原生js5中操作dom一共是有三种方法：第一种：标签式的绑定（HTML事件处理）第二种：DOM0级事件处理第三种:DOM2级事件处理但是频繁的操作dom可能造成页面元素的重绘和重流。所以现在我们经常用的就是虚拟dom，数据驱动组件化。下面呢我将详细的演示一遍：DOM事件绑定（增删改查）三个方法：html事件处理//<button οnclick="get">获取</button>//<!--

2020-09-03 20:47:31 104

原创防抖与节流

防抖：所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。节流：所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。两种方式可以实现，分别是时间戳版和定时器版。//防抖// 思路:在规定时间内未触发第二次，则执行function debounce (fn, delay) { // 利用闭包保存定时器 let timer = null return function () { let context = this

2020-09-02 21:05:24 75

原创 Vue 封装分享二维码插件（qrcode）

先引入官方插件下载插件（qrcode）插件地址: https://www.npmjs.com/package/qrcode在终端内输入命令npm install --save qrcode代码实现1.给图标一个分享事件<div class="classDetails_box_header_img" @click="share"> </div>2.设置弹出遮罩层  <van-overlay :show="show

2020-09-01 20:30:43 501

原创 React BrowserRouter和HashRouter的区别

React BrowserRouter和HashRouter的区别BrowserRouter：h5路由（history API）HashRouter：哈希路由主要区别BrowserRouter 和 HashRouter 都可以实现前端路由的功能BrowserRouter 实现的是单页面的路由切换HashRouter 实现的是全局路由切换从原理上HashRouter在路径中包含了#，相当于HTML的锚点定位。（# 符号的英文叫hash，所以叫HashRouter，和散列没关系哦））而Brow

2020-08-31 20:48:44 1091

转载 vue拖拽小信封

封装成组件在需要的页面引入<template> <div id="webId">   <div class="xuanfu" id="moveDiv" @mousedown="down()"

2020-08-28 20:50:33 231

原创 Vue利用 is 属性实现页面异步路由切换

**在html中很多语法都是固定的写法比如 ul 里面只能是 li tr里面是td而is的这个属性就是为了里面元素的复用跟开发便捷is特性——就是有些元素内部不能使用自定义标签或者自定义标签内也不能放某些特殊的标签，这时候就要用is代替一下，让html语法符合规则验证。is属于指定要在内部使用的标签。文档链接：https://cn.vuejs.org/v2/guide/components.html好了不废话直接上代码<template> <div class="home

2020-08-24 21:33:53 241

原创登陆注册

我的页面在进入我的页面的时候在组件内部写一个组件首位判断是否有token beforeRouteEnter(to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不！能！获取组件实例 `this` // 因为当守卫执行前，组件实例还没被创建 let token = localStorage.getItem('adminToken') === null

2020-08-21 21:17:55 270

原创 vuex是什么以及如何使用

官方答案：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态并以相应的规则保证状态以一种可预测的方式发生变化。Vuex有五个核心概念：state、getters、mutations、actions、modules。1、state：vuex数据用来存储变量。2、geeter：计算属性3、mutation：同步操作可以直接更改state里的状态4、action：和mutation的功能大致相同，不同之处在于action提交的是mut

2020-08-20 21:13:15 225

原创 vue封装axios的API

首先我们要在搭建好的项目的src目录下创建一个 http | | netWork 目录然后在这里面写三个js文件他们分别是api.jsenv.jsrequest.jsenv文件里面放置的是环境export default { //开发环境 dev: { baseUrl: "https://localhost:2333" }, //测试环境 test: { baseUrl: "https://test.365msmk.com" }, //生产环境

2020-08-19 20:59:46 111

原创 vue的一些设置

在vue中想使用sass必须在脚手架搭建项目时候选择然后我们就可以愉快的写scss了还有安装一个插件可以把px自动解析成vw安装命令npm i @moohng/postcss-px2vw --save然后在创建一个.postcssrc.js在里面配置module.exports = { plugins: { '@moohng/postcss-px2vw': {} }}在创建一个vue.config.js在里面可以配置端口号一类的mo

2020-08-18 21:13:13 127

原创 webpack的了解以及它搭建环境步骤

1、什么是Webpack本质上，Webpack 是一个现代 JavaScript 应用程序的静态模块打包器（static module bundler）。在 Webpack 处理应用程序时，它会在内部创建一个依赖图（dependency graph），用于映射到项目需要的每个模块，然后将所有这些依赖生成到一个或多个 bundle。webpack 解决什么问题？Webpack 可以做到按需加载。像 Grunt、Gulp 这类构建工具，打包的思路是：遍历源文件→匹配规则→打包，这个过程中做不到按需加载，即

2020-08-17 21:15:18 110

weixin_48253922的博客