Vue开发中的点点滴滴
严于律己,精于行动,点滴积累,着眼未来,你也许不负青春,本专栏记录 Vue 从基础入门到实际项目开发中的点点滴滴
早起的年轻人
先后从事在 java EE 领域、Android开发架构领域、iOS开发领域、小程序开发领域、前端开发、产品设计领域、项目管理学领域等,并在大量的实践中积累了丰富的经验,也形成了一套完整的移动互联网开发解决方案
在各大技术社区刊登技约1000多篇术分享文章,同时录制了发布了多个Flutter从简到详系列的视频教程以及Android 、iOS、微信小程序系列视频教程
2021年出版《Flutter组件精讲与实战》清华大学出版社出版、《Flutter 实战应用开发》机械工业出版社出版
2022年出版《Flutter深度探索企业应用开发》清华大学出版社出版、《鸿蒙OS应用实战》机械工业出版社出版
展开
-
Vue 点击图片放大显示功能
首先是自定义大图显示的通用组件:big-img.vue< template > < div v-show = " visible " @click = " closeClick " class = " showPhoto " > < img class = " img " :src = " url " alt = " 图片加载失败 " /> </ div > </ template > < script > export default {props : {url : {原创 2023-03-29 16:14:15 · 2176 阅读 · 0 评论 -
JavaScript 中的 String 类型 模板字面量定义字符串
ECMAScript 6新增了使用模板字面量定义字符串的能力。与使用单引号或双引号不同,模板字面量保留换行字符,可以跨行定义字符串原创 2023-03-06 14:49:39 · 853 阅读 · 0 评论 -
Vue Avoid using non-primitive value as key, use string/number value instead.
在使用 for 循环时,不要用对象或是数组作为key,用string或value作为key,逐一排查页面中 使用到 for 设置 key 地方,修改后解决问题。原创 2022-09-18 13:49:26 · 791 阅读 · 0 评论 -
avue-input-map 高德地图选择坐标地点
avue-input-map 高德地图选择坐标地点。原创 2022-08-04 08:27:46 · 1481 阅读 · 3 评论 -
vue获取本地IP地址 自动配置本地请求地址
这个背景是这样的,就是我运行这个 Vue 代码,然后再每次本机运行的时候,我的服务器是也是本地启动的,然后我每换一个环境环境,然后咱们这个IP就变了,所以我希望在我的配置文件中我启动的是调试模式的时候,他自动给我获取获取这个本机的这个地址。...原创 2022-06-28 22:25:48 · 3058 阅读 · 1 评论 -
JavaScript 数组 array.at() 获取数组中最后一个元素
志在巅峰的攀登者,不会陶醉在沿途的某个脚印之中,在码农的世界里,优美的应用体验,来源于程序员对细节的处理以及自我要求的境界,年轻人也是忙忙碌碌的码农中一员,每天、每周,都会留下一些脚印,就是这些创作的内容,有一种执着,就是不知为什么,如果你迷茫,不妨来瞅瞅码农的轨迹。1slice() 方法slice() 方法 可提取字符串的某个部分,并以新的字符串返回被提取的部分;也可用于数组的提取。 const array = ['1', '2', '3','4', '5', '6']; let .原创 2022-04-18 13:02:55 · 1645 阅读 · 0 评论 -
idea vue项目通过@跳转 vue设置完@映射路径之后在IDEA中无法跳转
@ 符号来表示根目录,在 idea 中,按住 ctrl 键盘无法跳转,开发效率很不高,对于小编来说,是必须要解决的原创 2021-12-20 00:41:07 · 1827 阅读 · 0 评论 -
Element中 el-tag 点击事件 el-tag添加@click事件无效
el-tag 设置点击事件 使用 @click.native原创 2021-12-20 00:13:23 · 3983 阅读 · 2 评论 -
html css 清除 button 选中时的边框样式 CSS outline属性
效果图一目标图方式只需要设置 button的样式为button{ outline:none; }原创 2021-01-23 14:59:09 · 1748 阅读 · 0 评论 -
JS 雪花飘落效果 玩转 canvas 绘图 码农的每日积累 -匠心之作
HTML5 元素 canvas 用于图形的绘制, canvas 标签只是图形容器,通常使用 JavaScript 来完成绘制,如绘制路径,盒、圆、字符以及添加图像。 getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。原创 2020-12-03 08:57:04 · 908 阅读 · 1 评论 -
JS核心基础数组的操作概述
本文章将描述 JS 中向数组中添加元素的方法,JS 数组添加元素有三种方式:push、unshift、splice 。原创 2020-10-02 18:16:41 · 400 阅读 · 0 评论 -
npm 报错This is probably not a problem with npm. There is likely additional logging output above.
npm 报错This is probably not a problem with npm. There is likely additional logging output above.可能是版本的问题在把之前装的都清空,重新安装一次rm -rf node_modulesrm package-lock.jsoncnpm cache clear --forcecnpm install原创 2020-09-16 23:12:49 · 1418 阅读 · 0 评论 -
Vue 实现点击复制功能概述
在实际项目开发中,用到复制的地方还挺多,如一些链接过长不显示,点击一下载复制到剪切板或者是将复制的内容自动填到其他组件中,这个复制功能 有些是纯html页面,有些是vue项目,本文章来总结常用的三种复制方式。原创 2020-09-08 21:41:45 · 3461 阅读 · 0 评论 -
CSS水平垂直居中布局方案概述
在前端开发中,通过CSS实现布局容器的居中,也有诸多方法方式,当然也是CSS面试题中的经典面试题,在本文章中会系统的分析综述 通过 Flexbox 布局模块 与 CSS Grid布局模 实现容器的居中效果原创 2020-09-01 07:48:01 · 543 阅读 · 0 评论 -
CSS中flex和inline-flex的区别
css中Flex布局的取值inline-flex 与 flex的区别原创 2020-08-30 18:30:34 · 7297 阅读 · 0 评论 -
Vue项目开发中的点滴积累系列文章
题记—— 严于律己,精于行动,点滴积累,着眼未来,你也许不负青春Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架本文章 记录从基础入门到实际项目开发中的点点滴滴Vue.js 官方 点击这里查看1 Vue 基础打造篇Vue中的hellow world描述el与data的基本使用–Vue知识点归纳(一)vue中的v-text指令之Vue...原创 2020-03-08 19:11:55 · 524 阅读 · 0 评论 -
Vue中vue-router路由使用分析
> 本小节描述> 1、前端路由的两种主流实现方式 hash 与 history对象 简述> 2、分析使用在 vue 中通过 vue-router 实现路由功能原创 2020-03-08 18:57:52 · 1657 阅读 · 0 评论 -
vue中富文本编辑器vue-quill-editor在vue中自定义选择视频插入编辑文章中
vue-quill-editor 是 Vue 项目中使用的 富文本编辑器1 引言在实际应用开发中,在常见的管理后台或者是多媒体管理后台,多多少少都会有富文本编辑器,而在编辑富文本时,通常的一个需求就是在富文本中插入图片或者视频,本篇文章讲述的就是在 vue 项目中,使用 Vue-Quill-Editor 编辑器在富文本中插入视频。官方的效果如下图1所示 点击这里查看Vue-Quill-E...原创 2020-02-23 22:48:35 · 3012 阅读 · 0 评论 -
vue中webpack编译打包使用之Vue知识点归纳(十一)
1 什么是webpack,到底需要解决什么问题近几年前端的快速发展,前端已不是简单的html, css, jquery这样一套技术了.前端的世界出现了越来越多的新的技术。例如jsx(类xml语法,增强js语义,结构清晰抽象程度高,诞生了跨平台 react native代码模块化)scss, stylus, less预编译语言(缓解浏览器兼容造成的冗余,精简的语法)AMD CommonJ...原创 2019-12-03 02:00:44 · 873 阅读 · 0 评论 -
vue中Axios网络请求之Vue知识点归纳(十)
本文描述vue 中 Axios 简述vue 中使用 Axios 发起 get 请求vue 中使用 Axios 发起 post 请求1 简述Axios是一个基于Promise(ES6中用于处理异步的)的HTTP库,用于浏览器和node.js中。导包地址<script src="https://unpkg.com/axios/dist/axios.min.js"><...原创 2019-12-01 23:48:54 · 790 阅读 · 0 评论 -
vue中v-model指令的使用之Vue知识点归纳(九)
本文中描述vue 中 v-model 指令的基本使用1 简述vue 中 v-model 用来获取和设置 表单中的值2 案例<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="w...原创 2019-12-01 23:05:38 · 644 阅读 · 0 评论 -
vue中v-for指令的使用之Vue知识点归纳(八)
本文章将描述vue 指令 v-for 的基本使用1 简述vue 指令 v-for 用来操作 dom ,常用于数组元素的操作2 案例<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" conten...原创 2019-12-01 22:48:28 · 840 阅读 · 0 评论 -
vue中v-bind指令的使用之Vue知识点归纳(七)
本文中描述vue 中 v-bind 指令的基本使用1 简述vue 中 v-bind 用来操作 html 元素标签中的属性2 案例<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content...原创 2019-12-01 22:22:50 · 698 阅读 · 0 评论 -
vue中v-if指令的使用之Vue知识点归纳(六)
本文章描述vue 中 v-if 的基本使用vue 中 v-show 与 v-if 的区别1 简述vue 中 v-if 指令,顾名思义是用来进行条件判断的,直接操作 dom2 案例<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <me...原创 2019-12-01 21:58:24 · 1658 阅读 · 0 评论 -
vue中v-show指令的使用之Vue知识点归纳(五)
本文中将描述v-show 指令的基本使用1 简述v-show 指令用来控制元素的显示与隐藏显示 状态的div<div v-show="true"></civ>隐藏状态下的 div<div v-show="false"></civ>2 实例<!DOCTYPE html><html lang="en">...原创 2019-12-01 21:47:08 · 1429 阅读 · 0 评论 -
vue中v-on指令的使用之Vue知识点归纳(四)
本文章中描述v-on 指令的基本使用点击按钮动态修改数据1 简述vue 中 v-on 指令简单点来讲,是用来给元素设置绑定事件。格式v-on:事件名称="方法名称"这里的事件名称如:click 单击,dblclick 双击等等这里的方法名称随机定义,指的是触发事件后所调用的方法这是定义的方法名称,在 vue 实例中的 methods 属性中实现。<!DOCTYPE...原创 2019-12-01 21:12:59 · 972 阅读 · 1 评论 -
vue中v-html指令的使用之Vue知识点归纳(三)
本文章中将描述v-html 指令的基本使用v-html 的作用v-html 与 v-text 的区别1 简述vue中v-html 标签,用解析设置带有html标签的文本<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta nam...原创 2019-12-01 20:41:02 · 9328 阅读 · 0 评论 -
vue中的v-text指令之Vue知识点归纳(二)
本文中将描述:v-text 的指令的基本使用v-text 与差值表达式的区别1 简述v-text会将元素当成纯文本输出<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="widt...原创 2019-12-01 19:57:27 · 664 阅读 · 0 评论 -
Vue中的hellow world描述el与data的基本使用--Vue知识点归纳(一)
本文中将描述:第一个Vue程序的开发使用Vue 中的属性 el 基本使用说明Vue 中的属性 data 操作数据使用说明1 Vue 中的hellow world<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="v...原创 2019-12-01 16:13:41 · 634 阅读 · 0 评论