前端 终端 实战vue

动态组件,插槽, vue-cli创建项目,vue项目目录结构,vue项目编写规范,es6导入导出语法

1 动态组件💛 # <component :is="who"></component> # component标签的is属性等于组件名字,这里就会显示这个组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title ......
项目 vue 语法 组件 vue-cli

逻辑漏洞挖掘之XSS漏洞原理分析及实战演练

本系列文章旨在揭秘逻辑漏洞的范围、原理及预防措施,逐步提升大家的安全意识。作为开篇第一章,本文选取了广为熟知的XSS逻辑漏洞进行介绍。 ......
漏洞 实战 逻辑 原理 XSS

TTS背后的技术原理——前端和后端系统

就解锁了一个温柔又风趣的「女朋友」萨曼萨。不过,在现实生活中,和语音助手谈恋爱还是一件十分遥远的事情——刨去现阶段的语音助手们双商水平还有限,语音助手的语言表达能力还远远达不到我们理想状态。 为啥你的机器人女友说话不像萨曼萨?本文中,Rokid A-Lab 语音合成算法工程师郑杰文将从语音合成技术谈 ......
前端 原理 背后 系统 技术

Vue-入门vue,及第一个vue程序

一.初始Vue 什么是vue Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可 ......
vue 程序 Vue

Vue+Node连接MySql搭建项目

https://haoying.blog.csdn.net/article/details/123660641?spm=1001.2014.3001.5506 https://www.jb51.net/article/277499.htm ......
项目 MySql Node Vue

web前端Tips:断点续传如何实现?

在Web前端中实现断点续传功能的一种常见方式是使用HTTP Range请求和文件分片上传。 以下是一个简单的断点续传实现的步骤: 前端将要上传的文件分成多个固定大小的片段(chunk),例如每个片段的大小为1MB。 当用户选择上传文件时,前端发送一个初始请求到服务器,询问服务器当前已上传的文件大小( ......
断点 前端 Tips web

js 前端 时间日期 月份 日期不满10 前面加0

法一: //获取当前日期的yyyy-MM-dd格式var date = new Date();var year = date.getFullYear();var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date ......
日期 前端 月份 时间 js

前端代码里面的空格和换行会影响系统的性能吗

在前端代码中,空格和换行通常不会对系统的性能产生显著影响。浏览器在加载和解析代码时会忽略空格和换行,并且对代码进行压缩和优化,以减少文件大小和提高执行效率。 然而,过多的空格和换行可能会增加代码的大小,导致传输时间稍微增加。这对于网络速度较慢的情况下可能会稍微影响加载时间。因此,在部署代码时,建议对 ......
行会 前端 空格 性能 代码

前端代码中注释代码太多会影响系统性能吗

在前端代码中,注释对系统性能的影响非常小,几乎可以忽略不计。注释只是给开发人员提供更好的代码理解和维护的工具,并不会被浏览器加载和解析。在代码执行时,浏览器会忽略注释部分,只执行实际的代码逻辑。因此,无论注释代码多少,对页面的加载和渲染几乎没有影响。 然而,在开发过程中,过多的注释可能会增加代码的长 ......
代码 前端 注释 性能 系统

Vue学习八:vue3

一、vue3创建项目与介绍 vue3创建项目与vue2使用vue-cli(基于webpack)脚手架不同,vue3使用create-vue(基于vite,更快)。创建项目的指令如下,首先看一下node的版本(node -v),16以上才支持。第一次创建项目会去下载create-vue比较慢,等一会就 ......
vue3 Vue vue

14-Vue核心-列表渲染

使用 v-for 做列表渲染 我们可以用 v-for 指令基于一个数组来渲染一个列表,用于展示列表数据。 语法: v-for = "(item, index) in items" :key="xxx" 或者 v-for = "(item, index) of items" :key="xxx" 这里 ......
核心 Vue 14

vue_vueRouter同组件跳转失败

目录场景再现资料查询解决 场景再现 现有一个Article页面, 通过/article/:id来匹配不同的文章页面, 当我需要实现跳转到上一篇或下一篇时, 即从/article/:id跳转另一个/article/:id时, 发现浏览器中只有地址变化了, 但是页面的很多组件, 包括文章内容都没有刷新, ......
vue_vueRouter 组件 vueRouter vue

Uncaught ReferenceError: defineProps is not defined at Son1Com.vue:2:15

百度翻译一下未捕获的反应错误,defineProps这个函数没定义。原本以为是宏编译器没开的原因,网上搜了有说在.eslintrc.cjs中配置开启"vue/setup-compiler-macros": true。我的项目创建时没有加eslint所以没有这个配置文件,我又重新创建项目添加这个代码规 ......

Vue之与后端交互的三种方式、显示小电影案例、计算属性、监听属性、Vue生命周期、组件介绍和使用、组件间通信、ref属性

与后端交互的三种方式 后端写了一堆接口 前段会了 前后端要打通 》从前端发送 ajax 》核心:用js发送http请求,接收返回 原生js,可以开启可以开启ajax,但是原生js开启,比较麻烦,需要做浏览器兼容,有坑(基本不写) jq,写了个兼容所有浏览器的 $.ajax(),不仅仅有ajax,还封 ......
属性 组件 小电影 Vue 周期

9-web前端 flex弹性布局

1、flex弹性布局 设置方式:给父元素设置 display: flex,子元素可以自动挤压或拉伸 组成部分: 弹性容器 弹性盒子 主轴:默认在水平方向 侧轴 / 交叉轴:默认在垂直方向 例如: 2、主轴对齐方式 属性名:justify-content 属性值 效果 flex-start 默认值,弹 ......
前端 弹性 布局 flex web

vue-组件

1.组件的介绍和使用 组件中是可以套组件的 组件就是:扩展 HTML元素,封装可重用的代码,目的就是复用 例如: 有一个轮播图,可以在很多页面中使用,一个轮播有js,css,html组件把js,css,html放到一起,有逻辑,有样式,有html 组件的分类: - 全局组件:可以放在根中,可以在所有 ......
组件 vue

Vue3详解

一、组合式api 1.setup选项 使用时机 ![](https://img2023.cnblogs.com/blog/2901531/202309/2901531-20230918120443038-564643943.png) <script> export default { setup ( ......
Vue3 Vue

8-web前端 动画 案例

1、动画说明 目标:使用animation添加动画效果 思考:过渡可以实现什么效果? 答:实现2个状态间的变化过程 动画效果:实现多个状态间的变化过程,动画过程可控(重复播放、最终画面、是否暂停) 动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面 构成动画的最小单元: :帧或动画帧 2、 ......
前端 案例 动画 web

vue-day04

补充1:定时任务和延迟任务,js中如何实现 setTimeout(function(){},3000) # 3s后执行匿名函数 var t=setInterval(function(){},3000) # 每隔3s执行匿名函数 clearInterval(t) # 停止定时任务 t=null 1 定 ......
vue-day vue day 04

7-web前端 空间转换,3D效果

1、认识3D转换 近大远小 近实远虚 物体和面遮挡不可见 2、三维坐标系 x 轴:水平向右 -- 注意:x 轴右边是正值,左边是负值 y 轴:垂直向下 -- 注意:y 轴下面是正值,上面是负值 z 轴:垂直屏幕 -- 注意:往外边的是正值,往里面的是负值 3、3D转换 3D 转换知识要点 3D 位移 ......
前端 效果 空间 web

记录--纯前端如何实现录屏并保存视频到本地

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 作为一个资深的切图仔,我们难免会需要用到把自己写的页面的一些功能通过视频的方式分享给别人。还有一个场景,就是当我们面试的时候,我们需要把我们的屏幕分享给面试官看,那么这些都是怎么实 现的呢? 那么接下来我们就通过这篇文章来学习一下如何实现 ......
前端 视频

Vue源码学习(七):合并生命周期(混入Vue.Mixin)

好家伙, 1.使用场景 现在来,来想一下,作为一个使用Vue的开发者,假设现在我们要使用created(),我们会如何使用 1.1. .vue文件中使用 <template> <div> <h1>{{ message }}</h1> </div> </template> <script> expor ......
Vue 源码 周期 生命 Mixin

HBuilder打包vue2.0项目生成的APK空白(已解决)

1、config下面的index.js中bulid模块导出的路径,因为index.html里边的内容都是通过script标签引入的,而路径不对,打开肯定是空白的。先看一下默认的路径。 build: { // Template for index.html // Paths 需要修改的是这里的路径 i ......
HBuilder 空白 项目 vue2 APK

打包vue组件包并上传到npm

在自己的项目中新建一个index.js做打包组件的配置 1 import 组件的名字 from "组件的地址"; 2 const comArr = [组件的名字]; 3 export default { 4 install(Vue) { // install是vue中的方法,此方法要在export ......
组件 vue npm

6-web前端的特效 平面转换transfrom

平面转换 transform 作用:为元素添加动态效果,一般与过渡配合使用 概念:改变盒子在平面内的形态(位移、旋转、缩放、倾斜) 平面转换又叫 2D 转换 1、平面转换 平移 目标:使用translate实现元素位移效果 语法 transform: translate(水平移动距离, 垂直移动距离 ......
前端 transfrom 特效 平面 web

Vue种Ai对话框设计Demo

`<template> <div> <!-- 对话框按钮 --> <el-button @click="showDialog">打开对话框</el-button> <!-- 对话框组件 --> <el-dialog :visible.sync="dialogVisible" title="ChatG ......
对话框 Demo Vue

vue2.0 项目创建和配置

项目的框架概述: 前端: 1、采用vue2.0 2、采用element ui 后端: 1、Jave 一、前端 1、创建项目 vue create web_admin 创建成功后的项目结构 2、安装element ui指定版本 yarn add element-ui@2.15.12 3、在main.j ......
项目 vue2 vue

vue-计算属性、监听属性、生命周期钩子函数

计算属性 1. 计算属性是基于他们的依赖变量进行缓存的 2. 计算属性只有在它相关依赖变量发生改变时才会重新求值,否则不会变(函数只要页面变化,就会重新运算) 3. 计算属性就像python中的property,可以把方法/函数伪装成属性 4. 计算属性,必须有返回值 实现输入input中后名字首字 ......
属性 钩子 函数 周期 生命

5-web前端 定位position

1、相对定位 position: relative 特点: 不脱标,占用自己原来位置 显示模式特点保持不变 设置边偏移则相对自己原来位置移动 拓展:很少单独使用相对定位,一般是与其他定位方式配合使用 参考自身原位置 2、绝对定位 position: absolute 使用场景:子级绝对定位,父级相对 ......
前端 position web

13-Vue核心-条件渲染

使用 v-if 做条件渲染 写法: 1)v-if = "表达式" 2)v-else-if = "表达式" 3)v-else = "表达式" 或 简写为 v-else 适用于:切换频率较低的场景 特点:不展示的DOM元素直接被移除 注意:v-if 可以和 v-else-if 、v-else 一起使用, ......
核心 条件 Vue 13