布局vue web

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

WEB网页直接播放摄像头RTSP视频流方案汇总,服务器转码和直接播放对比!

关于网页播放摄像头RTSP视频流,网上有很多免费开源方案,大多数是通过把RTSP转码成HLS或者RTMP视频流,然后通过Flash插件播放,但是大多数延迟非常高(比如:HLS延迟达到十几秒),并且播放多路或者播放高清视频也非常容易卡顿(服务器转码,资源消耗非常大)。 下面介绍两种用的比较多的方案: ......
视频流 摄像头 服务器 网页 方案

vue-组件

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

ctfhub_WEB基础关(RCE续集)

WEB基础 七、RCE 8、过滤空格 该关卡是将输入命令中的空格全部置空 代码解读,这行代码使用了正则表达式来检查变量 $ip 是否包含空格字符。如果 preg_match_all 函数返回 false,表示没有匹配到空格字符,那么 $cmd 变量将设置为 ping 命令并执行该命令。否则,如果 $ ......
续集 ctfhub_WEB 基础 ctfhub WEB

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

web应用漏洞

翻译 搜索 复制 ......
漏洞 web

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

安装node、npm和vue3

1. 首先安装node和npm node.js安装地址 https://nodejs.org/en/download/ 2. 下载完安装好后,打开终端命令验证是否安装成功 node -v npm -v 3. 安装vue3 npm install -g @vue/cli 4.创建vue3项目 npm ......
node vue3 npm vue

Web 开发工具

代码编辑器 高效编写代码是 Web 开发的一个关键方面。这是一个可以帮助您的创新工具: 代码GPT 通过 CodeGPT 利用人工智能的力量。这款人工智能驱动的代码编辑器可以协助完成编码任务、生成代码片段,甚至提供对编程概念的见解。借助 codeGPT,您将能够更快、更高效地进行编码。无论您是初学者 ......
开发工具 工具 Web

Vue之后端交互、计算、监听、组件间通信

一、与后端交互三种方式 1、 2、 3、 4、小电影案例 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdeli ......
组件 Vue

nginx配置多个web项目

location / { root html; index index.html index.htm; try_files $uri $uri/ /index.html; } location /mobile { # 多层目录时不能用root,要用alias alias html/mobile; i ......
多个 项目 nginx web

4-web前端 盒子模型、行内块、浮动问题、无意义标签

1、图文对齐(搜索框) 图片标签是典型的行内块元素 除此之外行内块元素还有表单元素input、button (行内块元素既可以设置宽高又可以和行元素在一行 行内块的转换问题 display (block块、inline行、inline-block行内块、none隐藏 转换后两个块中间存在空隙问题 2 ......
前端 盒子 模型 标签 问题

vue:安装使用screenfull(screenfull@6.0.2/ vue@3.3.4)

一,官方站: 官网地址: https://sindresorhus.com/screenfull/ 代码地址: https://github.com/sindresorhus/screenfull.js 二,安装: 1,安装 root@lhdpc:/data/vue/responsive# npm ......
screenfull vue

vue3 组件

学习随笔(Vue3 组件) 该随笔是根据b站小满zs的Vue3 + vite + Ts + pinia + 实战 + 源码 +electron的视频学习写的,Vue3 + vite + Ts + pinia + 实战 + 源码 +electron ......
组件 vue3 vue

vue:安装使用nprogress(vue@3.3.4)

一,官方地址: 官方站: https://rstacruz.github.io/nprogress/ 代码站: https://github.com/rstacruz/nprogress 二,安装/引入: 1,安装 root@lhdpc:/data/vue/responsive# npm insta ......
vue nprogress

vue:run时报错:EACCES: permission denied(vue@3.3.4)

一,报错信息: [eslint] EACCES: permission denied, open '/data/vue/responsive/node_modules/.cache/eslint/43541cdc.json’ 如图: 二,解决 切换拒绝访问的文件的owner liuhongdi@lh ......
permission vue 时报 EACCES denied

直播平台搭建,使用vue-pdf 实现pdf在线预览并且自定义预览框高度

直播平台搭建,使用vue-pdf 实现pdf在线预览并且自定义预览框高度 .pdf-preview { height: 100%; } ​ 解决方案:提高指定样式的应用优先权(优先级) .pdf-preview { height: 100%; } // 穿透vue-pdf插件中的canvas样式 . ......
pdf 高度 vue-pdf 平台 vue

2-web前端 音频、视频、表格、表单

1.音频 2.视频 3.有序无序列表 有序列表:ol>li ol内必须是li,li内没限制 无序列表:ul>li ul内必须是li,li内没限制 4.表格 th 字体加粗并居中 示例: 案例:个人简历 5.表单 针对表单整理的相关问题: <!-- action:行动 提交的地址 服务器地址 后台地址 ......
表单 前端 表格 音频 视频