前端 终端 实战vue

vue3微信公众号商城项目实战系列(9)购物车页面

本篇显示购物车中的商品,购物车表结构如下,我们通过接口服务抓取登录用户的购物车信息。 表名 字段 功能 shoppingcart cart_id (int) 购物车编号 user_id (int) 用户编号 goods_id (int) 商品编号 goods_name (varchar) 商品名称 ......
购物车 实战 公众 页面 商城

客服系统源码界面,访客发送评价功能界面,vue+elementui发起评价

近期在定制化聊天界面的过程中,重写了下访客聊天界面的评价弹窗功能。 现在实现的效果是下面这样的 实现代码html部分 <!--在线评价--> <div v-if="comment.dialog" class="comment"> <div class="scoreBox"> <i class="ic ......
界面 elementui 源码 功能 系统

前端奇遇收集

1. jeecgboot-vue3的表格组件,使用的ant-design-vue的2.x版本的组件,其字典字段,页面首次加载,当字段在可视范围内,可正常显示,超出可视范围,即需要横向滚动条拉动,则不能正常显示字段 2. uniap的onShow周期,选择图片,在chrome的手机模拟器中不会触发on ......
前端 奇遇

漫谈前端自动化测试演进之路及测试工具分析

随着前端技术的不断发展和应用程序的日益复杂,前端自动化测试也在不断演进。随着 Web 应用程序变得越来越复杂,自动化测试的需求也越来越高。如今,自动化测试已经成为 Web 应用程序开发过程中不可或缺的一部分,它们可以帮助开发人员更快地发现和修复错误,提高应用程序的性能和可靠性。 ......
测试工具 前端 工具

Vue3 computed计算属性

视频 7.计算属性与监视 1.computed函数 与Vue2.x中computed配置功能一致 写法 import {computed} from 'vue' setup(){ ... //计算属性——简写 let fullName = computed(()=>{ return person.f ......
computed 属性 Vue3 Vue

vue利用正则去除富文本的标签和样式

const removeHtmlStyle =(html :any)=> { let relStyle = /style\s*?=\s*?([‘"])[\s\S]*?\1/g; //去除样式 let relTag = /<.+?>/g; //去除标签 let relClass = /class\s* ......
正则 样式 文本 标签 vue

前端基础之JavaScript

前端基础之JavaScript JavaScript和Java没有半毛钱关系,由于当时的Java热度很热,蹭一下热度。 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组织ECMA,希望这门语言能够成为国际标准。次年,ECMA发布26 ......
前端 JavaScript 基础

web前端

工程认知——Web前端 Week1 一、课程概要、要求和学习方法 概要:本课程将系统地学习现代软件前端开发的实用技术,在前端技术中属于中级实用技术范畴。课程包含前端三大部分 HTML5、CSS3、JavaScript、前端框架和后端框架,循序渐进地将每一部分的实用技术结合讲解、演示,最后交予学生不断 ......
前端 web

vue中安装node-sass、sass-loader报错问题解决方法

可行版本(针对 node 16+ 版本) npm install node-sass@6.0.1 -D npm install sass-loader@10.2.0 -D 问题描述 问题描述:在进行一个vue项目练习时需要导入node-sass、sass-loader这两个依赖,书本提供代码是npm ......
sass sass-loader node-sass 方法 loader

运行一个vue项目vite-electron-vue

必备软件: 1) visual studio code 2) nodejs 18.16.0 3) yarn 下载源码: 项目fork 自 https://gitee.com/mywink/vite-electron.git git clone https://gitee.com/panie/vite ......
vite-electron-vue vue electron 项目 vite

使用Vue.js实现文字跑马灯效果

实现文字跑马灯效果,首先用到 substring()截取 和 setInterval计时器 clearInterval()清除计时器 效果如下: 实现代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ......
跑马灯 效果 文字 Vue js

js页面将数据传给vue页面

js页面 vue页面接收 ......
页面 数据 vue

vue面试题

一、 1.v-show和v-if区别的区别: v-show通过css display控制显示和隐藏,v-if组件真正的渲染和销毁,而不是显示和隐藏,频繁切换状态使用v-show 否则v-if 2.为何v-for要用key 快速查找到节点,减少渲染次数,提升渲染性能 3.描述vue组件声明周期mm 单 ......
vue

Vue2 css mixins变量自动导入配置

vue.config.js const path = require("path"); function addStyleResource(rule) { rule .use("style-resource") .loader("style-resources-loader") .options({ ......
变量 mixins Vue2 Vue css

Vue 3.0的使用

创建项目 vue_cli创建项目 vue_cli的安装见:https://www.cnblogs.com/smyz/p/17309086.html 使用vue_cli创建项目与创建vue2.0项目步骤相同 # 1. 进入到相关目录 # 2. 使用下面的命令进行创建 vue create 项目名称 v ......
Vue 3.0

vue3微信公众号商城项目实战系列(8)商品展示页面

本篇实现在首页展示商品功能,表结构如下: 表名 字段 功能 goods goods_id (int) 商品编号 goods_name (varchar) 商品名称 photo (varchar) 商品图片 price (decimal) 价格 商品表 页面呈现效果如下: 第1步:在 api.js 中 ......
商品展示 实战 公众 页面 商城

Vue--3

1.组件的使用 2. 路由 跳转: 根据你输入的路径找到对应的组件(页面),从而渲染该组件。 router/index.js 根据请求路径找到对应的组件. 但是找到后无法渲染它。 3. vue工程中使用elementui <template> <!--必须创建一个div--> <div> <el-t ......
Vue

vue+ant中input输入框校验,不符合条件的输入无效

1. 只能输入数字/小数点/负号 2. 只能有一个负号, 只能有一个小数点 3. 第一位不能直接输入小数点,输入负号后不能直接跟随小数点 4. 第一位输入为0时或-0时,只能跟随小数点,不能跟随数字 例如01 09 5. 小数点后只能输入两位数字,不可输入其他,并且最后一位不能为0 6 . 因为是实 ......
条件 input vue ant

vue2之使用provide/inject父子祖孙组件之间的传值

官网概念:provide/inject需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间里始终生效。 使用方法:在父组件中使用provide传值,在子组件中用inject接收 // 父组件 data(){ return { name:'阔落' ......
祖孙 父子 组件 之间 provide

vue2之跨页面调用和传参

A页面调用B页面的方法 不涉及父子组件时,调用的方式,使用this.$root.$emit()发送消息,进行调用, /** * 打开在全局组件中的弹框 */ handleOpenModal(){ this.$root.$emit('toolbar', { type: 'modal', fun: th ......
页面 vue2 vue

RocketMQ实战系列(一)——RocketMQ简介

RocketMQ是一款分布式消息引擎,由阿里巴巴旗下的MetaQ和RocketMQ合并而来。RocketMQ提供了高可靠、高吞吐量、可伸缩、易于使用的消息发布/订阅服务,适用于大规模分布式系统的消息通信。 RocketMQ的特点包括: 1. 高可靠:RocketMQ采用主从同步复制机制,保证消息的可 ......
RocketMQ 实战 简介

vue2

vue vue-router 安装vue-router 当前项目下安装 需要导入 vue3的写法 main.js import { createApp } from 'vue' import App from './App.vue' import Router from 'vue-router' c ......
vue2 vue

《社区人员管理》实战案例设计&个人案例分享

设计是一个让人梦想成真过程,开始编码、测试、调试之前进行需求分析和架构设计,才能保证关键方面都做正确 ......
案例 实战 人员 社区 个人

【LeetCode动态规划#08】完全背包问题实战与分析(零钱兑换II)

零钱兑换II 力扣题目链接(opens new window) 给定不同面额的硬币和一个总金额。写出函数来计算可以凑成总金额的硬币组合数。假设每一种面额的硬币有无限个。 示例 1: 输入: amount = 5, coins = [1, 2, 5] 输出: 4 解释: 有四种方式可以凑成总金额: 5 ......
零钱 背包 实战 LeetCode 动态

如何在 vue3 中使用 jsx/tsx?

我们都知道,通常情况下我们使用 vue 大多都是用的 SFC(Signle File Component)单文件组件模式,即一个组件就是一个文件,但其实 Vue 也是支持使用 JSX 来编写组件的。这里不讨论 SFC 和 JSX 的好坏,这个仁者见仁智者见智。本篇文章旨在带领大家快速了解和使用 Vu ......
vue3 vue jsx tsx

【Vue2.x源码系列06】计算属性computed原理

本章目标:计算属性是如何实现的?计算属性缓存原理以及洋葱模型的应用?在初始化Vue实例时,我们会给每个计算属性都创建一个对应watcher,我们称之为计算属性watcher ......
源码 computed 属性 原理 Vue2

uniapp系列-超详细教你在uni-app+vue3里通过web-view组件传递信息打开H5页面写入localstorage并解决兼容性

web-view是什么 web-view 是一个 web 浏览器组件,可以用来承载网页的容器,会自动铺满整个页面(nvue 使用需要手动指定宽高)。 点击这里直达官网文档 点击这里下载我的代码demo 本文最下面还有一些==常见或者奇怪问题解决方案==哦~ 为什么使用这种方式搞页面?有什么好处呢? ......

从技术全景到场景实战,透析「窄带高清」的演进突破

随着5G时代的到来,互联网短视频、电影电视剧、电商直播、游戏直播、视频会议等音视频业务呈井喷式发展。 作为通用云端转码平台,阿里云视频云的窄带高清需要处理海量、不同质量的视频。对于中高质量的视频,现有的窄带高清1.0就能提供满意的转码效果,并带来达30%的带宽成本降低;而对于有明显压缩失真和成像噪声 ......
窄带 高清 实战 技术

Vue(一)

1.Vue核心 1.1.介绍 1.1.1.官网 Vue中文官网:https://cn.vuejs.org 1.1.2.简介 Vue是一套用于构建用户界面的渐进式JavaScript框架。 构建用户界面:将一堆杂乱的数据转为简单易懂可视化的界面 渐进式:vue可以自底向上逐层的应用(从一个轻量小巧的核 ......
Vue

Elasticsearch搜索功能的实现(五)-- 实战

本文主要使用目前较新版本elastic search 8.5.0 + kibna 8.5.0 + springboot 3.0.2 + spring data elasticsearch 5.0.2 + jdk 17 进行搜索功能的开发。 ......
Elasticsearch 实战 功能