黑子Kuroko的博客_VueJs

vue.js

前端

javascript

mvvm

排查问题

原创 2023-02-26 09:24:30 1163 阅读

vue 环境搭建与安装

第一步安装 node网上下载一下node即可，下一步下一步点去就行，查看是否成功：cmd——node -v 第二步安装 npm此处用的是淘宝镜像 cnpmnpm install -g cnpm --registry=https://registry.npm.taobao.org 第三步安装 vue-clicnpm install -g vue-cli ...

vue

依赖包

右键

命令窗口

计算机

原创 2022-01-15 10:25:30 142 阅读

【问题记录】vue生成文件本地打开查看效果

问题描述：npm run build 后dist文件夹下面直接浏览器打开index.html，css和js的路径都不正确。放到跟目录下就正常了。问题解决：打开项目所在文件夹里面的 config - index.js 在 build 部分的 assetsPublicPath 里面加一个点即可assetsPublicPath: '/', 改为assets...

解决方案

vue

css

绝对路径

相对路径

原创 2022-01-15 10:25:29 324 阅读

js 监听移动端web触屏事件滑动响应

直接上例子，以vue应用为例：html: <ul> <li v-for="item in items" :class="{finished:item.isFinished}" @click="toggleFinish(item)" @touchstart="touchstart()" @touchmove="touchmove(item)&quo

JS

移动端

jquery

i++

touch事件

原创 2022-01-13 17:59:32 1204 阅读

vee-validate 内置的校验规则

after{target} - 比target要大的一个合法日期，格式(DD/MM/YYYY) alpha - 只包含英文字符 alpha_dash - 可以包含英文、数字、下划线、破折号 alpha_num - 可以包含英文和数字 before:{target} - 和after相反 between:{min},{max} - 在min和max之间的数字

vee-validate

git

宽高

文件大小

转载 2022-01-13 17:58:16 889 阅读

vue中input限制最多两位小数

<el-input size="medium" v-model.trim="account" placeholder="提取金额" :maxlength="inputMaxL" @input="inputMaxL = /^\d+\.?\d{0,1}$/.test(account) ? null : account.length - 1"></el-input&

mysql

原创 2022-01-13 17:46:24 1155 阅读

vue 监听键盘回车事件 @keyup.enter || @keyup.enter.native

vue运行为v-on在监听键盘事件时，添加了特殊的键盘修饰符：<input v-on:keyup.13="submit">vue还非常贴心地给出了常用按键的别名，这样就不必去记keyCode ~ ~上面代码，还可以在这样写： <input v-on:keyup.enter="submit"><input @keyup.enter="submit...

vue

键盘事件

修饰符

封装

监听键盘

原创 2022-01-13 17:41:46 3301 阅读

vue 关于 v-model 的真实面孔

故事前景：vue中子组件向父组件传递数据的方式为：使用 $on(eventName) 监听事件使用 $emit(eventName)触发事件而当我们自己写一个子组件时，往往用这句代码：this.$emit('input', value)通过触发input事件来传递value给父组件，那么问题来了，此处为何传的是'input'？？？完美解读：真相...

$emit

v-model

语法糖

监听事件

传递数据

原创 2022-01-13 17:41:46 80 阅读

为什么vue组件的属性，有的需要加冒号“:”，有的不用?

加冒号的，说明后面的是一个变量或者表达式；没加冒号的后面就是对应的字符串字面量！例子：<el-radio-group v-model="handle"> <el-radio :label="true">打开</el-radio> <el-radio :labe...

字符串

字面量

string类

mysql

原创 2022-01-13 17:41:46 193 阅读

前端框架选型&项目技术栈参考资料

web技术选型参考：1、框架自身是否成熟2、生态系统是否完善3、是否满足项目需求目前常见的主流技术参考，根据github关注度排名：架构框架框架名技术支持思想针对性 React Facebook 虚拟dom，单项数据流高效创建交互式组件 Vue Evan You（尤雨溪）轻量级AngularJs ...

vue

前端框架

项目初始化

github

自动化构建

原创 2022-01-13 17:41:43 103 阅读

【问题记录】vue单页面项目中解决安卓4.4版本不兼容的问题

一、问题描述用户在用夜神安卓模拟器时打开我方APP时，H5页面显示空白！二、问题分析因为模拟器的系统版本过低，现在安卓系统已经到8了，但是夜神模拟器的系统还是4.4。所以浏览器版本也过低，不支持我们目前的写法。三、解决方案1.cnpm安装cnpm i babel-polyfill --savecnpm i es6-promise --save 2.m...

vue

浏览器版本

解决方案

安卓系统

mysql

原创 2022-01-13 17:41:43 64 阅读

Vue生命周期简介

Vue所有的生命周期钩子自动绑定在this上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法。这是因为箭头函数绑定了父上下文，因此this与你期待的Vue实例不同。1、beforeCreate　　在实例初始化之后，数据观测和event/watcher时间配置之前被调用。2、created　　实例已经创建完成之后被调用。在这一步，实例已经完成以

vue

服务端

生命周期

数据

转载 2022-01-13 17:39:46 58 阅读

【问题记录】新建项目时git clone 与vue init 冲突事件

git clone 与vue init 相爱相杀首先，我在git上新建了一个项目 leke-operation。然后，我在本地clone了这个项目 leke-operation。接着，我在本地的这个项目（目前是一个空文件夹 leke-operation）执行命令 vue init webpack leke-operation这会儿你会很fu*k的遇到vue初始化命名必须输入项目名，...

git

初始化

解决方案

原创 2022-01-11 18:15:14 186 阅读

【问题记录】VeeValidate配置中文的两种不同做法

旧版： "vee-validate": "^2.0.0-rc.13"新版："vee-validate": "^2.1.0-beta.7"安装最新版的VeeValidate之后对其进行中文化操作时，之前老一套（2.0版）中文化的做法如下图：系统报错提示 addLocale 是不存在的

VeeValidate

表单校验

旧版

表单验证

中文字符

原创 2022-01-11 18:11:24 343 阅读

【前端路由】Vue-router 中hash模式和history模式的区别

咱们今天说说VUE路由的hash模式与history模式的区别，这个也是面试常问的问题，不要小看这道题其实问到这里的时候那个面试官应该是个大牛，开发经验丰富，这个题其实就是考验你的开发经验是否属实。咱们来看看小白的回答。小白回答：hash模式url带#号，history模式不带#号。回答总结：这个回答其实和没有回答是一样，百度一下都知道了，官网文档也有，如果这样回答就能通过，那么那个...

前端路由

vue-router

服务器

加载

html

原创 2022-01-11 18:07:34 356 阅读

【上传文件】基于阿里云的视频点播VOD、对象存储OSS实现音视频图片等文件上传

一、效果演示a.测试界面初始化b.点击【上传】c.点击【开始上传】d.点击【上传音频】选择音频之后点击【开始上传】c.点击【上传图片】，注意图片上传为单按钮，选择文件之后自动完成上传

阿里云文件上传

视频点播

对象存储

视频上传

图片上传

原创 2022-01-11 18:05:47 3396 阅读

vue刷新后menu激活态定位当前路由

方法：利用el-menu 自带属性 default-active 匹配当前路由 $route.path实例：<el-menu:unique-opened="true":router="true":collapse="isCollapse"class="elMenu"text-color="#fff"background-color="#37363B"

vue

el-menu

菜单栏

页面刷新

原创 2022-01-11 18:03:52 643 阅读

后台管理系统模板简介

1、效果演示管理后台系统模板-预览2、重点内容1. 用户登录态的实现 - cookie2. 本地mock数据方式 - EasyMock/ExpressMock/MockJs/YapiMock/本地拦截3. 前端请求做了哪些事情 - axios4. 前端路由模式 - vueRouter5. 表单校验交互 - veeValidate6. 列表查询的UI和交互 - elem...

后台管理系统

vue

element

表单校验

ios

原创 2022-01-11 18:02:38 469 阅读

vue Element UI使用中.$scopedSlots.default is not a function 报错

情景描述:在使用 element ui 的el-table 组件时，表头进行v-if判断来动态显示，正常来说这样的操作时没得任何毛病的，但是如果在这基础上使用 <template slot-scope="scope"> 操作的话，表头一旦切换就会报错，错误信息如下图：解决办法如图：解释一下：这是因为在v-for或者v-if切换标签时，多个相同的标签被渲染，...

复用

动态显示

切换标签

原创 2022-01-11 18:02:16 906 阅读

vue中 computed 与 watch 、 created 与 mounted 彼此的关联与顺序

首先，来认识一下他们的一个基本写法长啥样，直接看下面这个demo：<template> <div> <p> {{ firstNum }} </p> <p> {{ secondNum }} </p> <p> {{ thirdNum }} </p>...

vue

computed

watch

生命周期

vuejs

原创 2022-01-11 18:00:55 416 阅读

Eslint 配置及规则说明

一、常用配置先附上本人常用配置，在 .eslintrc.js 文件中：rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', // allow console during development 'no-debugger': process.env.NODE_ENV ...

eslint

js

编码规范

字面量

赋值

原创 2022-01-11 18:00:24 778 阅读

【上传组件优化】el-upload组件结合上传阿里云OSS实现更优交互

1、效果展示2、实现代码在components目录下，新建组件 myImgUpload.vue，代码如下：<template> <div> <el-upload :class="disabled ? 'hideAdd' : 'showAdd'" ref="myImgUpload"...

图片上传

对象存储OSS

上传阿里云

el-upload

上传

原创 2022-01-09 17:08:27 715 阅读

vue-qr二维码插件使用简介

官方介绍：https://www.npmjs.com/package/vue-qr1、安装npm install vue-qr --save2、导入vue项目中使用下面给出一个简单的demo<template

vue-qr

vue

二维码

ico

背景图

原创 2022-01-09 16:58:55 683 阅读

veeValidate使用data-vv-scope实现部分区域校验以及清空errors

1、使用场景如图，我要在登录、注册两个不同tab页进行各自的表单校验。2、关键代码展示template部分：<div class="login-panel" v-show="activeTab === 1"> <div class="panel-content"> <div class="login-account-inp.

veeValidate

区域校验

data-vv-scope

vue

表单校验

原创 2022-01-09 16:58:33 649 阅读

【问题记录】Uncaught TypeError: Cannot assign to read only property 'exports' of object '

1、问题描述项目之前正常的路由配置是这样的： 2、路由配置说明第一种做法：每个页面模块目录通过一个 index.js 主入口来导出（module

vue

exports

export

require

import

原创 2022-01-09 16:57:30 239 阅读

Vue粒子特效使用教程（vue-particles插件）

演示预览：点击查看效果演示代码：点击查看代码官方教程：https://vue-particles.netlify.com/具体步骤如下1、安装插件npm install vue-part

vue-particles

粒子特效

vue粒子特效

vue

粒子背景

原创 2022-01-09 16:57:06 1817 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

mb61cde1abee469的博客

欢迎

【问题记录】【排查问题的方法总结】vue3中数据失去响应式？为什么数据变了，视图只更新了一次就不再更新了？

vue 环境搭建与安装

【问题记录】vue生成文件本地打开查看效果

js 监听移动端web触屏事件滑动响应

vee-validate 内置的校验规则

vue中input限制最多两位小数

vue 监听键盘回车事件 @keyup.enter || @keyup.enter.native

vue 关于 v-model 的真实面孔

为什么vue组件的属性，有的需要加冒号“:”，有的不用?

前端框架选型&项目技术栈参考资料

【问题记录】vue单页面项目中解决安卓4.4版本不兼容的问题

Vue生命周期简介

【问题记录】新建项目时git clone 与vue init 冲突事件

【问题记录】VeeValidate配置中文的两种不同做法

【前端路由】Vue-router 中hash模式和history模式的区别

【上传文件】基于阿里云的视频点播VOD、对象存储OSS实现音视频图片等文件上传

vue刷新后menu激活态定位当前路由

后台管理系统模板简介

vue Element UI使用中.$scopedSlots.default is not a function 报错

vue中 computed 与 watch 、 created 与 mounted 彼此的关联与顺序

Eslint 配置及规则说明

【上传组件优化】el-upload组件结合上传阿里云OSS实现更优交互

vue-qr二维码插件使用简介

veeValidate使用data-vv-scope实现部分区域校验以及清空errors

【问题记录】Uncaught TypeError: Cannot assign to read only property 'exports' of object '

Vue粒子特效使用教程（vue-particles插件）