辉娜-CSDN博客

原创微信小程序getLocation 需要在app.json中声明permission字段

解决办法:在app.json中加入下面这段代码 "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" } }

2021-11-09 14:26:39 360

原创 TypeError: this.getOptions is not a function

vue3+less安装报错：TypeError: this.getOptions is not a function解决办法：less-loader版本太高，降低less-loader版本号即可。"less": "^4.1.1","less-loader": "^5.0.0"安装依赖npm install less-loader@5.0.0 less sass sass-loader--save-dev...

2021-11-08 21:02:51 319

原创 V3 setup() 函数 ref() 函数 reactive 函数

V3 setup() 函数 setup函数是v3提供新的组件选项。之前的data、声明周期、自定义函数都可以放置在内在创建组件之前执行,初始化props,紧接着就调用setup函数,从生命周期钩子的视角来看,它会在beforeCreate钩子之前被调用是mixins的强化版,比mixins更加灵活因为setup()是在解析其它组件选项之前被调用的,所以避免使用this 在setup函数中定义的变量和方法需要return出去，不然无法在模板中使.

2021-10-28 22:41:39 1525

转载 vue---混入

Mixin 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个 mixin 对象可以包含任意组件选项。当组件使用 mixin 对象时，所有 mixin 对象的选项将被“混合”进入该组件本身的选项。简单来说不足有二：1、所有属性都会合并到组件里面，所以相同命名会冲突。2、写完就定下来了，不够灵活vue3 提供了 setup，来解决这些问题。个人见解，其实在vue2的时候就很少使用mixin来抽象逻辑，一般抽象逻辑都会使用一个封装的js对象。而mixin更多的是像封装一个“基类”那

2021-10-28 22:26:54 209

原创 Vue-element-UI中实现自己接口的登录步骤

1、src-->views-->login-->index.vue这里面会有一个loginForm数据存储密码和账号，method里面有一个用于处理登录逻辑的方法handleLogin()：2.去store-->modules-->user.js3.api-->user.js文件4.utils-->request.js修改头像：Layout-->components-->Navbar.vue

2021-10-28 18:57:03 530

原创 webpack.config.js和vue.config.js

纯手工搭建：webpack.config.js：const path = require('path')const { VueLoaderPlugin } = require('vue-loader')const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = { entry: './src/main.js', //入口文件的地址 output: { path: path

2021-10-27 23:06:50 1462

原创动态组件、Provide / Inject、异步组件

一、动态组件有的时候，在不同组件之间进行动态切换是非常有用的，比如在一个多标签的界面里：父组件： <button @click="getComp('DynaA')">A</button> <button @click="getComp('DynaB')">b</button> <button @click="getComp('DynaC')">C<.

2021-10-27 22:44:28 597

原创 Vue 3.x 组件的自定义事件v-on: 和 $emit

v-on: 指令可以简写成 @一、自定义组件中，子组件获取父组件的数据

2021-10-27 21:29:54 1034 1

原创 Vue3组件

一、通过 Prop 向子组件传递数据我们使用组件时，如果模板中的内容都固定不变，那么每个模块引入该组件的内容都将一致；其实我们也可以不这样，比如我们可以将组件的某些内容变为动态的，内容由父元素的传值决定，vue给我们提供了props属性，让我们的组件可以对子组件传值。单向数据流所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。..

2021-10-27 19:49:11 2980 1

转载 qs.parse()、qs.stringify()使用方法

一、qs.parse()将URL解析成对象的形式const Qs = require('qs');let url = 'method=query_sql_dataset_data&projectId=85&appToken=7d22e38e-5717-11e7-907b-a6006ad3dba0';Qs.parse(url);console.log(Qs.parse(url));如上面代码所示,输出结果如下:二、qs.stringify()将对象序列化成UR...

2021-10-26 08:49:48 378

原创 Vuex单一状态树

参考博客：vuex单一状态树_Vuex 应用及原理_数据科学人工智能的博客-CSDN博客组件内的状态管理流程状态管理包含以下几部分：state，驱动应用的数据源； view，以声明方式将 state 映射到视图； actions，响应在 view 上的用户输入导致的状态变化简易的状态管理方案如果多个组件之间要共享状态(数据)，使用上面的方式虽然可以实现，但是比较麻烦，而且多个组件之间互相传值很难跟踪数据的变化，如果出现问题很难定位问题。当遇到多个组件需要共享状态的...

2021-10-25 23:05:09 228

原创 axios实例及封装的方法（1）

一、axios的实例为什么要创建axios实例，它与我们直接使用的axios.get这样的写法有什么区别？引入axios,然后在页面中进行请求axios.get(‘url’).then(res=>{}),这里默认会导出实例，通常使用这个axios就可以了而之所以要创建axios实例，是因为我们实际工作项目中，可能需要访问多个服务地址，而这些服务请求和响应的结构也可能都完全不同，那么你可以通过axios.create创建不同的实例来处理。比如axios1是用http状态码确定响应是否正

2021-10-25 21:51:12 530

原创怎么解决sockjs.js?9be2:1609 GET http://192.168.0.133:8080/sockjs-node/info?t=1630545142551 net::ERR_NETW

在做vue项目的时候控制台出现下面问题时，怎么解决1. 在使用vue-cli脚手架创建项目的时候，在cnpm create app命令后，项目创建成功后通过npm run serve命令运行以后，控制台报错，sockjs.js?9be2:1606 GET http://192.168.16.105:8080/sockjs-node/info?t=1574662800493 net::ERR_CONNECTION_TIMED_OUT2.sockjs-node是一个JavaScript库，提供跨浏.

2021-10-24 18:40:50 1464

原创 Vue生命周期

<template> <div id="head"> {{name}} <button @click="update">修改</button> </div></template><script>export default { data(){ return{ name:'zhangsan' } }.

2021-10-19 20:55:24 59

原创 margin边界重叠问题及解决方案

2021-10-19 19:56:50 149

原创 js数组去重的方法

let arr = [1, 1, 2, 3, 4, 4, 4, 3, 3, 6, 5]// 1.Set去重function unique(arr) { console.log(Array.from(new Set(arr)))}unique(arr) //[ 1, 2, 3, 4, 6, 5 ] // ------------------------------------ // 2. indexOf()去重function unique1(arr) { let.

2021-10-19 19:48:57 258

原创 css清楚浮动的四种方式

一、父元素设置overflow:hidden<style> .outer { background-color: cornflowerblue; /* 父元素设置这个属性 */ overflow: hidden; } .inner { width: 150px; height: 150px; .

2021-10-19 15:30:03 104

原创 Promise Generator Async初步理解（1）

一、立即执行函数// 立即执行函数function getInfo() { return 'I am Zhang';}function showInfo(param) { console.log(param)}showInfo(getInfo()) //I am Zhang二、回调函数//回调函数function callback(param) { console.log('我是回调函数', param);}function myFun(param

2021-10-17 22:59:41 85

原创 css的盒子模式

盒子的四个基本内容：box-sizing(盒子模式)1. 内容盒子（普通盒子，默认盒子） content-box; 盒子实际占据的宽度 : 2borderWidth + 2padding + width 盒子实际占据的高度 : 2borderWidth + 2padding + height2. 边框盒子（怪异盒子 ie低版本） border-bo...

2021-10-14 15:32:31 232

原创 js的六种继承

// 父类function Father(name) { // 属性 this.name = name || 'father', // 实例方法 this.sleep = function() { console.log(this.name + "正在睡觉"); }}// 原型方法Father.prototype.look = function(book) { console.log(this..

2021-10-14 15:25:59 177

原创九宫格 demo

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>九.

2021-10-12 19:56:15 79

原创 ES6 解构和扩展字符串

完全解构不完全解构异常结构数组let stus = ['zs', 'ls', 'ww', 'zs', 'ln']; //可以是某个模块导出的let nums = [1, [2, 3, [4, [5]]]];let [a, [b, c, [d, [e]]]] = nums //得想清楚结构console.log(a, b, c, d, e) // 1、完全解构 // let [name1, name2, name3,...

2021-10-12 14:42:06 107

转载 height:100%和height:inherit的异同

1. 兼容性差异height:100%IE6+√height:inheritIE8+√2. 大多数情况作用是一样的除去兼容性，大多数情况下，两者作用是一样的，甚至都很难想出不一样的理由。① 父容器height: auto，无论height:100%或者height:inherit表现都是auto.② 父容器定高height: 100px，无论height:100%或者height:inherit表现都是100px高.难道没有差异吗？难道没有使用height:inherit的理由吗？当...

2021-10-11 22:09:50 398

转载理解js的作用域和作用链

作用域(Scope)1. 什么是作用域作用域是在运行时代码中的某些特定部分中变量，函数和对象的可访问性。换句话说，作用域决定了代码区块中变量和其他资源的可见性。可能这两句话并不好理解，我们先来看个例子：function outFun2() { var inVariable = "内层变量2";}outFun2();//要先执行这个函数，否则根本不知道里面是啥console.log(inVariable); // Uncaught ReferenceError: inVariabl

2021-10-09 16:41:45 68

原创 js的this指向问题

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象情况一：全局作用域或者普通函数自执行中this指向全局对象windowconsole.log(this.document===document);//trueconsole.log(this===window);//truethis.a=37;//相当于创建了一个全局变量aconsole.log(window.a);//37...

2021-10-08 19:09:59 58

原创 css实现垂直与水平居中

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.

2021-10-07 17:19:24 67

转载 Object方法大全

create 创建一个对象 defineProperty Object.defineProperty(object, prop, descriptor)定义对象属性 defineProperties Object.defineProperties(object, {prop1 : descriptor1, prop2 : descriptor2, ...) keys 遍历可枚举的属性，只包含对象本身可枚举属性，不包含原型链可枚举属性 values 遍历可枚举的属性值，只包含对象本身可枚举属性值，..

2021-10-06 09:49:02 117

原创 js遍历数组的五种方法+对象的六种方法

遍历对象：1.for...in遍历输出的是对象自身的属性以及原型链上可枚举的属性(不含Symbol属性),原型链上的属性最后输出说明先遍历的是自身的可枚举属性,后遍历原型链上的2.Object.keys()遍历对象返回的是一个包含对象自身可枚举属性的数组(不含Symbol属性).3.Objcet.getOwnPropertyNames()输出对象自身的可枚举和不可枚举属性的数组,不输出原型链上的属性4.Reflect.ownKeys()返回对象自身的所有属性,不管属性名是Symbo...

2021-10-05 21:23:58 904

转载 Vue3.0中引入地图（谷歌+高德+腾讯+百度）

Vue3.0中引入地图（谷歌+高德+腾讯+百度）_氷泠-CSDN博客以前写的一个博客，vue3引入百度地图组件，后来发现还是有问题，原来现在各个地图对Vue3的适配度不高，发现这篇博客可以附一个百度地图demo<template><div class="wrapper"> <div id="container" ></div> <Footer /></div></template><sc

2021-10-04 23:02:51 923

转载 flex:1和flex:auto详解

首先明确一点是， flex 是 flex-grow、flex-shrink、flex-basis的缩写。flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。转载：flex:1和flex:auto详解.

2021-10-04 16:52:26 490

原创 javascript关键字typeof、instanceof、constructor判断类型

1.typeof返回的是类型名包括以下 7 种：number、boolean、symbol、string、object、undefined、function 等，(array,null除外)typeof ''; // string 有效typeof 1; // number 有效typeof Symbol(); // symbol 有效typeof true; //boolean 有效typeof undefined; //undefined 有效--------------------.

2021-10-04 16:29:18 245

原创变量声明之有var和没有var的区别及call()、apply()、bind() 的用法

不用var声明的变量会被自动隐式的创建为全局变量 function fn(){ a = 2 } fn() console.log(a) //2 根据js的作用域，函数外面是无法获得函数里面的变量的（除非使用闭包），但是这里做到了，只是因为js会将没有使用var声明的变量自动的创建为全局变量。从第一条也可以看出，没有使用var声明的变量是不会参与变量提升的，不然结果应该是undefined，看到最好的一个解释是：由于该变量没有使用.

2021-10-04 09:44:31 204

原创理解IIFE 立即调用

为什么需要IIFE？如果只是为了立即执行一个函数，显然IIFE所带来的好处有限。实际上，IIFE的出现是为了弥补JS在scope方面的缺陷：JS只有全局作用域（global scope）、函数作用域（function scope），从ES6开始才有块级作用域（block scope）。对比现在流行的其他面向对象的语言可以看出，JS在访问控制这方面是多么的脆弱！那么如何实现作用域的隔离呢？在JS中，只有function，只有function，只有function才能实现作用域隔离，因此如果要将一段代码中的.

2021-10-03 21:58:38 109

空空如也

空空如也