样式 播放器 音乐vue
在Django+Vue3+GraphQL的Blog例子代码中引入Element-Plus UI Framework
Vue3的UI Framework中有Element-Plus、BalmUI、Quasar、PrimeVue、Ant Design Vue等UI Framework. Element-Plus是Element-UI的Vue3版,Element-UI的使用人数的基数较大,Github上的Star数也较 ......
Vue之混入对象mixin
简介 可以把多个组件共用的配置提取成一个混入对象。比如有两个组件,两个组件中有部分共同的内容,比如同样的变量,同样的函数等。这时候可以把这些共用的提取出来做成混入对象。 局部使用 在src目录中创建一个目录,我这里的目录名称就为mixin 在mixin目录中创建一个js文件,为了方便导入,所以创建的 ......
用quasar+vue3+组合式api VueRouter实现路由嵌套(二级路由)
前言: 本项目使用的是quasar创建,vue3的组合式api语法。部分语法不同,但不影响理解,修改语法后可以在vue2/选项式api项目中运行。 效果图: 文件目录结构和代码如下: 文中用到的标题栏数据如下: const titles = ref([ { name: "首页", path: "ho ......
VUE.JS和NODE.JS构建一个简易的前后端分离静态博客系统(四)
ClassicHeader <template> <header class="classic"> <div class="left"> <slot name="left"></slot> </div> <div class="right"> <slot name="right"></slot> < ......
CKEditor粘贴图片自动上传到服务器(VUE版)
由于工作需要必须将word文档内容粘贴到编辑器中使用 但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直接解决这个问题 考虑到自己除了工作其他时间基本上不使用windows,因此打算使用nodejs来 ......
vue学习备忘
vue学习备忘 vue中!!、!=、== 、!==、 判断符号的用法等 !可将变量转换成boolean类型,null、undefined和空字符串取反都为false,其余都为true。 可以总结出来,“!”是逻辑与运算,并且可以与任何变量进行逻辑与将其转化为布尔值,“!!”则是逻辑与的取反运算,尤其 ......
vue长按事件指令(v-longPress)
import type { Directive, App } from 'vue'; const longPress: Directive = { beforeMount: function (el, binding, vnode, prevVnode) { if (typeof binding.v ......
Vue3中点击按钮滚动页面到低端
核心代码 <template> <div ref="editflagNode"></div> <div v-if="route.query.flag '1' || route.query.flag '3'"> <Title v-if="btnFlag || taskDetail.taskConclu ......
网页支持传统蒙古文排版样式HTML+CSS
传统蒙古文排版跟大部分文字排版不一致,需要从上到下书写,然后从左到右的排版。 样式文件如下: .vertical-text { -webkit-writing-mode: vertical-lr; -moz-writing-mode: vertical-lr; -o-writing-mode: ve ......
表单样式
属性选择器样式无需使用class或id的形式: 实例 input[type="text"] { width:150px; display:block; margin-bottom:10px; } input[type="button"] { width:120px; margin-left:35px ......
输入框(input) 样式
使用 width 属性来设置输入框的宽度: CSS 实例 input { width: 100%; } 尝试一下 » 以上实例中设置了所有 <input> 元素的宽度为 100%,如果你只想设置指定类型的输入框可以使用以下属性选择器: input[type=text] - 选取文本输入框 input ......
VUE.JS和NODE.JS构建一个简易的前后端分离静态博客系统(三)
Edit.vue <template> <div id="edit"> <ClassicHeader> <template v-slot:left> <span>编辑随笔</span> </template> <template v-slot:right> <el-button @click="ne ......
微信小程序 web-view在校验合法域名后视频不能播放
异常 注:视频资源在小程序的服务器上 原因:web-view请求的外网资源需要在小程序的后台配置业务域名才能访问,并将验证文件放置在服务器根目录下 在配置业务域名时遇到一个问题是,业务域名配置不能带端口,请求的服务器资源的域名带端口,校验文件没法放置到指定域名位置下,后又在服务器配置一个同域名默认端 ......
VUE.JS和NODE.JS构建一个简易的前后端分离静态博客系统(二)
后台管理页面,需要配合NODE.JS搭建的EXPRESS服务器使用。 main.js import Vue from 'vue' import App from './App.vue' import router from './router' import { Button, Input, For ......
投放视频广告时,如何快速与第三方播放器兼容?
新媒体时代,广告样式越来越丰富。相较于传统的图文信息,视频类广告更具有直观性,能够让消费者在了解产品知识和功能的同时加深对产品的印象。 因此在各类网站或App上投放视频类广告是个很好的宣传方式,但广告商们如果想在网站上展示视频广告,必须确保视频广告投放协议与发布渠道的播放器兼容;如果不能兼容,广告商 ......
VUE.JS和NODE.JS构建一个简易的前后端分离静态博客系统(一)
很久以前写的。不想白写,这边记录一下,配合GPT简要回忆一下代码思路。 后台系统 demo_initBlog.js 首先是博客的后台系统,通过node demo_initBlog.js进行初始化。 const fs = require("fs").promises const path = requ ......
vue2+jsx与vue3+jsx插槽的写法
1.vue2 + jsx (1)slot组件 <template> <div class="index"> <h2>slotdemo -- 组件调用成功</h2> <slot name="title"></slot> <slot></slot> </div> </template> (2)调用 <s ......
Vue.js 组件内路由守卫
视频 About.vue App.vue #components ##Banner.vue <template> <div class="col-xs-offset-2 col-xs-8"> <div class="page-header"> <h2>Vue Router Demo</h2> <bu ......
vue-office 支持多种文件(docx、excel、pdf)预览的vue组件库,支持vue2/3。
原文转载:https://github.com/501351981/vue-office vue-office 支持多种文件(docx、excel、pdf)预览的vue组件库,支持vue2/3。 《演示效果》 功能特色 一站式:提供docx、pdf、excel多种文档的在线预览方案,有它就够了 简单 ......
vue 组件加点击事件
vue 默认只能在元素dom上面加点击事件,否则你给组件加上点击事件是没有效果的。 解决方案: 可以在组件的事件后面加.native @click.native ......
基于 xterm + websocket + vue 实现网页版终端 terminal
cdn形式html页面实现 在进行开发这个功能的时候,进行了百度,最后参考此博主的文章中的自定义版本,进行修改:https://blog.csdn.net/qq_25252769/article/details/127791918 开发过程中,由于后台数据返回的格式需要进行处理,根据自身需求,代码进 ......
Vue.js 独享路由守卫
视频 独享守卫: beforeEnter(to,from,next){ console.log('beforeEnter',to,from) if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制 if(localStorage.getItem('school') 'atgui ......
Vue.js 全局前置和后置-路由守卫
全局前置路由守卫视频 全局后置路由守卫视频 12.路由守卫 作用:对路由进行权限控制 分类:全局守卫、独享守卫、组件内守卫 全局守卫: //全局前置守卫:初始化时执行、每次路由切换前执行 router.beforeEach((to,from,next)=>{ console.log('beforeE ......
vue点击其他地方,这个div隐藏,怎么通过自定义指令实现
vue指令 Vue指令是Vue.js框架中最核心的一部分之一,用于处理DOM元素上的行为和属性,类似于jQuery的插件。Vue指令使用v-前缀表示,例如:v-if,v-for,v-bind,v-on等等。 以下是一些常用的Vue指令: 1. v-model:绑定表单元素到Vue实例数据,实现数据的 ......
vue点击其他地方 这个div隐藏
Vue 中实现点击其他地方隐藏 `div` 的思路一般如下所示: 1. 给需要隐藏的 `div` 绑定一个 `v-show` 或 `v-if` 指令,初始状态为显示。2. 给整个页面或父级元素(比如 `body` 或者 `app` 组件,建议是根组件)绑定一个点击事件。3. 在点击事件的回调函数中, ......
vue中父子组件调用之头像更新
问题描述: 修改图像的功能,要实现的功能是这样的:点击确认按钮,然后连带着上面的头像也更新,是不是很简单,只需要一个刷新就行,但是事实上没这么简单,因为我的这个项目涉及到三个组件 这里面中间是一个子路由,然后上面是一个组件,左边是一个组件 然后这个就涉及到子父组件传值, 这个总布局是Doctor.v ......
vue路由懒加载
vue路由懒加载是性能优化考虑的一种策略。 假如在router内需要引入一个component文件, import PrevComp from './components/prev-comp' import NextComp from './components/next-comp' 这是常规的文件 ......
Vue.js 两个新的生命周期钩子(路由组件独有)
视频 11.两个新的生命周期钩子 作用:路由组件所独有的两个钩子,用于捕获路由组件的激活状态。 具体名字: activated路由组件被激活时触发。 deactivated路由组件失活时触发。 Home.vue News.vue #components ##Banner.vue <template> ......
Vue.js 缓存路由组件
视频 10.缓存路由组件 作用:让不展示的路由组件保持挂载,不被销毁。 具体编码: <keep-alive include="News"> <router-view></router-view> </keep-alive> News.vue Home.vue Message.vue #compone ......