详情vue
vue3 vueRouter4 :No match found for location with path ***
0. 采用vue+ router4 做路由导航. 首次载入控制台很干净. F5刷新后,控制台爆出警告,但点击路由正常工作. 1. 经过排查发现,是menu中使用了 <router-link> 这玩意,后来改造成 @click="router.push(ele.path)" 即可消除警告 2. 网络上 ......
响应式的 switchboard:让又大又慢的Vue/AIpine 页面爆快
我的提示: AIpine 是一个js 库,官网口号是 “一个新的轻量极javascript框架”,其实我之前也没接触过,翻译这篇文章时才注意到 官方地址: [AIpine.js]https://alpinejs.dev 下面开始是译文: 小提示: 在这篇文章中我将使用Vue/AIpine 术语 ,但 ......
针对Vue前后端分离项目的渗透思路
引言 在目前的开发环境下,越来越多的厂商选择 Vue.js 来实现前端功能的编写,且成熟的前端框架已经可以实现后端代码实现的功能,导致后端目前只负责提供 Api 接口和文档,方便前端的同时去调用。本文主要介绍如何针对这类前后端分离的网站去进行渗透测试,以及如何高效进行渗透测试成为了重点关注的问题。 ......
08-react修改state数据驱动视图UI的更新【注意和vue的区别】
// setState 修改状态 如果是直接修改页面不会改变 使用 setState 修改数据 才会驱动视图的改变 // setState 的原理:修改玩状态之后会调用 render 函数 import ReactDom from "react-dom" import { Component } f ......
Vue 异步通信Axios
使用Axios实现异步通信需要先导入cdn: <script src="https://unpkg.com/axios@1.4.0/dist/axios.min.js"></script>使用到的数据data.json { "name":"kuang" , "url":"https://www.bi ......
vue3源码-一、响应式原理reactive的实现
reactive的实现 使用: 使用reactive()函数创建一个响应式对象。 import { reactive } from 'vue' export default { // `setup` 是一个专门用于组合式 API 的特殊钩子函数 setup() { const state = rea ......
问题解决:Component name "xxx" should always be multi-word vue/multi-word-component-names
如题,原因是单个单词命名时语法检测无法通过,可以在导出组件时通过name属性给组件名加一个后缀,比如Component。 <script> export default { // 当组件名为一个单词时,语法检查是无法通过的,可以设置name的值为2个单词来规避检查。 name: 'HomeCompo ......
关于 Vue3 setup 语法糖
Vue3 setup 参考:https://juejin.cn/post/7009282373476941831#comment 新的 setup 是组件创建之前, props 被解析之后执行,是组合式 API 的入口 在 setup 中应该避免使用 this, 因为它不会找到示例。setup 的调 ......
vue 表单校验el-form-item加上v-if不触发校验
1 问题:在使用element是使用自定义表单校验,当表单校验el-form-item加上v-if不触发校验的问题 下图是自定义的表单校验 当切换为v-if为true的条件时,表单校验无法触发 解决方法:在el-form-item的v-if上加一个key值,令key=prop的值就解决了 自定义校验 ......
6.Vue中的路由
6.路由 6.1.介绍 6.1.1.vue-router vue中的一个==插件==库,专门用来实现==SPA应用==。 6.1.2.SPA应用 单页Web应用(single page web application,SPA)。 整个应用==只有==一个完整的页面。 点击页面中的导航链接不会刷新页面 ......
Vue 新建项目+基本语法
新建项目: 导入依赖: <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> 基本语法 v-bind指令:可以动态绑定变量message <!DOCTYPE html> <html lang=" ......
vue 项目代码明明报错了,但控制台不打印错误的问题
我检查了如下几个内容: 我并没有任何地方做了try/catch 并不处理的情况。 也没有使用 app.config.errorHandler 全局错误拦截。 axios 也没有拦截响应也没有任何处理(哪怕报错的代码和请求无关) 哪怕手动输出 throw new Error(e.message) 也不 ......
vue2源码-十七、Vue组件间传值的方式及之间区别
Vue组件间传值的方式及之间区别 通过props传递:父组件传递数据给子组件 使用 // chilid,vue props:{ // 字符串形式 name:String // 接收的类型参数 // 对象形式 age:{ type:Number, // 接收的类型为数值 defaule:18, // ......
Vue实战案例
Vue项目案例 结合之前学习的 vue.js、脚手架、vuex、vue-router、axios、elementui 等知识点,来开发前端项目案例(仅前端不含后端)。 1.项目搭建 其实就是将我们项目需要用到的组件都安装并配置好,需要做的事有: 创建项目 & 运行项目 vue create 项目名称 ......
Vue——renderMixin【十八】
前言 经过lifecycleMixin再接下来就到了renderMixin,接下来咱们就看看renderMixin中到底有什么; 内容 renderMixin位于src/core/instance/render.ts下; export function renderMixin(Vue: typeof ......
vue3 ts 网易云信 未读数 手动设置已读已废弃
vue3 ts 网易云信 未读数 //未读数清空 $uikit.resetSessionUnread(store.sessionId.value); 调用接口nim.resetSessionUnread('sessionId')重置会话未读数。将此会话未读数置为0,之后收到消息重新计算未读数。 调用 ......
vue3 + ts + vite 封装 request
npm i axios 目录 request.ts (直接复制可用) import axios from "axios"; import { showMessage } from "./status"; // 引入状态码文件 import { ElMessage } from "element-pl ......
Vue项目如何配置、切换主题颜色(mixin + scss方式,简单高效)
Action一. 首先,引入scss依赖(node-sass, sass-loader)npm install node-sass sass-loader --save-dev1二.项目样式文件目录介绍1.此处我将项目中的公共样式文件放到了 src/style目录下,其中 index.scss是以供 ......
vue3 获取asset文件夹下所有资源文件列表
import path from "path"; const getLayerBgs = function () { const imgs: any = []; // 获取所有背景图层 //读取文件的路径 是否遍历文件的子目录 匹配文件正则表达式 const files = require.cont ......
vue3自定义指令实现el-select下拉加载更多
1. 新建js文件 export default (app) => { app.directive('loadmore', { beforeMount(el, binding) { const element = el.querySelector('.t-select__dropdown'); el ......
Django Rest Framework(DRF) + Vue + ElementPlus搭建Blog例子代码
重新用Django Rest Framework(DRF),Vue3、Pinia、Element-Plus、Axios重新改写了前面的Blog的例子. 代码放在Github上了https://github.com/magicduan/django-drf-vue/releases 这里终结一下这次改 ......
Vue2.0和3.0区别
一、项目初始化 2.0初始化,vue init <模板名称(webpack比较常用)> [项目名称] vue init webpack cli2-test 3.0初始化,vue create [项目名称] vue create cli3-test 二、目录结构对比 2.0目录结构 3.0目录结构 3 ......
Vue2.0版本升级到vue3.0
vue版本的升级主要步骤: 一、首先需要卸载你之前的vue2.0版本 输入cmd–>回车–>进入dos界面输入命令查询vue的版本: vue -V or vue -Version 输入命令卸载目前vue版本: npm uninstall -g vue-cli 再输入vue版本查询命令,提示“不是可执 ......
淘宝店铺商品详情接口代码-获取淘宝商品详情 API 接口返回值说明示例
现在某宝的规则越来越严,想要入驻某宝需要审核的特别严格,不然就会被封店,那么大家知道某宝店铺商品详情接口吗?下面是我整理的关于某宝店铺商品详情接口的相关内容,大家可以来了解下! 目前提供的接口有:商品详情、商品详情原数据、商品评论、商品快递费用、淘宝分类详情、关键字搜索商品等等。(了解更多) 由 ......
Java获取1688商品详情API接口示例说明
在使用 JavaWeb类的时候,如果我们需要获取一个网站中某个商品的详细信息,我们可以使用 JavaScript来获取。我们可以用 JavaScript来实现一个获取商品详情的 API接口,来获取一个网站中某个商品的详细信息。在使用 JavaScript进行接口请求时,可以使用下面的方法: 通过 ......
Vue插件图片预览hevue-img-preview
安装 # 安装 npm install hevue-img-preview --save # main.js 引入 import hevueImgPreview from 'hevue-img-preview' Vue.use(hevueImgPreview) # 使用 #//给任意对象添加任意事件 ......
vue 好用的日期组件
1、官网 https://hxkj.vip/calendar/#/disabled-date 2、记录下自己的使用 (1)效果图 (2)页面部分 点击查看代码 <div class="data_popup"> <nut-popup position="bottom" v-model:visible= ......
vue循环遍历出来的表单输入框 如何做校验?
有多种输入框,下拉框等循环出来,红字部分是关键 <el-form ref="form" :model="submitForm" label-width="120px" @keyup.enter.native="adjust" @submit.native.prevent > <el-card sha ......
在vue中使用websocket
封装 根据项目的目录结构,在相应的文件夹下创建一个js文件,用来封装一个websocket类,假如项目中用到js的地方很多,最好把文件放在全局公共文件夹中; export class WS{ constructor(config) { this.ws = null; this.url = null; ......
vue 使用腾讯云 cos存储 上传
参考文档:https://blog.csdn.net/qq_34170840/article/details/124520388 1、页面部分 点击查看代码 <input ref="fileRef" title="" type='file' name="file" multiple class="f ......