- 博客(34)
- 收藏
- 关注
原创 nvue与vue间通信方式
需要注意的是,如果监听方法写在 onLoad 中需要保证该页面已经被加载过了(我就在页面没有加载的情况下找了半天监听不到的原因,吐槽一下遇到的坑),另外就是在页面销毁前用 uni.$off 关闭监听,不然每次加载都会新增一个监听,这样会被触发多次!发送信息,data为json格式,(只支持字符串),nvueId是nvue所在webview的id,viewId可以使用$getAppWebview()获取。2、在nvue的页面上使用globalEvent模块监听plusMassage事件。
2025-06-06 10:19:29
471
原创 v-if与v-for联合使用
通过计算属性filteredItems来过滤掉那些isActive为false的项,然后再使用v-for进行迭代。这种方法避免了对所有项进行渲染检查,从而提高了性能。如果v-if放在v-for的内部,那么即使条件为false,v-for仍然会对整个循环体进行渲染,只是最后不会将其插入到 DOM 中。使用了v-show而非v-if。虽然这种方式不会移除 DOM 元素,但可以避免每次渲染时都进行条件判断,适用于频繁切换的情况。,因为这样可以避免不必要的渲染操作。同时使用v-if和v-for时,
2025-06-05 11:22:48
608
原创 小白级-终端操作数据库案例
-----------------------------------数据库的三大设计范式.sql------------------------------------------------------>foreign key(class_id) references classes(id) //说明:class_id值来自classes里的id值。<------------------约束------------------------->(eg:中国四川省成都市武侯区京城大道200号)
2025-05-14 23:33:10
1020
原创 echarts初始化获取容器时报错“TypeError: this.dom.getContext is not a function“
不管使用class名获取,还是通过ref获取,都会获取失败,报错this.dom.getContext is not a function。通过以上方法,打印出来的对象,就可以看出差异性。
2025-04-30 10:06:45
843
原创 同一个跳转路由多次点击或者当前页面跳转当前页面报错Avoided redundant navigation to current location: “/industrialServices“
说明:1.编程式路由跳转到当前路由(参数不变),多次执行会抛出 NavigationDuplicated的警告错误?1.3 如果多个编程式跳转,那要一个一个添加失败成功回调 --解决 :重写push方法。this.$router属性:当前属性值是VueRouter类的一个实例。–声明式导航没有这类的问题,因为vue-router底层已经处理号了。1.1为什么编程式导航进行路由跳转的时候,有这种警告呢?–路由跳转有两种方式:声明式导航,编程式导航。push:VueRouter类的一个实例。
2025-04-29 10:52:13
245
原创 express搭建后端服务
○ 通俗的理解:Express的作用和Node.js内置的http模块类似,是专门用来创建Web服务器的。○ 官方给出的概念:Express是基于Node.js平台,快速,开放,极简的Web开发框架。○ 使用Express,我们可以方便、快速的创建Web 网站的服务器或API接口的服务器。官网:https://www.expressjs.com.cn/○ Web 网站服务器:专门对外提供 Web 网页资源的服务器。○ API接口服务器:专门对外提供API接口的服务器。● 什么是Express?
2025-04-02 15:14:15
505
原创 取消请求或者多个请求保留最新请求
优化:当连续请求时,数据没有及时响应,则有多个请求存在,就取消上一次请求,保留当前一个请求。发送请求按钮,取消请求按钮。
2024-05-17 22:14:11
198
原创 vscode安装json-server报错
解决:用管理员运行PowerShell窗口,执行命令set-ExecutionPolicy RemoteSigned。如果-v查询不出来,提示Unknown option ‘-v’ ,就是用–version去查询。(注意是PowerShell窗口,不是命令提示符窗口)再去-v查询json-server版本。
2024-05-13 22:01:25
679
原创 vuex中modules模块
由于是没有对模块进行命名空间的,所以默认在使用 this.$store.commit/dispatch() 在提交方法的时候,会对所有状态管理的actions和mutations中的方法进行匹配,这就导致了一个问题,就是当不同模块之间的方法命名一样的情况下,会造成方法同时调用的问题。2.调用子模块modulesA中的方法的时候,使用 this.$store.state.moduleA.name。这样就可以去调用指定的模块里面的方法,当前最外围的mutations和actions还是一样的调用方式。
2024-04-17 19:57:39
400
原创 创建vue2项目
5. 安装node-sass(搭配最新版本Node,其他版本会报错): cnmp i node-sass@7.0.1 --save-dev。4. 安装sass(搭配最新版本node,其他版本会报错): cnpm i sass-loader@10.2.1 --save-dev。2. 创建项目 vue create item-name (itemName是项目项目名字,不能是大写)1.安装vue/cli 命令npm i -g @vue/cli。3. npm run serve启动项目。
2023-03-23 22:16:03
199
原创 轮播图案例总
1.DOM及正则<style> .maxbox{ width: 400px; height: 400px; /* border: 1px solid #000; */ } .maxtbox{ width: 400px; height: 400px; /* border: 1px solid #000; */ position: absolute;
2021-04-17 10:12:40
73
原创 DOM练习
1.表格动态添加删除<button>添加表格</button><script>//表格的动态添加,删除//创建元素节点,标签为tablevar tab = document.createElement('table')//添加属性 属性名border 值1tab.border = 1//将table添加到父节点body下document.body.appendChild(tab)var id =1//获取按钮,判定事件document.queryS
2021-04-17 09:16:42
264
原创 轮播图合集及相关案例
tab切换案例HTML代码:图片可以不给,盒子改个背景颜色就行<style> .tab{ width: 500px; height: 400px; border: 3px solid #000; margin: 50px auto; } ul,ol{ list-style-type: none; pa
2021-04-15 21:35:49
490
原创 面向对象放大镜
html代码:<style> .enlarge{ width: 400px; height: 502px; border: 1px solid #000; position: relative; } .middle{ width: 400px; height: 400px; border-bottom: 1px solid #000; posi
2021-04-15 20:46:33
254
原创 面向对象放烟花
全程JS写法,无HTML代码代码有注释,助于理解function Fire(){ //创建个夜空 this.nightSky = document.createElement('div') //给夜空设置样式 this.setStyle(this.nightSky,{ width:'800px', height:'500px', backgroundColor:'#ccc', position:'relati
2021-04-15 20:42:55
269
原创 面向对象贪吃蛇
没有HTML代码,全程有JS写有些代码有注释,助于理解贪吃蛇游戏:主要三部分地图随机生成食物蛇及身体创建3.1-蛇的移动3.2-蛇的吃食物3.3-蛇的死亡<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta
2021-04-15 20:34:59
152
原创 分页插件
<!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>Doc
2021-04-13 21:35:53
260
2
原创 js兼容问题
兼容问题总结获取标签问题document.getElementsByClassName('类名')在低版本e中不兼容。解决document.getElementById('id名')document.getElementsByTagName('标签名')document.getElementsByName('name属性值')document.querySelector('css选择器')document.querySelectorAll('css选择器')卷去的高度问题//
2021-04-06 16:45:48
133
原创 字符串
ES5的语法严格模式由于JS的作用域和隐式声明变量等语法会造成很多预想不到的错误,所以ES5中新增了一个严格模式的语法,用语言个规范代码的书写适用语法:“use strict”使用说明:1.要放在代码的最前面,也就是在script标签中的第一行或者某个函数中的第一行,否则会失效2.严格模式可以规范当前script标签或者当前函数中的代码,不能闺房别的script标签中的代码和别的函数规范的语法:1.不允许隐式声明变量2.禁止函数中的参数重名3.禁止函数中的this代表window为
2021-03-29 19:13:37
349
原创 第六天数组
数组引入我们知道一个变量存储一个值,一个变量是一个容器,如果给很多容器中都放入商品的话,我们就可以开超市了。我们都去超市买过东西,超市的东西都整齐的摆放在货架上,而不是所有的东西都堆在一起。为什么呢?因为便于管理商品。咱们代码中也有一个货架,叫数组,为了便于管理多个值的。假设,我们现在要存一个班的所有学生姓名,如果每个姓名都存在一个变量中,就跟所有商品随便的堆在一起一样,不好管理,所以我们会存到数组中。概念内存中的多个容器排列起来...
2021-03-27 17:37:17
225
原创 函数,事件及对象
函数及事件作用域函数外边的变量是全局变量,可以在函数里面与外面使用var num = 1;function test(){num++;console.log(num);}console.log(num); // 2函数内部的变量叫做局部变量,只能在局部(函数内部)使用function test(){var num1 = 10;num1++;console.log(num1);}test(); // 11console.log(num1); // 报错,num1未定义
2021-03-26 22:24:21
236
原创 逻辑分支练习
逻辑分支练习判断整数的范围<script type="text/javascript">// 判断一个整数,属于哪个范围:大于0;小于0;等于0var num = prompt("请输入一个数字");if(num > 0){ document.write(num+"属于大于0");}else if(num < 0){ document.write(num+"属于小于0");}else { document.write(num+"属于等于0")
2021-03-23 17:55:00
161
原创 学习JS的第二天
学习JS的第二天if语句语法:单分支if(条件){ 当条件为true时执行的代码段}双分支if(条件){ 当条件为真时,执行的代码块}else{ 当上述条件不满足时,执行的代码块}双分支简写:三元运算语法: 条件?条件成立时运行的代码 : 条件不成立时运行的代码多分支if(条件1){ 当条件为true时执行的代码段}else if(条件2){ 当条件为true时执行的代码段}....else{ 当上述条件不满足时,执行的代码块}...
2021-03-23 16:59:31
158
原创 学JS的第一天
学JS的第一天JS概念支持面向对象的跨平台脚本语言理解:-脚本语言:依赖别的语言才能运行HTML必须在浏览器中才能运行,js嵌套在HTML中才能运行- 跨平台:可以在不同的平台上运行Windows,Linux,安卓。。。- 支持面向对象使用面向对象的思想编程JS的组成ECMAScript:基础语法BOM:提供了操作浏览器对象的一套方法DOM:核心内容,提供了操作文档对象的方法js注释单行注释—//注释内容多行注释—/* 注释内容 */js输出弹窗形式-ale
2021-03-22 23:28:32
143
原创 CSS3如何实现轮播图效果
轮播图原理大概是这样的,假定四张图片需要做轮播效果,首先需要将这四张图片并列放置,然后将这个整体并列向左移动,每当一张图片完整的从显示框走出,则将这张图片放置到最后面,循环往复就可以实现图片向左(或一个方向)移动。...
2021-03-20 17:13:09
1621
原创 css3-多列(瀑布流)
css3-多列(瀑布流)多列布局类似报纸或杂志中的排版方式,主要用以控制大篇幅文本。多列属性 1、column-count(最大列数)属性规定元素应该被分隔的列数适用于:除table外的非替换块级元素, table cells, inline-block元素 2、column-gap属性规定列之间的间隔大小 3、column-rule设置或检索对象的列与列之间的边框。复合属性。column-rule-color规定列之间规则的颜色。column-rule-style规定列之
2021-03-19 18:00:26
213
原创 什么是BFC,如何触发BFC
什么是BFC,如何触发BFCBFCBFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域,只有Block-level box(块)参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。BFC的布局规则一、内部的Box会在垂直方向,一个接一个地放置。二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠(按照最大margin值设置)三、每个元素的margi
2021-03-19 17:46:42
1549
原创 H5新增标签
H5新增标签HTML5新增元素<header>用于定义文档或节的页眉<footer>用 于定义文档或节的页脚<article>用于定义文档内的文章<section>用于定义文档中的一个区域(或节)<aside>用于定义与当前页面或当前文章的内容几乎无关的附属信息<figure>用于定义一 段独立的引用,经常与说明(capt ion) <figcaption>配合使用,通常用在主文中的图片,
2021-03-19 17:40:01
244
原创 3D动画案例
3D动画案例如何做出这样的效果不多说直接上代码!!!1.transform-style----让转换的子元素保留3D转换transform–style属性指定嵌套元素是怎样在三维空间中呈现。注意: 使用此属性必须先使用 transform 属性.2.animation------使用简写属性把 animation动画属性 绑定到一个元素上3.3D位移主要包括translateZ()和translate3d()两个功能函数;4.3D旋转—包括rotateX()、rotateY()、rotat
2021-03-14 19:11:59
525
原创 FLEX布局
FLEX布局Flex容器:采用 Flex 布局的元素的父元素;(父级)Flex项目:采用 Flex 布局的元素的父元素的子元素;(子级)容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
2021-03-14 18:17:58
239
原创 HBuilder 使用教程
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
2021-03-14 16:40:20
4342
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人
RSS订阅