Vue起步学习
小白一枚自学Vue,不积跬步无以至千里,慢慢来吧!
Angular baby
软妹前端开发工程师自留地,专注Angular、Vue。
展开
-
Vue:弹窗中列表的复选框效果实现(列表需要做分页),复选数据带到父组件中
弹窗中列表前需要多选框,可以复选数据带到父级页面的列表中原创 2022-06-01 14:26:38 · 2016 阅读 · 2 评论 -
Vue:uniapp实现NFC标签读取功能
微信小程序官方文档中提供了调用NFC功能的基础库:NFC - wx.getNFCAdapter - 《微信小程序官方开发文档(全) - 20210305》 - 书栈网 · BookStackNFCAdapter wx.getNFCAdapter()返回值NFCAdapter错误示例代码 微信小程序提供了一个简单、高效的应用开发框架和丰富的组件及API,帮助开发者在微信中开发具有原生 APP 体验的服务。本手册整理于2021年3月份,内容包含微信小程序开发指南、微信小程序框架、微信小程序组件、微信小程序A原创 2022-05-25 15:33:27 · 4862 阅读 · 4 评论 -
input输入框前后去空格:使用v-model.trim
介绍v-model的三种修饰符原创 2022-05-05 14:23:27 · 5210 阅读 · 0 评论 -
小程序发布提审被驳回,提示当前提审小程序代码包中地理位置相关接口wx.getLocation暂未开通
小程序发布提审被驳回,提示当前提审小程序代码包中地理位置相关接口wx.getLocation暂未开通的解决办法。原创 2022-04-29 14:32:40 · 12640 阅读 · 4 评论 -
微信小程序-下载文件并打开/下载视频播放视频/下载音频文件-Android和IOS调试终版
下载文件并预览:调接口下载文件,接口返回的是.bin类型的临时文件,直接调用uniapp原生接口openDocument可能出现打不开的情况或者可能打开文件乱码异常,所以我们需要获取一下文件类型fileType适用于接口返回头中返回了文件名称和类型的情况:使用var arr = res.header['Content-Disposition'].toString().split('filename=')[1].split('.')从返回头Content-Disposition中截取文件原创 2022-04-28 13:51:11 · 6385 阅读 · 0 评论 -
Vue:在特定页面(route)执行定时任务
首先在项目的入口App.vue中使用watch对路由route进行判断,当路由不是指定的"Dashboard"路由时执行事件触发,关闭定时任务:watch: { $route: { handler (newValue) { if (newValue.name != "Dashboard") { events.$emit('clearInterval') } }, immediate: true }原创 2022-02-07 14:05:51 · 1105 阅读 · 0 评论 -
Vue使用aplayer播放.wav格式音频不显示时长问题
在弹窗中使用了aplayer播放器,但是发现.mp3格式音频显示和播放正常,.wav格式无法显示音频总时长,于是想到做以下改造:1、由于在点击播放后,可以显示总时长,所以想到打开页面后,自动播放,先把时长展示出来::autoplay="autoplay"其中autoplay初始化为true2、在打开弹窗后,使用ref绑定页面元素的办法,调用音频播放器的pause(暂停)方法,让自动播放的音频暂停播放,这样用户的体验就是打开音频可以显示时长,也没有自动播放了:ref="aplayer"原创 2021-12-02 11:20:28 · 2209 阅读 · 0 评论 -
解决antd下拉框a-select下拉列表和输入框分离的问题
问题多出现在弹窗内使用a-select的情况中,当打开下拉框的情况下,滑动页面,会发现下拉列表和输入框分离了这种情况只需要在a-select标签内加上以下属性就可以:getPopupContainer="(trigger) => trigger.parentElement"完整代码:<a-tree-select multiple placeholder="请选择所属角色类型" all原创 2021-11-20 11:08:23 · 2265 阅读 · 0 评论 -
Vue页面antd select多选模式下(mode=“multiple“),点击框外下拉选项无法收起的问题完美解决
<a-select class="w260" allowClear :maxTagTextLength="maxTagTextLength" mode="multiple" :open="isOpen" @focus="isOpenFocus" @ch...原创 2021-11-19 18:23:18 · 7576 阅读 · 0 评论 -
解决vue项目页面F5刷新mounted里的函数不执行问题
解决方案:这个问题和Vue的生命周期有关,想要在F5刷新后调用的接口,可以写在beforeCreate中补充学习资料:常见的钩子触发事件beforeCreate在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。数据和实例都不能访问created实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始原创 2021-11-19 18:01:58 · 2442 阅读 · 1 评论 -
Vue antd分页器pagination的使用方法
<a-table bordered :scroll="{ x: 500 }" :rowKey="(record) => record.id" :columns="columns" :dataSource="data" :total="total" :pagination="paginationOpt" >在data中进行分页器的初.原创 2021-11-18 11:44:47 · 6001 阅读 · 0 评论 -
remote: HTTP Basic: Access deniedfatal: Authentication failed for ‘xxxxx‘的问题解决
在没有修改git密码的情况下,使用vs code推送代码,总是会报错:remote: HTTP Basic: Access deniedfatal: Authentication failed for 'xxxxxxxx'(git仓库地址)网上试了一堆方法,只有下面这个方法生效了,分享给大家。首先要删除Windows记住的git本地的密码——第一步:找到凭据管理器(控制面板-用户账户-凭证管理器-windows凭据),删除git项的密码。第二步:重新去执行gitpush命令时,就.原创 2021-11-16 13:34:34 · 2362 阅读 · 0 评论 -
密码和确认密码校验(使用<a-popover>做强度校验)
密码字段在点击填写的时候,右侧弹出校验密码强度的浮框:<a-popover placement="rightTop" :trigger="['focus']" :getPopupContainer="(trigger) => trigger.parentElement" v-model="state.passwordLevelChecked" ..原创 2021-10-28 10:49:41 · 2675 阅读 · 0 评论 -
<a-tree-select>多选树组件的输入搜索功能清空
树型选择控件多选支持搜索的时候,输入文字,可以对树进行筛选:<a-tree-select class="w260" multiple placeholder="请选择业务分类" v-model="queryParam.businessTypeIdList" allowClear :filterTreeNod原创 2021-10-26 13:50:23 · 3978 阅读 · 0 评论 -
PC端禁止用户缩放页面的实现方式
对于移动端,我们可以直接这样限制:<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=no">在PC端上:1、禁止用户在页面上使用ctrl+鼠标滚轮和ctrl+“+”“-”进行页面缩放:可以在index.html中增加如下代码:<script> document.addEventListener('m...原创 2021-10-25 18:11:13 · 2969 阅读 · 1 评论 -
Vue开发小记:前端直接导出表格为excel
首先安装依赖:npm install --save xlsx file-saver组件中引入:import FileSaver from 'file-saver'import XLSX from 'xlsx'然后在页面上添加导出按钮,导出方法绑定到table对象:<!-- 前端直接导出xlsx --> <a-button style="margin-left: 10px" @click="outTab" >导出<原创 2021-08-31 12:12:14 · 194 阅读 · 0 评论 -
ant-design treeSelect组件replaceFields属性报错
使用ant-desgin的treeSelect组件时,由于接口返回的数据键值并不是组件想要的value、title、key、children四个参数,所以考虑替换查看api,有一个replaceFields属性可以替换接口的参数,所以立刻使用起来 <a-tree-select class="w240" v-model="queryParam.deptId" tree-data-simple-mo.原创 2021-08-24 14:24:29 · 6508 阅读 · 0 评论 -
antdesign(vue)中 a-tree-select组件用filterTreeNode设置筛选结果不正确
antdesign中的文档里,让我们这么筛选,那么代码里就要这么写<a-tree-select v-model="queryParam.businessTypeIdList" multiple :filterTreeNode="filterTreeOption" show-search treeDefaultExpandAll ..原创 2021-08-23 11:08:26 · 10612 阅读 · 9 评论 -
u-view的u-select组件除了label和value,传递其他参数
组件除了label和value,还可以传递其他参数,用extra进行传递:例如在给u-select绑定的array赋值时,extra用来保存每个数据的一个额外属性<u-select :list="industryCodeList"@confirm="confirm"></u-select>其中industryCodeList像这样赋值:this.myhttp.post('device', '/basic/region/xxxxlist', { dic..原创 2021-08-19 11:11:52 · 2540 阅读 · 0 评论 -
转载:打印插件LODOP Vue中的使用
官网:http://www.lodop.net/index.html首先需要官网下载安装软件:进入官网后,在下载中心里面下载:下载后的产品下载压缩包中文件如下图:其中CLodop_Setup_for_Win32NT.exe和install_lodop64.exe(或install_lodop32.exe)需要安装,而LodopFuncs.js则引入项目中。不过在引入LodopFuncs.js之前需要引入JQuery,引入方法网上有很多,但这里要注意,如果你的项目中没有配置文件w.转载 2021-06-05 09:58:36 · 714 阅读 · 0 评论 -
小程序开发小记
1、暂存方法:uni.setStorageSync('scanInfo', JSON.stringify(res.data));原创 2021-06-04 15:21:30 · 150 阅读 · 0 评论 -
vue 注册全局组件
在main.js里面使用Vue.component()import tuiIcon from "@/components/thorui/tui-icon/tui-icon";Vue.component('tuiIcon', tuiIcon)关于Vue.use()和Vue.component()的用法区别,可以参考下面这篇文章:https://www.cnblogs.com/yesyes/p/6658611.htmlindex.js里面把组件封装成插件,就可以使用Vue.use()使用自原创 2020-12-08 14:13:51 · 170 阅读 · 0 评论 -
Vue:单文件组件-学习笔记
在很多 Vue 项目中,我们使用Vue.component来定义全局组件,紧接着用new Vue({ el: '#container '})在每个页面内指定一个容器元素。这种方式在很多中小规模的项目中运作的很好,在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中,或者你的前端完全由 JavaScript 驱动的时候,下面这些缺点将变得非常明显:全局定义...原创 2020-03-13 14:28:22 · 2954 阅读 · 0 评论 -
Vue:混入的使用和作用
最近在跟着Vue.js教程自学Vue,看到混入这一章的时候感觉没能理解它的作用。看了一下混入的定义:混入是一种分发Vue组件中可复用功能非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。例子://定义一个混入对象var myMixin={ created:function(){ this.hell...原创 2020-03-13 10:09:36 · 1443 阅读 · 0 评论 -
Vue:动态组件 & 异步组件
一、在动态组件上使用keep-alive:我们之前曾经在一个多标签的界面中使用is特性来切换不同的组件:<component v-bind:is="currentTabComponent"></component>当在这些组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题。有时候重新创建动态组件的行为是非常有用的,但是在有些案...原创 2019-06-24 16:42:47 · 1249 阅读 · 0 评论 -
Vue:v-on、v-bind、v-model用法
1、v-on:用于绑定HTML事件 :一般v-on:click 可以缩写为 @click,其中@代表v-on:示例:例如我们在HTML的body中加入一个绑定了事件的button<div id="app"> <button v-on:click="onClick">点击这里</button></div>在js的methods中...原创 2019-06-04 11:33:50 · 4970 阅读 · 0 评论 -
Vue:Prop验证的使用
在Vue中,我们可以为组件的 prop 指定验证要求,例如你知道的这些类型。如果有一个需求没有被满足,则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。为了定制 prop 的验证方式,你可以为props中的值提供一个带有验证需求的对象,例如下面的示例:<template> <div style="margin-top:100px"...原创 2019-06-03 11:33:01 · 5118 阅读 · 0 评论 -
Vue:局部注册组件和示例代码
在Vue教程(参考链接:https://cn.vuejs.org/v2/guide/components-registration.html)中提到,全局注册往往是不够理想的。比如,如果你使用一个像 webpack 这样的构建系统,全局注册所有的组件意味着即便你已经不再使用一个组件了,它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。在这些情况下,你可...原创 2019-05-31 17:40:43 · 2776 阅读 · 1 评论 -
Vue::is特性详解和示例
今天在阅读Vue教程的时候,读到“解析DOM模板时的注意事项”这一节,看到:is特性——就是有些元素内部不能使用自定义标签或者自定义标签内也不能放某些特殊的标签,这时候就要用is代替一下,让html语法符合规则验证。is属于指定要在内部使用的标签。文档链接:https://cn.vuejs.org/v2/guide/components.html教程里面是这么解释的:看完之后...原创 2019-05-31 15:56:35 · 9395 阅读 · 1 评论 -
Vue: 通过prop向子组件传递数据,并且监听子组件事件
Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候,它就变成了那个组件实例的一个属性。为了给博文组件传递一个标题,我们可以用一个props选项将其包含在该组件可接受的 prop 列表中:Vue.component('blog-post', { props: ['title'], template: '<h3>{{ title }}...原创 2019-05-30 18:04:17 · 3028 阅读 · 0 评论 -
Vue:Do not use 'new' for side effects报错解决
原代码片段:new Vue({ el: '#post-demo', data: { posts: [ { id: 1, title: 'My journey with Vue' }, { id: 2, title: 'Blogging with Vue' }, { id: 3, title: ...原创 2019-05-30 16:28:55 · 10162 阅读 · 1 评论 -
Vue:router直接绑定按钮button实现页面的跳转
在页面上向按钮上绑定方法,直接实现路由跳转到其他页面,比如我们想从HelloVue页面跳转到Demo页面和它的上级页面HelloWorld页面,该怎么写呢?我们可以直接在按钮上绑定一个方法,用this.$router.push(目标路由) 直接实现路由的跳转<template> <div id="app"> <el-container> ...原创 2019-05-30 09:39:47 · 30570 阅读 · 8 评论 -
Vue:VSCode中Vue代码的格式化问题解决(Code formatter)
VSCode自从更新之后,vue文件的html代码格式化就失效了,而且vue文件中的js ,css格式化样式都变了,原因在于都采用了prettier 来格式化,而配置文件中vetur.format.defaultFormatter.html 这个配置项的值为"none",我们需要对它重新进行设置。步骤一:首先确保你安装了vetur扩展插件。如下图,扩展里直接搜索vetur,安装下图的V...原创 2019-05-29 14:46:54 · 41874 阅读 · 2 评论 -
Vue:在项目中引入第三方UI组件库——饿了吗Element UI组件库和ATUI组件库
1、引入Element组件库:首先我们使用npm的方式安装:它能更好地和webpack打包工具配合使用。npm i element-ui -S然后我们在使用样式的页面引入样式和组件库即可:<!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-cha...原创 2019-05-28 17:27:57 · 5097 阅读 · 1 评论 -
Vue:把组件作为自定义元素来使用以及Identifier ' simple_couter' is not in camel case问题解决
这里介绍两种组件调用的方法:1、直接在当前组件(HelloVue.vue)中使用Vue.component插入一个子组件button-counter:<template> <div id="vue"> <div id="components-demo"> <button-counter></button-coun...原创 2019-05-28 15:44:18 · 10178 阅读 · 0 评论 -
Vue:The template root requires exactly one element.的解决办法
这是因为vue的模版中只有能一个根节点,所以在<template>中插入第二个元素就会报错解决方案:将<template>中的元素用一个大的<div>包起来,这样就可以在其中添加多个元素了,可以参考以下示例:<template> <div id="vue"> Hello Vue.js!{{message}} ...原创 2019-05-28 09:38:22 · 98271 阅读 · 13 评论 -
Vue:Elements in iteration expect to have 'v-bind:key' directives的解决办法
1、Vue 2.2.0+的版本里,当在组件中使用v-for时,key是必须的。我们可以更改vetur配置 :vscode文件->首选项->设置->搜索vetur.validation.Template,将这一项去掉就可以了2、我们在使用v-for的时候,在v-for 后添加 v-bind:key="item"<template> <div ...原创 2019-05-28 09:27:45 · 35510 阅读 · 1 评论 -
Vue起步——环境搭建和简单示例
Vue起步——环境搭建和简单示例Vue的开发环境搭建Nodejs安装安装vue-cli脚手架1、安装全局的脚手架,用于全局的模板的建立2、利用vue-cli的脚手架进行项目模板的构建3、安装依赖4、运行项目开发工具Visual Studio Code的安装修改Vue项目示例Vue的开发环境搭建Nodejs安装可以在下面的网站下载安装包:https://nodejs.org/en/downl...原创 2019-05-22 12:35:07 · 267 阅读 · 0 评论 -
Vue:vue中使用TweenLite
1、TweenLite介绍:TweenLite最初是GreenSock公司推出的一款基于ActionScript的免费开源的缓动引擎,是webgame开发人员比较常用的一个动画库,使用TweenLite能够简化动画制作的代码编写工作。2、使用方法:2.1、安装TweenLite依赖gsap:npm install gsap2.2、使用TweenLite实例:记得在<...原创 2019-09-07 09:48:51 · 4320 阅读 · 0 评论 -
Vue:自定义指令
除了核心功能默认内置的指令 (v-model和v-show),Vue 也允许注册自定义指令。1、所有已有的vue指令如下:已有的vue指令 v-text v-if v-for v-model v-once v-html v-else v-on v-pre v-show v-else-if v-bind v-...原创 2019-09-11 08:17:13 · 126 阅读 · 0 评论