网站建设

利用Vue3 (一)创建Vue CLI 项目

目录 一、官方文档 二、创建Vue CLI项目 1、安装Vue CLI 2、创建web应用 3、启动web应用 三、Vue CLI项目结构讲解 一、官方文档 Vue3 文档 - vuejs https://www.vue3js.cn/docs/zh/ Vue核心功能:数据绑定...

js制作轮播图效果

轮播图在前端开发中我认为是一个比较重要的点,因为包含了很多原生js知识点,以下是我学习制作轮播图的过程 难点: 1、如何让底下圆圈和图片所对应自动动态生成 2、如何让底下圆...

Vue3(二)集成Ant Design Vue

目录 一、集成Ant Design Vue 二、组件的使用 1、完整引用 2、组件引用 三、组件使用示例 1、我们在home主页做修改 2、重新启动服务查看效果 四、总结 上一篇文章我们介绍了利用Vue3 创建...

Vue3(三)网站首页布局开发

目录 一、前言 二、实际案例 1、修改App.vue 2、调整布局 3、修改路由实现跳转 三、最后 一、前言 上篇文章Vue3集成Ant Design Vue 已经提到集成Ant Design Vue后,和Element Ui一样,还是组件的使...

Vue实现简单购物车小案例

本文实例为大家分享了Vue实现简单购物车的具体代码,供大家参考,具体内容如下 HTML首页 !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" meta http-equiv="X-UA-Compatible" content="IE=edge" meta name="view...

Vite+Electron快速构建VUE3桌面应用的实现

目录 一. 简介 二. 创建一个Vite项目 1. 安装 vite 2. 创建项目 3. 进入且运行 三. 配置Electron 1. 官方文档 2. 安装 3. 配置文件 四. 运行 五. 最后 一. 简介 首先,介绍下vite和Electron。 Vite是一...

原生JS实现分享侧边栏

本文分享一个用原生JS实现的分享侧边栏,实现效果如下: 以下是代码实现,方便大家复制粘贴。 !DOCTYPE htmlhtml head lang="en" meta charset="UTF-8" title分享到效果/title style #share { position: fixe...

原生JS实现登录框邮箱提示

本文分享一个由原生JS实现的注册或登录时,输入邮箱时下拉提示效果,效果如下: 实现代码如下: !DOCTYPE htmlhtml head meta http-equiv="Content-Type" content="text/html; charset=utf-8" / title原生JS实现...

Vue3 (五)集成HTTP库axios详情

目录 一、安装 axios 二、axios的使用 1、在主页中引用 axios 2、重新启动服务 3、何为跨域? 4、解决跨域问题 5、重新启动后端服务,再次访问 三、结论 一、安装 axios npm install axios@0.21...

Vue实现浏览器端扫码功能

背景 不久前我做了关于获取浏览器摄像头并扫码识别的功能,本文中梳理了涉及到知识点及具体代码实现,整理成此篇文章内容。 本文主要介绍,通过使用基于 vue 技术栈的前端开发技...

JavaScript防抖与节流详解

目录 防抖debounce 节流throttle 总结 防抖debounce 定义:对于短时间内连续触发的事件,比如滚动事件,防抖就是让某个时间期限内,事件处理函数只执行一次。 关于防抖,拿手指按压弹簧...

五十音小游戏中的前端知识小结

背景 在日语学习初期阶段,我发现日语五十音的记忆并不是很容易的,片假名的记忆尤其令人费神。这时我想如果有一个应用可以充分利用碎片时间,在午休或地铁上随时可以练习五十...

Vue路由router详解

目录 模块化的方式使用路由插件 使用路由 声明式导航 编程式导航 动态路由匹配 通配符匹配路径 查询参数query 响应路由参数的变化 命名路由,路由别名,重定向 嵌套路由 命名视图...

uniapp和vue的区别详解

目录 1.简单的页面示例 2.uni-app支持vue组件和小程序原生组件混用 3.常用标签,常用组件包括view、text、swiper、scroll-view等。 4.生命周期 4.1应用生命周期,这app.vue里面 4.2页面生命周期,可...

vue中的插槽详解

vue中代码的复用, 为我们提供了 mixnis. 模板的复用, 为我们提供了 插槽( slot ) 插槽的分类 默认插槽 具名插槽 作用域插槽 当我们的组件中 我们只需要插入一个 html 标签的时候, 就使用默...

原生JS实现呼吸轮播图

今天给大家分享一个用原生JS实现的呼吸轮播图,效果如下: 以下是代码实现,欢迎大家复制粘贴。 !DOCTYPE htmlhtml head meta charset="utf-8" / title原生JS实现呼吸轮播图/title style ul { margin: 0...

VUE在线调用阿里Iconfont图标库的方法

前言 多年前我本是个服务端小白,随着行业内卷,硬是被熬成了前端小白。。。开个玩笑,只是个人比较喜欢学习技术罢了!本章将带领大家以另一个高端的方式打开阿里Iconfont图标库...

原生JS实现加载进度条

本文分享一个原生JS实现的动态加载进度条特效,效果如下: 实现的代码如下: !DOCTYPE htmlhtml head meta http-equiv="Content-Type" content="text/html; charset=utf-8" / title原生JS实现加载进度条/title st...

原生JS实现拖拽位置预览

本文给大家分享一个拖拽元素时添加预览的小Demo,效果如下: 以下是代码实现,欢迎大家复制粘贴及吐槽。 !DOCTYPE htmlhtml head meta http-equiv="Content-Type" content="text/html; charset=utf-8" / title原...

前端的状态管理(上)

目录 1、什么是前端状态管理? 2、Vuex 3、Bus 总线 4、web storage 前言: 提到状态管理大家可能马上就想到: Vuex 、 Redux 、 Flux 、 Mobx 等等方案。其实不然,不论哪种方案只要内容一多起...

前端的状态管理(下)

目录 1、Redux 1.1、Store(图书馆管理员) 1.2、State(书本) 1.3、Action(借书单) 1.4、store.dispatch (提交借书单) 1.5、Reducer(包装书本) 2、状态管理的目的 前言: 续上篇前端的状态管理...

webpack拆分压缩css并以link导入的操作步骤

先看一下代码文件结构: 入口文件(index1.js)内容: import $ from 'jquery'import './css/index.css'import './less/index.less'$(function () { $('#app li:nth-child(odd)').css('color', 'red') $('#app li:nth-child(even)').css(...

JavaScript给事件委托批量添加事件监听详细流程

1.什么是事件委托 事件委托:利用事件冒泡的特性,将本应该注册在子元素上的处理事件注册在父元素上,这样点击子元素时发现其本身没有相应事件就到父元素上寻找作出相应。这样...

原生JS实现可拖拽登录框

本文分享一个用原生JS实现的可拖拽登录框,效果如下: 实现的代码如下: !DOCTYPE htmlhtml head meta http-equiv="Content-Type" content="text/html; charset=utf-8" / title原生JS实现可拖拽登录框/title style...

JavaScript中var let const的用法有哪些区别

目录 1.重复声明 1.1 var 1.2 let 1.3 const 2.变量提升 2.1 var 2.2 let 2.3 const 3.暂时性死区 3.1 var 3.2 let 3.3 conset 4. window对象的属性和方法 5.块级作用域 1.重复声明 var支持重复声明,let、const不支...

JavaScript函数中上下文有哪些规则

目录 1.规则1:对象.方法() 1.1 案例1 1.2 案例2 1.3 案例3 1.4 案例4 2.规则2:函数() 2.1 案例1 2.2 案例2 3.规则3:数组下标 3.1 案例1 3.2 案例2 4.规则4:IIFE 4.1 案例1 5.规则5:定时器、延时器...

jQuery实现呼吸轮播图

本文实例为大家分享了jQuery实现呼吸轮播图的具体代码,供大家参考,具体内容如下 HTML div class="all" id='box' div class="screen" ul liimg src="images/01.jpg" width="500" height="200" //li liimg src="images/02...

jquery实现呼吸轮播效果

本文实例为大家分享了jquery实现呼吸轮播效果的具体代码,供大家参考,具体内容如下 大概思路: 呼吸轮播就是图片淡入淡出轮播。 div(设置相对定位)里存放ul,li不需要float:lef...

jquery实现百叶窗效果(利用li的定位)

本文实例为大家分享了jquery实现百叶窗效果的具体代码,供大家参考,具体内容如下 大概思路: 一个div(宽度为800px),里面包含ul和li,li的宽高分别设置为560px,300px(li里的图片也是...

JavaScript制作楼层导航效果流程详解

目录 本期目标 1. 功能实现 1.1 结构层 1.2 样式层 1.3 行为层 1.3.1 楼层跳转 1.3.2 楼层监听 2. 效果预览 3. 项目代码 本期目标 使用JavaScript制作楼层导航效果,实现两个功能: 楼层跳转 楼...

浅谈VUE uni-app 核心知识

目录 规范 a. 页面文件遵循vue单文件组件规范 b. 组件标签靠近小程序规范 c. 接口能力(JS API)靠近微信小程序规范 e. 数据绑定及事件处理使用Vue.js 规范 特色 a. 条件编译 b. App端的Nvu...

浅谈VUE uni-app 开发环境

目录 1.通过 HBuilderX 可视化界面 2.通过 vue-cli 命令执行 总结 1.通过 HBuilderX 可视化界面 a. 创建uni-app; b. 运行uni-app; c. 发布uni-app 2.通过 vue-cli 命令执行 a. 安装node.js,下载地址:https:/...

浅谈VUE uni-app 模板语法

1.v-bind(简写 :) 组件属性中要使用data中定义的数据变量,或组件属性要使用表达式,需用v-bind指定 简写 : 2.v-on(简写@) 监听DOM事件 click.stop 可以阻止事件穿透 3.v-model 数据双向绑...

JavaScript数组及非数组对象的深浅克隆详解原理

目录 什么是浅克隆、深克隆 1.对数组进行克隆 1.1 浅克隆 1.2 深克隆 2.对非数组对象进行克隆 2.1 浅克隆 2.2 深克隆 3.整合深克隆函数 什么是浅克隆、深克隆 浅克隆:直接将存储在栈中...

浅谈VUE uni-app 基础组件

1 .scroll-view 使用竖向滚动时,需要给 一个固定高度,通过 css 设置 height;使用横向滚动时,需要给添加 white-space: nowrap ;样式。 scroll-y :允许纵向滚动,scroll-x:允许横向滚动 @scroll :...

JavaScript this的原理以及指向详解

香港多ip服务器http://www.558idc.com/hkzq.html 怎么判断this指向? ①在全局环境中调用就指向window。 ②作为对象的方法调用就指向该对象。 ③作为构造函数调用就指向这个新创建的对象。 ④...

浅谈VUE uni-app 自定义组件

1.父组件向子组件传递数据可以通过 props 2.子组件向父组件传递数据可以通过自定义事件,父组件自定义事件,子组件触发父组件的事件,并传传递数据 3.子组件可以定义插槽slot,让父...

jQuery呼吸轮播图制作原理详解

本文实例为大家分享了jQuery呼吸轮播图制作原理的具体过程,供大家参考,具体内容如下 轮播图: carousel 呼吸轮播图变种布局重点:所有的图片摞一起。 jquery选择元素的能力非常好,...

JS实现拖拽进度条改变元素透明度

今天要分享的是运用原生JS拖拽进度条改变元素透明度,效果如下: 以下是代码实现,欢迎大家复制粘贴。 !DOCTYPE htmlhtml head meta http-equiv="Content-Type" content="text/html; charset=utf-8" / title原生...

浅谈VUE uni-app 常用API

目录 一、路由与页面跳转 二、界面 总结 一、路由与页面跳转 uni.navigateTo(OBJECT) 保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。uni.redirectTo(OBJECT) 关闭当...

JS实现圆形进度条拖拽滑动

本文实例为大家分享了JS实现圆形进度条拖拽滑动的具体代码,供大家参考,具体内容如下 效果展示 半圆进度条效果 圆形进度条 代码实现 !doctype htmlhtml lang="en"head meta charset="UTF-8" / m...

浅谈VUE uni-app 条件编码和页面布局

目录 条件编译 页面布局 总结 条件编译 条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台。 写法:以 #ifdef 或 #ifndef 加 %PLATFORM% 开...

vue实现表格分页功能

本文实例为大家分享了vue实现表格分页功能的具体代码,供大家参考,具体内容如下 直接上代码: 这里是这里是template部分,主要由一个需要分页的表格和一个分页器组成。重点在于表...

浅谈VUE uni-app 生命周期

目录 一、应用的生命周期 二、页面生命周期 三、组件生命周期 总结 一、应用的生命周期 onLaunch 当uni-app 初始化完成时触发(全局只触发一次)onShow 当 uni-app 启动,或从后台进入前台...

JavaScript编程通过Matlab质心算法定位学习

目录 Matlab质心算法 Matlab作为封闭的商业软件,受美国政府左右,无视商业道德,故不建议使用。如果喜欢Matlab语法,可移步开源的octave,其语法与matlab完全相同。 Matlab质心算法 所谓质...

微信小程序骨架屏的实现示例

目录 什么是骨架屏 小程序中骨架屏的生成方式 引入方法 显示与隐藏 为了优化用户体验,骨架屏一直是开发者比较喜欢的表现方式,也就是首屏占位的一种表现方式,不会让浏览者因...

Vue页面中引入img图片的方法

我们在学习html的时候,图片标签img引入图片 img src="../assets/images/avatar.png" width="100%" 但是这样会有2个弊端: 因为采用绝对路径引入,所以如果后面这张图片移动了目录,就需要修改代...

vant uploader实现上传图片拖拽功能(设为封面)

效果图如下所示: !DOCTYPE htmlhtml 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" titleDocument/title link rel="stylesheet"...

微信小程序自定义底部导航栏组件

本文实例为大家分享了微信小程序底部导航栏组件的具体实现代码,供大家参考,具体内容如下 1、在自己项目的公共组件的文件价下新建tabbar.vue(定义的自定义导航栏组件) template...

Vue.js实现九宫格图片展示模块

用Vue.js做了一个九宫格图片展示模块,可点击进行缩放。 模块的实际效果 九宫格缩略图效果 放大后效果 代码 HTML templatediv class="SongList"//用v-for循环渲染缩略图 div class="covers" :style="{d...