A-linWeb-优快云博客

关于小程序为何不能由点击事件触发由于开启横屏需要修改json文件的配置，而这个文件我们无法在程序运行中进行修改，故我们无法通过点击按钮或其他操作去使手机屏幕发生旋转，只是是设置为"pageOrientation":"auto"用户主动旋转手机触发。关于小程序rpx的定义我们都知道，微信小程序在竖屏状态下，宽度100%，100VW的值为750rpx。但是在横屏之后，750rpx的实际宽度为手机屏幕的高。在这种情况下，我们的界面将会变大。举个简单例子，假如手机屏幕的宽高比为1:2，我们有一个按

2022-02-25 20:03:15 2689

原创阿茹周五演讲之python javascript 比较

2021-08-19 22:25:30 116

原创 Vue 中强制更新视图的几种方式（不用Vue变异数组情况下）

当我们使用vue开发时经常会遇到当vue实例已经创建好了，有时候需要再次给数据赋值时，并不能在视图中改变在vue文档中写着如果在实例创建之后添加新的属性到实例上，它不会触发视图更新因此比如我们修改一个数组其中的一个值，或者添加一条数据时，不管用。方法一：Vue.set() 方法（this.$set（））Vue.set( target, key, value ) 中有三个参数target：要更改的数据源(可以是对象或者数组)key：要更改的具体数据如果是数组就是索引值value ：重新赋的值

2021-07-27 17:37:52 9297

原创 Js 在字符串中提取数字详解方法

1 parseInt()方法： var str ="4500元"; var num = parseInt(str); alert(num);//4500 结果就是我们想要的，以为这么简单，那就错了。如果字符串前面有非数字字符，上面这种方法就不行了： var str ="价格：4500元"; var num = parseInt(str); alert(num);//NaN这个例子中会弹出NaN，解决这个问题，最简单的方法是：如果知道

2021-07-08 13:59:59 1386

原创 Git 日常工作流程（更新拉去合并解决冲突）

更新远程分支 git remote update origin -p需求场景：克隆的项目的时间很早，而你恰恰需要写新需求，在远端创建了新分支，此时本地是没有新分支的，执行更新远端分支命令行，即可查看删除或者增加的分支。多人协作开发(接下来用阿琳、李四、CTO三人来演示工作中的流程)场景需要：阿琳需要修改线上的一个Bug李四需要增加一个需求，俩人在同一时间拉取master主分支的代码...

2021-06-30 14:07:28 202 2

原创 props 更改值常用方法 v-model sync

无论是vue还是react，在父子组件通讯的时候，子组件都禁止直接修改父级传过来的prop，父组件总需要在子组件身上监听一个事件，然后由子组件去触发它，好让父组件来接收到payload去改变state。幸运的是，vue为我们准备了两个语法糖，让我们减少了一点写大量模板代码的痛苦。它们就是自定义组件上的v-model指令以及.sync修饰符。model用法sync用法...

2021-04-27 17:35:00 846

原创 TCP为什么要建立三次握手四次挥手

什么是TCP？TCP:传输控制协议是面向连接的协议。在收发数据前，双方都要建立可靠的连接。一个TCP连接必须经过三次“对话”才能建立起来。三次握手的简述第一次握手成功让服务器端知道客户端具有发送能力。第二次握手成功让客户端知道服务器具有接收和发送能力。但此时服务器端不知道客户端是否接收到了自己的信息第三次握手成功服务器端知道客户端接收到信息，建立连接四次挥手简述第一次挥手客户端发送一个FIN报文，用来关闭客户端到服务器的传输数据，此时客户端处于FIN_WAIT_1状态第二次挥手服

2021-04-23 16:13:29 143

原创 Vue refs用法解决父组件调用子组件方法以及修改子组件值

使用场景：父组件调用子组件中的方法，或者修改子组件的值用法如下：在父组件使用子组件子组件定义的变量父组件中的点击事件中更改子组件中的某一个值

2021-04-22 16:05:57 906

原创小前端有话说之：[Vue warn]: Avoid mutating a prop directly since the value will be overwritte父子组件传值问题及sync用法

相信刚入坑的小前端们在父子组件传值修改的时候或多或少会出现这种警告警告原因：vue不推荐直接在子组件中修改父组件传来的props的值，会报警告~~即通过props传递给子组件的值，不能在子组件内部修改props中的值。vue的prop是单向下行绑定：父级的prop的更新会向下流动到子组件中，但是反过来不行。可是有些情况，我们需要对prop进行“双向绑定”解决方案一、在计算属性或者方法中用$emit 通知父组件改变即子传父方案提醒父组件修改其中值二、（推荐方法）在父传子的时候

2021-02-01 15:19:46 1869 9

原创小前端有话说之：Vue在使用组件库（Vant Element）等修改其样式问题以及Scoped、穿透的理解

在讲穿透之前我们先了解一下在Vue中更改样式为何要加scoped 这一属性原理是：vue在编译的时候通过在DOM元素以及样式上加上唯一标记，dao实现样式私有化，不污染全局样式。一般用vue框架，在组件中为了不相互影响各自的样式，都会在 style 标签上加上 scoped , scoped 的作用是限制了样式的作用范围，只在本页有效。通俗的来说： Scoped 是会将 template 中的每个元素加入 [data-v-xxxx] 属性来确保 style scoped 仅本组件的元素而

2021-02-01 14:37:49 488

原创 json.stringify()与json.parse()的区别以及json.stringify()的用法

最近做项目，发现JSON.stringify()使用场景真的挺多，我们都知道JSON.stringify()的作用是将 JavaScript 对象转换为 JSON 字符串，而JSON.parse()可以将JSON字符串转为一个对象。简单点说，它们的作用是相对的，我用JSON.stringify()将对象a变成了字符串c，那么我就可以用JSON.parse()将字符串c还原成对象a。let arr = [1,2,3];JSON.stringify(arr);//'[1,2,3]'typeof JSO

2021-01-05 16:41:29 161 1

原创简述Echart 基本用法使用

echarts常用配置梳理：1.首先实例化一个echart实例，即 var echart = echarts.init(box);2.通过setOption 配置echarts实例（配置是核心）其中titletitle. text = ‘xxx’ 主标题文本可以设置 left top right bottom 等控制文本标题位置tooltip （提示文本框）效果图：legend（图例）legend. data如果 data 没有被指定，会自动从当前系列中获取。多数系列会取自

2020-12-11 16:00:27 1134

原创 Vue写一个简单的TodoList（增删改查）完整代码带注释版本

功能需求：在输入框输入所需要的数据，点击确定添加时，任务将自动添加到正在进行时当点击完成任务或者未完成任务时可自由跳转正在进行状态或已经完成状态当点击移除任务时，自动清除任务。ps：注意当用户进行页面刷新的时候，状态不能丢。源码如下：<template> <div> <nav> Tolist : <input type="text" placeholder="添加TODO" v-model.

2020-12-10 11:03:54 866 1

原创 Vue2.0生命周期附源码

Vue2.0生命周期八步曲beforeCreate :beforeCreate执行时，data选项没有初始化；渲染的虚拟DOM树没有生成，且没有挂载到容器。可以在这加个loading事件，在加载实例时触发created：由于data选项已经存在，所以在此发起ajax请求最合理。(数据越早拿回来越好)这结束loading事件created执行时，data选项已经被注入到实例，即data选项已经被初始化，可以使用；渲染的虚拟DOM树没有生成，且没有挂载到容器。beforeMount：before

2020-11-23 19:48:26 187

原创全选全不选js代码实现

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title></head><style> * {

2020-11-21 09:36:43 356

原创 Vue2.0与Vue3.0双向数据绑定区别

什么是双向数据绑定？vue是一个mvvm框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是vue的精髓之处了。1.Vue2.0通过Object.definePropety来劫持对象属性的getter和setter操作，当数据发生变化时通知2.Vue3.0通过Proxy来劫持数据，当数据发生变化时发出通知简单介绍一下Object.definePropety在MDN上对该方法的说明是：Object.defineProperty() 方法

2020-11-18 19:56:44 2041

原创 React生命周期图解+代码详细讲解

第一步：初始化阶段即（constructor）继承了基类，才会有render() 方法，生命周期才能使用。其中super()，用来调用基类的构造方法，将父组件的props注入子组件【props只读，不可变；state可变】1.组件在使用时，先进入构造函数constructor。做了什么在构造函数主要通过super()访问父类React.Component的构造函数，要把props形参传递到父类React.Component中，让父类React.Component去初始props的默认值以及p.

2020-10-21 21:01:50 461

原创最通俗易懂的webpack5 带你简单入门

1.什么是webpack？webpack是用于编译JavaScript模块。通俗的来说，webpack的一个模块打包器。本质上就是一个构建（包含：编译，压缩，丑化等）工具，且是目前最流行的构造工具。可以对所有资源（.html,.sass,.scss,.css,.png|.jpg|.jpeg,.js|.ts,模板文件ejs,hbs,pug）进行打包。2.如何安装2.1cnpm i webpack -gcnpm i webpack-cli -g或者cnpm i webpack webpack-cli

2020-10-19 21:07:29 1742

原创 Vue之vue.config.js 中webpack配置属性及解决跨域问题

我们就拿我这几天写的音乐项目来说module.exports = { publicPath: '/', outputDir: 'dist', indexPath: "index.html", pages: { index: { // page 的入口 entry: 'src/main.js', // 模板来源 template: 'public/index.htm

2020-10-16 22:17:51 837

原创 Vue之vue.config.js的作用在其中自己创建一个接口并使用 (小项目专用)

1.首先在项目中创建一个文件夹命名为 vue.config.js，准确的来说是在vue.config.js中定义接口数据定义如下图定义完成后我们就可以打开浏览器查看自己的接口啦如下图接下来使用接口

2020-10-15 19:52:46 3844 1

原创 Vuex 之 getters modules 详解（含概念及代码详解）

getters1.getters主要实现对state中的数据做进一步筛选，过滤操作2.getrers相当组件中的计算属性，它也会使用缓存。在仓库中过滤数据。而不是在组件中过滤数据。把过滤数据的操作提前。当不使用参数时，过滤数组图解当使用参数时，过滤数组modules通过modules配置项，可以把多个模块中的数据合并成一个大数据，放到store中。...

2020-10-14 23:00:40 2445

原创 Vue多组件之间共享数据的方案重点Vuex 重点带图讲解

Vue组件共享数据的四种方法文章目录Vue组件共享数据的四种方法前言一、组件传值（父子组件）。代码解释1.父传子2.子传父二、vue bus总线。操作步骤图解三.插槽四.Vuex（重点）Vuex对象的特点：图解方法一：总结前言提示：这里主要详细讲解Vuex模块的用法，其他用法将会从简而答。提示：以下是本篇文章正文内容，下面案例可供参考一、组件传值（父子组件）。示例：组件传值只能在父与子之间进行。父传子：父组件通过自定义属性向子组件传数据，子组件通过props接收子传父：给子组件添加自

2020-10-14 14:04:01 4370 1

原创 vue 中的更改样式以及组件样式的使用

更改样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .redClass {

2020-09-27 22:29:55 831

原创 vue 面试初学者必看知识点之计算属性及与方法侦听器的区别

1.计算属性（computed）computed选项中定义计算属性：由某个表达式计算出结果，形成的特殊属性，外观上是一个函数好处：1.可以把业务逻辑和视图分离，方便维护2.计算属性会使用缓存技术，以提高性能//计算属性第一次调用时，会执行它对应的函数，函数会返回一个计算结果，并把计算结果缓存起来，再次使用计算属性时，如果计算属性依赖的变量没有发生过变化，此时，就会从缓存中取计算属性，而不在重新执行计算逻辑，从而提高性能。如果依赖的变量发生了变化，计算属性会重新执行相应的业务逻辑，并把新的计算结果缓

2020-09-27 21:12:17 641 1

原创 mysql一些简单的命令

进入mysql：mysql -h localhost -u root -ph=>host主机user用户password密码如果在用navicat连接数据库时，出现“Client does not support authentication protocol requested by server; consider upgrading MySQL client”错误时，用下面的语句修改一下密码即可解决。修改密码：alter user ‘root’@‘localhost’ identi

2020-09-19 21:25:04 245

原创初学node.js 对app.js的解释

// 使用各种模块包// http-errors模块包主要功能监视http请求过程的错误。中间件middleware，中间件本质上就是一个模块包。监听错误的中间件。var createError = require('http-errors');// express模块包，框架// 语句=》函数=》脚本库=》模块包=》框架=》平台var express = require('express');// path模块是node自带的模块。path模块主要功能负责获取路径信息var path = r

2020-09-17 22:30:50 949

原创前端获取数据常见的几种方法

1.原生获取ajax<script> // 1. 创建xhr，是一个请求对象，用来向服务器端发送各种请求 var xhr = new XMLHttpRequest(); // 在放送请求之前，必须建立连接。 // 2. open()打开连接，参数1：请求方式，不区分大小写。参数2：请求的地址，请求的服务器所在的位置。 var url = "book.xml"; xhr.open("GET", ur

2020-09-16 19:55:10 8512 1

转载 Flex 弹性布局教程以及对主轴交叉轴的理解：语法篇

弹性布局的主轴交叉轴的理解容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size其中有6个属性设置在容器上6个属性在项目上一、容器上的属性1.flex-direction2.flex

2020-09-02 21:17:41 6281 4

原创 css选择器（包含css3新增加的选择器）

相邻选择器： +后面一个兄弟兄弟选择器： ~后面所有兄弟这里的属性指的是类名 // ~属性是否包含某个值，要求属性值以空格分割 [class~='cls1']{ color: blue; }// *属性包含某个值，无论是开头，中间，结尾都行，属性值无要求，以空格，中线都行。 [class*='cls1']{ color: blue; }// ^以某个值开头，$以某个值结尾。

2020-09-01 22:14:08 156

原创前端常见网页中分页的原理 js实现

js代码其中productList是自己定义的数据filter是过滤把符合条件的组合数组过滤出来 var currentPage = 1;//当前页码 var number = 5 //每一页的商品数量 var totalPage = Math.ceil(productList.length / number)//总页数 function getPhone(page,callback){ var currentPageProduc

2020-09-01 13:28:19 438

原创 jQuery中的API简单论述

1.过滤// :first和:eq(index)使用是选择器语法 $('div:first').text() $('div:eq(0)').text()// eq(index)和first()使用是筛选API。目的：都是把$('div')范围进一步缩小。 $('div').eq(0).text() $('p').first().text()// hasClass(类名)用来判断元素是否拥有一个类名，拥有返回true $('div:eq(0)').hasClass('activ

2020-08-26 20:55:51 229

原创前端面试题收集

TO前端面试题收集注：可能有重复，angular.js部分可以跳过，用的人很少了。前端面试题收集：http://developer.51cto.com/art/201902/592316.htmhttps://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questionshttp://blog.sina.com.cn/s/blog_7f5571aa0102w2tv.htmlhttp://www.cnblogs.com/w

2020-08-25 17:41:31 322

原创什么是webStorage? 和cookie的区别

webStorage是h5提供的新特性，用来保存数据，让数据在浏览器上共享。它分两种类型：sessionStorage会话存储，localStorage本地存使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速，这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上。它也可以存储大量的数据，而不影响网站的性能。数据以键/值对存在, web网页的数据只允许该网页访问使用。Web Storage的目的是为了克服由cook

2020-08-14 21:21:21 604

Vue接口自定义数据 操作与实现代码

空空如也

Vue接口自定义数据操作与实现代码