- 博客(77)
- 收藏
- 关注
RSS订阅原创 使用Ensp配置DHCP协议
Dynamic Host Configuration Protocol，动态主机配置协议，简单理解为自动分配IP地址，有了这个协议就不用手动配置IP地址了，如图。
2023-07-25 10:30:05
917
1
原创 React类式组件改变状态setState()用法
上篇博文将讲到了React函数式组件改变状态useState()的用法，这次咱们来看一下类式组件改变状态setState()用法，大家可以参考一下，对比两个方法的区别还是同样的需求——页面中有一个盒子，初始状态背景颜色是红色的，点击时会变成绿色，再点击又变回红色，就这样每次点击背景颜色都在红色和绿色之间切换引入Reactimport React from 'react'初始化样式初始样式在state里面设置，它是React类式组件特有的变量，里面存放一个个键值对——变量：变量初始值，然后
2021-12-10 10:44:29
2466
原创 React函数式组件改变状态useState()的用法
函数式组件主要使用 useState() 进行状态管理如果页面中某个元素需要改变状态，必须进行以下步骤才能成功改变其状态比如现在有一个需求，启用状态简而言之就是从React中引入useState()函数import React, {useState} from 'react'初始化状态根据需求更新状态...
2021-12-10 10:15:34
3730
原创 React父子组件之间的传值
想要了解父子组件之间的通信，必须搞清楚谁是父组件，谁是子组件，谁给谁传值这几个问题，为了方便演示：把App.js当作父组件，在父组件里引入并使用Son.js，即Son.js为子组件，如下图所示：子组件(Son.js)import React, {Component} from 'react';class Son extends Component { render() { return ( <div> 我是
2021-10-25 11:38:13
187
1
原创 JavaScript map()，forEach()，reduce()，filter()的使用
map()使用场景1：对数组进行遍历，并对原数组进行一些操作，返回一个新的数组，但不影响原来的数组const arr=[1,3,5,7,9]const newArr=arr.map((item)=>{ return item+1})console.log(arr)//打印原数组[1, 3, 5, 7, 9]console.log(newArr)//打印新数组[2, 4, 6, 8, 10]由上述代码可以看出，map()不会影响原数组使用场景2：在React中利用map()来渲染.
2021-10-08 22:28:26
198
原创 vue安装less报错解决方案
最近想在Vue项目中使用less，想着应该很简单，直接npm install less就行了嘛，但是下载很顺利，在代码中加入less却编译出错了，原因是less的版本与less-loader版本的问题下面是我的使用步骤：然后就在控制台下载less与less-loader接着在package.json里配置文件里查看检查一下有没有安装成功，发现已经成功安装了下来就开始写less代码但是终端却报错了…由于less和less-loader是手动安装的，实在找不到解决方法，所以我就用vue-u
2021-09-03 17:30:07
924
原创 vue ui的安装及使用
vue ui是什么？简单来说，vue ui是一个可视化图形界面，方便你去创建、更新和管理vue项目，包括下载router，vuex，axios，elementui等插件，配置好一些属性以及依赖关系，方便我们使用，我个人第一次接触它就感觉非常非常非常智能和强大配置步骤安装Vue CLI，因为vue ui是在Vue CLI基础上封装的npm install -g @vue/cli打开C:\Users*xxxx*\AppData\Roaming\npm，看看有没有下图框出的文件将C:\Use
2021-09-02 19:14:06
35360
11
原创 Vue中路由属性以及router-view、router-link的详解
路由属性path 路由跳转所到达的路径namecomponent 路由跳转到所对应的组件redirect 路由重定位，主要设置刚进入页面时显示的组件，属性值为路径redirect:'/index'children 路由嵌套，主要实现路由跳转以及页面局部刷新router-view路由匹配到的组件将显示到此标签<router-view></router-view>router-link此标签实现路由跳转<router-link to="/index"&.
2021-09-02 11:37:46
4273
原创 使用idea搭建Vue项目(路由，elementui，axios，vuex)
一. 初始化项目打开idea，点击：文件、New、项目，如下图所示选择：Static Web、Vue.js，点击下一个，如下图所示填写项目名称，以及可以更改项目的存储路径，点击完成，慢慢等待即可项目构建完之后，点击package.json文件，能看到以下红框中的信息，点击箭头所指的按钮即可运行，省去了在终端敲npm run serve运行指令，如下图所示上一步完成之后，以后想运行程序点击下图中的按钮即可，也省去了敲指令的功夫，如下图所示运行完成之后打开页面如下图所
2021-09-01 19:32:11
5144
4
原创 原生Ajax，jQuery封装的Ajax以及axios
原生Ajax，jQuery封装的Ajax以及axios(接口可直接使用)原生Ajax工作原理：通过XmlHttpRequest对象向服务器发异步请求，从服务器获得数据，然后用 javascript 来操作DOM更新页面请求方式：get / post，在这里get与post的区别不做说明了，直接展示两种代码getvar xhr=new XMLHttpRequest()xhr.open('get','http://192.168.2.52:5000/query_get?name=1',tru
2021-08-26 16:16:31
326
原创 怎么在一个组件中使用另外一个.js文件里定义的方法
怎么在一个组件中使用另外一个.js文件里定义的方法有时候给一个组件里的某些标签定义某些方法，会使代码量变多，可读性不强，如果一个组件里需要定义数种方法，可以把这些方法抽离出来，单独放进一个.js文件里，使用起来也比较方便，代码简单且可读性强例如现在有以下需求：当输入用户名之后判断用户名是否符合"3-12位数字、字母、下划线"的规范，无疑要用到正则表达式，且当鼠标在input输入框之外点击时判断，无疑要用到@blur事件。如果我们在组件内部定义方法，代码如下：<template> &
2021-04-09 14:39:47
322
原创 JavaScript如何将一个对象里的某些属性抽离出来
JavaScript如何将一个对象里的某些属性抽离出来需求：如图所示，此数据是一个个很规范的键值对，属性有value和name如下图所示：另外一组数据有很多很多属性，现在要将该数组里面的属性删至两个，只保留下图的’yjms’和’yl’，但是要将这两个属性名分别改为上图所示的value和name，即value=yl，name=yjms实现步骤：创建一个新的空数组使用for循环遍历如图一所示的数组给创建的空数组设置属性值const newArr = [];//创建空数组for (let
2021-04-08 17:16:33
1765
原创 Vue开发规范——目录结构
/dist——打包之后的文件夹，此文件夹被发布到真正的服务器上，项目完成之后，执行npm run build会形成此文件夹/public——此目录下的文件并不会被Webpack处理，它们会直接被复制到最终的打包目录，即/dist下，此文件夹里存放一些不会变动的文件，比如项目运行在浏览器时显示的小图标/node_modules——保存npm加载的项目依赖模块，即第三方包所存放的目录，使用npm install可以下载/src——存放源代码/src/api——接口文件目录，即连接服务器..
2021-04-06 15:33:14
1137
原创 Vue中的父子组件通信——props和$emit
Vue中的父子组件通信——props和$emit父传子——props子传父——$emit举例——父传子场景：子组件需要得到父组件data中的信息，并将其渲染到页面中<!-- 父组件 --><template> <div id="app"> <child :travel="books"></child><!-- travel是自定义的名字，但是必须跟子组件里props的属性值一样，books为父组件data里定义的值
2021-04-01 17:05:23
370
原创 解决Vue项目运行时Uncaught Error: [vue-router] invalid mode: [object History]的问题
前两天写项目时，最终运行发现一个奇怪的问题，浏览器报出这样的错误：[vue-router] invalid mode: [object History]，根据我们的经验，这应该不是组件创建，引用之类的相关问题，由vue-router可以看出是路由配置的问题，而且错误很明显，是mode:'history’的问题，但是当时脑子不太好使，history忘记加引号，这是一个字符串啊！！！问题成功解决！！！...
2021-03-10 11:39:27
3622
4
原创 CSS3——box-shadow属性的介绍
CSS3——box-shadow属性的介绍其实box-shadow在实际开发中应用比较少，但是前几天看过一个老师写一个小项目，里面用到了box-shadow，而且对这个讲解的很详细，我就感觉我自己学的跟那位老师学的不是一个box-shadow，感觉自己了解的不透彻，所以来做个笔记box-shadow: 10px 10px 10px rgba(44, 16, 111,.5);首先，由上述代码可以看出，box-shadow传递四个参数走向X方向的阴影走向Y方向的阴影阴影程度透明度如果想要
2021-03-08 23:37:32
370
原创 Vue项目中控制台报错：NavigationDuplicated: Avoided redundant navigation to current location......解决办法
Vue项目中控制台报错：NavigationDuplicated: Avoided redundant navigation to current location…解决办法出现问题的原因控制台报错是因为冗余导航，也就是你在同一个导航上连续重复点击多次造成的，虽然无大碍，但控制台报错还是会令人难受解决办法办法一：在终端上安装npm i vue-router@3.0 -S如果显示上述图片表明安装成功，之后再次运行程序npm run dev，重复点击就不会报错啦办法二：在你创建的项目的route
2021-03-07 19:05:37
1164
原创 解决路由跳转时router-view不显示的问题
你可能会遇到点击<router-link>标签至跳转页面，但跳转页面，没有显示的问题，其原因可能是在index.js里创建的vuerouter对象里面的属性书写错误，其属性值是routes而不是routers//App.vue<template> <div id="app"> <router-link to="/home">首页</router-link> <router-link to="/about">关于&
2021-03-06 20:41:24
4350
2
原创 JavaScript中的高阶函数filter，map，reduce
JavaScript中的高阶函数filter，map，reducefilter()要求有一个回调函数，回调函数必须返回一个boolean值——当为true时，会自动将这次回调的n加入到新的数组中；当为false时，函数内部会过滤掉这次的n<script> let arr=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]; //要求返回arr中大于10的元素 let newarr=arr.filter(function(n){ return n>
2021-03-02 23:07:34
132
原创 Vue中v-for遍历数组和对象
Vue中v-for遍历数组和对象<body> <div id="app"> <ul> <li v-for="(item,index) in arr">{{index}}.{{item}}</li> </ul> <ul> <!-- 第一种遍历方法 --> <li>{{info
2021-03-02 22:52:13
1234
原创 Vue条件指令v-if即v-else的使用
Vue条件指令v-if即v-else的使用Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件当v-if为true时，其所在的元素被渲染，则v-else所在的元素不被渲染举个简单的例子<body> <div id="app"> <h2 v-if="true">{{message}}</h2> <h1 v-else>我是男生</h1> </div>
2021-03-02 22:35:09
984
原创 Vue中v-on的使用
Vue中v-on的使用v-on的介绍作用：绑定事件监听器缩写：@参数：event小案例(点击+数字加一，点击-数字减一)<body> <div id="app"> <h2>{{counter}}</h2> <button @click="add()">+</button>//绑定add()函数 //也可以<button v-on:click="coun
2021-03-02 22:14:31
640
原创 Vue中v-bind的使用
Vue中v-bind的使用我们之前学到的指令主要作用是将值插入到模板的内容之中，但是除了内容需要动态来决定之外，某些属性我们也希望动态来绑定，这时，可以使用v-bind指令v-bind指令的作用：动态绑定属性缩写(简写，语法糖)：：(一个冒号)v-bind绑定style 例如：(给h2标签的元素的颜色设置成红色，字体大小设置成50px)<body> <div id="app"> <h2 v-bind:style="{color: red,font
2021-03-01 23:12:00
405
1
原创 Vue中的插值操作及其他指令
Vue中的插值操作及其他指令插值操作<body> <div id="app"> <h2>{{message}}</h2> <h3>{{message+' '+'李银河'}}</h3>//也可以做字符串的拼接 <h4>{{lastName+' '+firstName}}</h4> <h5>{{lastName}} {{fir
2021-02-28 20:50:07
133
原创 Vue中的options选项
Vue中的option选项el类型：string(’#app’)或HTMLElement(document.querySelector(’#app’))作用：决定Vue实例会管理哪一个DOMdata类型：Object或Function作用：Vue实例对应的数据对象methods类型：{[key: string]:Function}作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用...
2021-02-28 20:35:34
1644
原创 Vue的简单使用及小案例
Vue的简介Vue的安装在官网上下载源码Vue.js，直接在代码中引用<script src="./js/vue.js"></script>Vue的初体验<body> <div id="app"> <h1>{{message}}</h1> <h2>{{name}}</h2> </div> <!-- 引入Vue.js --
2021-02-28 20:32:06
207
原创 ES6——class(类)的介绍
ES6——class(类)的介绍ES6提供了更接近于传统语言的写法，引入了class(类)这个概念，作为对象的模板，通过class关键字，可以让对象原型的写法更加清晰，更像面对对象编程的语法class声明类，constructor定义构造函数初始化 class Phone1 { constructor(brand, price) { this.brand = brand; this.price = price
2021-02-28 20:15:20
257
原创 ES6箭头函数
ES6箭头函数格式原来的函数写法function fn(a,b){ return a+b;}箭头函数写法let fn=(a,b)=>{ return a+b;}let result=fn(1,2);console.log(3);注意点this是静态的，始终指向函数声明时所在作用域下的this的值，即使使用call，apply等方法改变作用域，也不会改变this的指向例如： window.name = 'jisoo'; let obj =
2021-02-28 19:58:25
156
原创 ES6字符串的扩展(includes()，startsWith()，endWith())
ES6字符串的扩展在ES5中，我们学习到了indexOf()和lastIndexOf()来检索字符串，ES6为我们拓展了三种检索字符串的方法，分别是includes()，startsWith()，endsWith()includes()返回布尔值，表示是否找到了参数字符串let str = 'hello world';console.log(str.includes('ell'));//truestartsWith()返回布尔值，表示参数字符串是否在源字符串首部let str =
2021-01-21 12:20:02
284
原创 ES6——字符串，数值，布尔值以及函数参数的解构赋值
ES6——字符串，数值，布尔值以及函数参数的解构赋值字符串的解构赋值之所以字符串能够被解构，是因为字符串被转换成了一个类数组的对象 let [a, b, c, d, e] = 'Jisoo'; console.log(a); //J console.log(b); //i console.log(c); //s console.log(d); //o console.log(e); //o类数组都有l
2020-12-10 23:07:46
226
原创 ES6——对象的解构赋值
ES6——对象的解构赋值与数组一样，对象也可以进行解构let {name, age} = {name: 'jisoo', age:25};console.log(name);//'jisoo'console.log(age);//25但是对象的解构赋值和数组的解构赋值有一个区别就是，数组的元素是按次序排列的，变量的取值是由它的位置决定的，而对象的属性没有次序，变量必须与属性同名才能取到正确的值let {job, salary}={salay: 20000, job: 'doctor'};c
2020-12-10 21:47:11
133
原创 ES6——数组的解构赋值
ES6——数组的解构赋值解构的定义ES6允许按照一定模式从数组和对象中提取值，然后对变量进行赋值在以前，为变量赋值只能直接指定，例如： let a=1; let b=2; let c=3;而自从ES6引入了解构赋值之后，可以下列这样定义变量： let [d, e, f] = [4, 5, 6]; console.log(d, e, f); //4 5 6 console.log([d, e, f]); //[4,5,6]上述代码就
2020-12-08 22:40:22
338
原创 ES6块级作用域详解
ES6块级作用域详解在ES5中，只有全局作用域和函数作用域，没有块级作用域，而let实际上为JavaScript新增了块级作用域 function f1() { let n = 5; if (true) { let n = 10; } console.log(n); } f1(); //5上述代码有两个代码块，都声明了变量n
2020-12-06 20:44:31
205
原创 ES6中let const命令详解及区别
ES6中let const命令详解及区别一. let命令let命令用于声明变量，其用法与var类似，但是所声明的变量只在let命令所在的代码块内有效 { let a = 1; var b = 0 } console.log(a); //因为在a所在的块级作用域之外访问，所以会抛出错误let不存在变量提升，而var存在变量提升 console.log(temp); //undefin
2020-12-06 20:31:15
236
原创 jQuery自定义动画animate
jQuery自定义动画animate//css代码div{ position: absolute;//自定义动画的元素必须添加定位 width: 100px; height: 100px; background-color: red;}//html代码<div></div>//jQuery代码(记得引入jQuery文件)$(function(){ $('div').animate({ width: 300, height: 300, backgro
2020-12-05 21:11:06
207
原创 jQuery元素遍历，创建，添加，删除操作
jQuery元素遍历，创建，添加，删除操作元素遍历语法一：$('div').each(function(index,ele){ }) (主要用于遍历元素)//html代码 <div>1</div> <div>2</div> <div>3</div>//jQuery代码(记得引入jQuery文件) $('div').each(function(index,ele){
2020-12-05 21:04:16
639
原创 jQuery事件处理及事件解绑
jQuery事件处理及事件解绑绑定单个事件 div{ width: 200px; height: 200px; background-color: teal; } <div></div> //方法1 $(function() { $('div').click(function() { ale
2020-12-05 19:47:44
166
原创 jQuery获取或设置元素的属性值
jQuery获取或设置元素的属性值获取元素属性值固有属性($('div).prop(‘color’))自定义属性($('div).attr(‘index’)) <a href="www.baidu.com" title="百度">百度</a> <input type="checkbox" checked='checked'> <div index="1"></div> console.log($('a').
2020-12-05 18:45:09
947
原创 jQuery筛选方法及筛选选择器
jQuery筛选方法及筛选选择器筛选选择器 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul>$(‘li:first’
2020-12-05 18:10:49
412
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人