- 博客(41)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 swiper、vant组件的基本使用方式以及$nextTick()的使用
swiperswiper是轮播图插件swiper的安装npm i swiper@5.4.5 --save ps：(生产依赖是要放在服务器上的)swiper官网Swiper演示 - Swiper中文网收录了Swiper的40多个在线示例（swiper demos），Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端，以及PC端网站能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。https://www...
2022-01-26 21:39:18
3010
原创 Vue项目中的反向代理相关概念及配置
反向代理使用场景在前后端分离开发的场景，前端有个服务器（提供静态页面），后端有个服务器（提供接口）此时，前端需要连接后端的接口，就会出现跨域问题 在发布环境中，如果存在跨域问题，使用nginx 如果前后端代码在一个服务器，不存在跨域问题 跨域的解决方案jsonp CORS（后端解决方案）：cross origin resource sharing 反向代理（前端解决方案）什么是反向代理反向...
2022-01-26 00:48:46
3929
原创 Vuex模块化modules、mapState/Getters/Mutations/Actions的使用方法
vuex配置项modules当项目比较大时，所有的全局数据都存放在state里，会非常混乱，使用modules，把数据进行分类处理，即模块化使用方法每个模块是一个独立的store，管理着不同类型的数据，然后总体的store引入所有的分模块store即可在分模块中：src/store/loading.js文件下export default { namespaced:true, state:{ isLoading:f...
2022-01-25 19:08:39
3110
原创 Vue二级路由、路由模式、路由守卫、路由懒加载使用方式与事例
二级路由路由配置｛ path:"/goods", component:Goods, children:[ {path:"/new", component:New}, { path:"/3c", ...
2022-01-24 17:55:15
660
原创 Vue路由插件的作用、路由配置、路由传参方式相关概念理论
路由是什么vue的路由使用在SPA应用中的组件跳转，相当于多页面的a标签路由在vue脚手架中的使用路由的使用安装npm i vue-router -S定义组件home.vue/goodslist.vue创建vueRouter对象，并做路由配置和引入// src/router/index.js中import Vue from 'vue'//1. 引入路由包import Router from 'vue-router'//2. 安装插件包到Vue上,Vue.
2022-01-24 00:15:00
402
原创 Vue下拉刷新，上拉加载使用better-scroll插件的实现方法
基本写法<template> <div class="wrapper"> <ul> <div v-show="downShow">加载中…………………………</div> <li v-for="(book,index) in books" :key="index"> <p>编号：{{book.id}}</p>
2022-01-23 16:58:10
733
原创 Vue项目环境脚手架(vue-cli)的搭建步骤及mock数据axios请求介绍
什么是vue-cli：通过官方脚手架，搭建模块化、工程化、自动化开发环境脚手架是个工具，帮程序员自动搭建项目环境（创建了一些文件夹和文件，并写了最基础的代码）。安装脚手架步骤全局安装脚手架 npm i @vue/cli -g查看脚手架版本 vue -V创建项目步骤在磁盘下cmd运行 vue create 项目目录名选择 yes选择 default默认2.0版本cd 项目目录名运行项目 npm run serve项...
2022-01-17 00:10:42
518
原创 Vue的生命周期及每个阶段的钩子函数及原理和案例（重点）
每个Vue实例在被创建时都要经过一系列的初始化过程，需要设置数据监听、数据挂载、渲染dom、数据更新时更新DOM等，同时在这个过程中也会运行一些生命周期的钩子函数，这给了程序员在不同阶段添加自己代码的机会什么是vue生命周期？就是vue对象从创建，到使用再到销毁的过程Vue生命周期经历了几个阶段？四个阶段，八个钩子函数钩子函数beforeCreated 数据挂载阶段：把传入的data属性内容，赋给vue对象...
2022-01-15 00:17:40
506
原创 Vue组件的事件、内容插槽、组件间的通信的介绍与案例
组件的事件流程：外部绑定自定义事件、外部写事件处理函数、内部事件绑定，内部写触发函数 <div id="box"> <input type="button" v-bind:value="str" @click="fn" /> <!-- 自定义标签需要自定义事件 --> <!-- 正常绑定事件，事件名自定义 --> <book :name="b...
2022-01-12 13:24:22
384
原创 Vue组件基本概念、基本语法、使用方式、组件属性介绍与案例
组件的概念组件封装的是完整的页面功能（包括了html、css、js）组件是自定义标签，vue提供方法让程序员自定义标签，对页面进行模块化Vue的组件就是一个Vue对象，组件的配置项没有el属性组件的使用定义组件let 组件名=Vue.extend({template:`<div> <p>书籍名称：{{name}}</p> </div>`, data(){ return...
2022-01-11 00:24:03
578
原创 Vue自定义指令、过滤器、混入的介绍和案例
自定义指令官方指令在不够用的情况下，考虑自定义指令，自定义指令用来操作dom全局定义Vue.directive("指令名",{bind:function(el,binding){},inserted:function(el,binding){},update:function(el,binding){}})钩子函数bind: 当指令首次绑定在dom元素上时使用，此时dom还未...
2022-01-10 23:32:42
331
原创 Vue对象中的方法属性、计算属性、侦听属性和自定义指令相关语法及面试问题
methods（方法）methods属性里放的是普通函数定义，这些函数可以作为事件处理函数，也可以在其他地方调用computed（计算属性）什么是计算属性：计算属性是一个函数，是经过data里的数据进一步运算后的数据，执行时会立即返回结果为什么使用计算属性：在模板中放入太多逻辑函数调用会让模板过重且难以维护，每次调用都会重新执行函数计算属性特性：当data数据不发生变化时，不会再进入函数体内进行运算（即存在缓存），只有原数据变化时，才重新计算，是响应式的，加快了程序运行效率（计算属性只能
2022-01-09 19:36:18
1463
原创 用Vue框架实现购物车和记事本功能的步骤及解析
购物车购物车需求如下：1：实现金额运算，金额=单价*数量2：实现数量的加减功能3：点击全选按钮，所有商品的复选框按钮点亮4：再次点击全选按钮，所有商品的复选框按钮熄灭5：只要有一个商品未被勾选，则全选复选框熄灭，所有商品都勾选，则全选自动点亮6：点击删除，则删除当前商品7：实现总计，为勾选的商品的金额之和代码实现如下：HTML部分 <table border="1" cellspacing="0"> <tr> <!-
2022-01-08 18:32:32
555
原创 Vue如何对样式进行操作以及响应式和非响应式的情况
样式操作原理：Vue样式操作，其实就是对style属性和calss属性进行绑定，达到动态更改其属性值的目的第一种方式：通过绑定字符串改变样式<div> <input type="button" value="变" @click=" change "> <p v-bind:style="s " v-bind:class="className">啦啦啦</p> <p v-bind:style="'...
2022-01-08 16:52:40
1085
原创 Vue中事件的绑定、表单的双向绑定及修饰符语法规则和案例
事件的绑定指令：v-on：去掉on的事件名="方法" 或 @去掉on的事件名="方法"事件对象：在事件绑定时不传参数，在方法定义时定义一个形参，该形参就是事件对象； 如果事件绑定时需要传参数，则$event代表事件对象的实参事件的修饰符普通事件修饰符.stop 阻止事件冒泡（阻止子元素向父元素传播） .prevent 阻止浏览器的默认行为 .self 事件源是本身才能触发（无视其他...
2022-01-07 01:40:51
350
原创 Vue.js框架的介绍和基础指令语法（view层）相关操作及案例
什么是框架概念：将函数进行封装，多个函数封装形成一个模块，多个模板组成了框架。功能：框架改变了编程思想和代码的整体结构；使得模块内部高内聚，模块之间低耦合，提升了维护性及代码的分工与配合。框架模式mvc架构模式：model模型 view视图 controller控制器模型完成数据的增删改查，视图负责数据的显示，控制器是中间层负责核心流程mvp架构模式：model模型 view视图 presenter控制器两者区别：mvc架构模式，视图可直接绕过控制器，直接从model中获取数据；
2022-01-06 00:49:56
1376
原创 SASS------CSS的编程式开发工具相关概念及操作命令
概念 css不是编程语言，css代码过于静态，sass的出现，使得css可以通过编程语言来实现样式的书写功能 扩展了css3.0，增加了规则、变量、混合、判断、选择器、继承等特性，使得css代码编程化，且易于组织和维护运行环境 sass是基于ruby平台运行的，gem是此平台的包管理工具sass的安装（请确保ruby已安装） cmd运行 gem install sasssass的编译 ps：...
2021-12-26 18:04:39
7818
原创 Git 项目版本管理工具的使用及相关命令的操作
Git 是开源式版本控制系统，是版本管理工具，可以将项目的内容信息存放在版本管理服务器上，方便项目组人员进行访问和查询修改。本地操作步骤 登录git config --global user.name "name"git config --global user.email "email@example.com" 创建本地库（必须在项目目录下鼠标右键进入git）git init ps：会生成一个隐藏文件夹...
2021-12-26 00:52:25
152
原创 node.js与gulp相关服务器搭建、模块化、npm包、操作文件理论与案例
node.js 概念：node.js是一个js运行环境，有大量的api node.js=谷歌V8引擎+大量的api 读取一个js文件：cmd中 --------------node 文件名 作用：js依赖于浏览器的js引擎，只能在页面运行，而nodejs实现了js脱离浏览器，在cmd控制台即可运行，可以实现诸多功能搭建服务器 创建http对象:const http=require("http");...
2021-12-25 23:48:46
545
原创 js jQuery各种API、dom节点的操作、插件相关概念及应用
各种API属性的读写 写：jqDOM.attr(" 属性",属性值) jqDOM.attr({key:val,key,val}) 读：jqDOM.attr("属性")$("div").attr("class", "haha")$("div").attr({ a:222, b:333 })console.log($("div").attr("class"));注意：对于input的checked属性如何判断...
2021-12-22 00:17:24
460
原创 jQuery Ajax相关api（重点）
Ajax底层 语法：$.ajax({url,type,data,success})$.ajax({ url: "3-get.php", type: "get", data: { name: "yhc", id: 5321 }, success: function(res) { console.log(res) } })Ajax中层load方法 语法：jqDOM.load(url,[请求参数],[回调函数])...
2021-12-21 11:55:10
987
原创 jQuery选择器、节点遍历、事件、动画api及应用
延迟加载 $(document).ready(function(){ }) 简写：$(function(){ })原生window.onload=function(){ }与jquery延迟加载区别： ready表示页面文档加载完成后 onload表示页面内所有元素都加载完成后包装集 通过jQuery方式获取的对象，都保存在包装集中（数组）jQueryDom和原生Dom相互转换的方式 get方...
2021-12-21 11:28:50
137
原创 js 深拷贝浅拷贝、构造方法设计模式（单例、工厂、观察者）
拷贝 概念：用已于对象初始化一个新的对象 let a=123; let b=a;浅拷贝（只针对引用类型） 概念：只拷贝地址，不拷贝空间和数据 let arr = [5, 6, 8, 4, 2, 3, 5, 4]; let arr1 = arr; arr1[0] = 666; console.log(arr, arr1) ps：相当于两把相同的钥匙对应一个空间深拷贝（只针对引用类型） ...
2021-12-19 18:50:44
226
原创 js 函数的原型对象、原型继承、es6继承相关概念案例
原型对象 概念：原型对象，是函数（构造函数）对象的一个属性，它保存着所有实例化对象共享的函数和属性 作用：类有很多的属性和方法，一个类可以有多个实例化对象，每次创建一个实例化对象都要new一个新空间，有些实例化对象拥有相同的属性和方法，为了不浪费空间，则将这些共有的属性和方法共享，保存在原型对象中，这样就只需要开辟一个空间。 写法： function Student(id, name) { this.id = id; this.name =...
2021-12-19 16:16:01
254
原创 js 闭包函数、函数的定义、内置对象以及递归
自运行 一个函数定义时，可以自动运行的函数，针对于匿名函数原理 let f=function(){ } f()等价于function(){ }()语法 （function(){ }()） (function(){ })() ! function(){ }() void function(){ }()闭包 概念：函数嵌套函数，被嵌...
2021-12-19 00:33:10
170
原创 js Promise+Jsonp跨域访问相关概念及案例
Promise 概念：promise是一个对象，promise里面保存着一个未来才会结束的事件的结果，它可以获取异步操作的消息，并且promise提供了统一的api，各种异步操作都可以用同样的方法进行处理。写法：...
2021-12-17 11:01:43
337
原创 Ajax基本概念及请求步骤（同步异步概念）
同步异步同步 同步代码是按照代码的顺序一步一步执行的代码；在执行完一个方法后，一直等待返回值，这时系统是阻塞的，只有接收到返回的值后才往下执行其他的命令异步 异步代码是需要消耗等待时间的代码；执行异步方法时，不必阻塞性地等待返回值，而是正常执行后续代码，在所有同步代码执行完毕后，如果异步方法已经准备好，则再执行异步方法。...
2021-12-09 00:53:12
439
原创 前端php与数据库(MySQL)的连接和常用操作
数据库数据库是按照数据结构来组织、存储和管理数据数据类型Int 数值varchar（可变字符串）/char （不可变字符串）date 日期数据库相关操作创建表create table 表名 (字段 类型 ，字段 类型....)例：create table student(stuid int primary key,（不能重复）stunam...
2021-12-08 00:58:30
2313
原创 JavaScript ES6语法
let 与var的区别let声明变量有以下几个特点：1.没有预解析过程（即没有变量提升，var有变量提升）；2.必须定义才能使用；3.不可以重复声明；4.{}代表块级作用域，let有块级作用域，var只有函数作用域。const特点：修饰的变量称为只读变量，只能读不能写。（其值不可更改）必须进行变量的初始化必须先定义后使用不能重复定义块级作用域暂时性死区修饰引用类型时可以更改其值(引用类型有两块空间)例如const arr=[1,2,3,4];
2021-11-29 00:35:12
453
原创 JS正则对象（正则表达式）方法属性总结及表单验证例题
正则表达式是一个描述字符规则的对象。前端往往有大量的表单数据校验的工作，采用正则表达式会使得数据校验的工作量大大减轻，如邮箱验证，手机号码，等等。正则表达式的组成：普通字符+特殊字符正则的创建构造方法 let reg=new RagExp("格式控制字符串"，"修饰符")字面量方法 let reg=/格式控制字符串/修饰符eg：let reg=new RagExp("a") 至少包含一个a let reg=/a/ ...
2021-11-28 20:43:43
688
原创 JS文档对象模型（DOM）事件的类型与事件对象
事件的三要素元素、事件类型、事件对象事件对象的作用携带着相关事件类型的所有属性和方法ps：事件对象的产生，必须有事件；根据需求，事件对象可有可无。调用事件对象的写法：document.onclick=function(evt){var e=evt||event;console.log(e)}鼠标事件对象的属性e.pageX/e.pageY——针对整个页面的左顶点e.clientX/e.clientY——针对可视窗口的左顶点e.offsetX/e.offsetY——
2021-11-24 00:29:15
469
原创 JS文档对象模型（DOM）操作元素属性样式的属性及方法
DOM是一个树形结构，节点类型分为元素节点和文本节点根据层级关系访问元素节点节点.firstElementChild——返回此节点中的第一个节点 节点.lastElementChild——返回此节点中的最后一个节点 节点.nextElementSibling——下一个兄弟节点 节点.previpusElementSibling——上一个兄弟节点ps:document.body即可代表body的js元素节点根据层级关系访问文本节点（常用属性）节点.fir...
2021-11-21 17:57:53
712
原创 JS浏览器对象模型（BOM）window对象
所有的属性和方法在调用时都要带前缀，只有前缀是windows的可以省略。windows的常用属性1、document属性doucument.write（）打印至大白板的方法此方法带有字符串解析功能，例如document.write("heihei"); document.write("<br>"); document.write("<font color='red'>" + 123 + "</font>");注意在与事件连用时会覆盖原页面do
2021-11-21 16:48:23
357
原创 关于js（Math、Date、定时器、电子时钟）的方法
Math方法Math.floor(数值)——向下取整 Math.ceil(数值)——向上取整 Math.round(数值)——四舍五入取整 Math.sqrt(数值)——开平方 Math.pow(m，n)——m的n次方 Math.min(数值，数值，数值)——返回最小值 Math.max(数值，数值，数值)——返回最大值 Math.PI——圆周率 Math.abc(数值)——绝对值 Math.random()——0-1的随机数（左开右闭）例题输出15-35之间的随机数var.
2021-11-20 17:30:07
168
原创 关于js字符串的方法（api）
字符串api方法 功能 参数 返回值 charAt 返回对应位置的字符 str.charAt(位置) 对应位置的字符 charCodeAt 返回对应位置的字符的asc值 str.charCodeAt(位置) 对应位置的字符的asc值 fromCharCode 返回该asc值对应的字符 String.fromCharCode(asc值) 对应asc值的字符 indexOf 查找第一个该元素 str.inde
2021-11-20 15:41:01
78
原创 关于js数组的方法（api）
数组的三个迭代函数方法 forEach map filter 功能 遍历整个数组执行某种功能 遍历整个数组，执行某种功能，根据return返回新数组 遍历整个数组，根据return的布尔值，返回新数组 参数 arr.forEach(回调函数) arr.map(回调函数) filter(回调函数) 返回值 无 根据回调函数内的return拼成新数组 根据return返回的布尔值，组成新数组 回调函数 fu
2021-11-20 15:08:24
75
原创 js数组三种排序方式(冒泡排序、选择排序、sort()排序）
冒泡排序<script type="text/javascript"> var arr1 = [1, 5, 6, 4, 8, 9, 2, 4]; function sort(arr) { var t; for (var i = 0; i < arr.length - 1; i++) { for (var j = 0; j < arr.length - 1 - i; j++) { if (arr[j] > arr[j + 1]) { t
2021-11-20 11:57:32
535
原创 元素见缝插针等常见问题总结
元素见缝插针问题：元素都给浮动后，排列多行时，给了hover:margin-top:-10px;则一行中最后一个元素触发hover时会导致本该排列在第二行的第一个元素见缝插针挤在第一行最后一个元素下的一点10px空间原因：位置空出，会导致本该排列在第二行的元素补上解决方法：用位移后原有空间还存在的方式产生位移。如相对定位，和变形位移属性定位元素不设宽的话给跟随本身内容的宽如果定位元素是通栏的话，要注意设置宽度！内联和内联块元素给了浮动或绝对定位和固定定位后会变为块元素，便
2021-11-06 00:22:31
119
原创 高度塌陷问题以及BFC
高度塌陷产生的条件：1、父元素不设高；2、所有子元素浮动由于子元素浮动脱离文档流，父元素高度变为0；会影响其他元素布局解决方法；1、给父元素添加overflow:hidden属性；（BFC原理）2、给父元素设置高度；3、添加一个子元素，并给其清除浮动属性，清除浮动属性只能是块元素来使用；4、完美清除法：用伪元素选择器 父元素：：after｛content="" display:block clear:both｝BFC块级格式化上下文在页面中形成一块特殊独立渲...
2021-11-05 23:39:21
63
原创 CSS3.0（过渡、动画、弹性盒、响应式）总结（2）
过渡属性transition:属性 时间 延迟时间 效果property duration delay timing-function过渡属性谁变给谁加，使用复合写法只需要写时间即可生效，属性默认是all动画属性定义动画：@keyframes 动画名｛from{} 50%{} to{}｝使用动画：animation:动画名 时间 延迟时间 效果 次数 交替 停止 停在哪一帧动画时间及延迟animation-duration/delay：s/ms动画效果属...
2021-11-04 17:34:21
206
空空如也
用js代码如何实现如图一个心形图案，求思路
2021-12-05
TA创建的收藏夹 TA关注的收藏夹
TA关注的人