![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端——vue
哈哈hyc
这个作者很懒,什么都没留下…
展开
-
vue3.0中setup使用(两种用法)
一、setup函数的特性以及作用 可以确定的是 Vue3.0 是兼容 Vue2.x 版本的 也就是说我们再日常工作中 可以在 Vue3 中使用 Vue2.x 的相关语法 但是当你真正开始使用 Vue3 写项目时 你会发现他比 Vue2.x 方便的多 Vue3 的一大特性函数 ---- setup 1、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数 也就说在 setup函数中是无法 使用 data 和 methods 中的数据和方法的原创 2021-07-13 10:59:11 · 4860 阅读 · 1 评论 -
vue中事件修饰符详解(stop, prevent, self, once, capture, passive)
.stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件.prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交.self 是只有是自己触发的自己才会执行,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号.capture 是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式.once 是将事件设置为只执行一次,如 .click.prevent.once 代表只阻止事件的默认行为一次,当第二次触发的时候事件.原创 2021-03-16 09:55:10 · 650 阅读 · 0 评论 -
关于Vue不能监听(watch)数组变化
一、vue监听数组vue实际上可以监听数组变化,比如data () { return { watchArr: [], };},watchArr (newVal) { console.log('监听:' + newVal);},created () { setTimeout(() => { this.watchArr = [1, 2, 3]; }, 1000);},在比如使用splice(0,2,3)从数组下标0删除两个元素,并在下标0插入一个元原创 2021-02-24 19:11:57 · 2240 阅读 · 1 评论 -
基于vuex的任务事项管理的小demo
基于vuex的任务管理的小demo,适合学习vuex,充分运用了vuex程序demo页面使用到的vuex方法总概况大家可以自己看看,探讨一下,附git地址:https://github.com/erdfty/vuex-todos原创 2020-11-06 17:12:53 · 171 阅读 · 0 评论 -
vue路由切换之淡入淡出的简单实现
路由跳转的淡入淡出在开发中有一种需求叫高端、大气、上档次。所以作为一个前端有责任让你的程序开起来更酷炫。可以在页面切换时我们加入一些动画效果,提升我们程序的动效设计想让路由有过渡动画,需要在<router-view>标签的外部添加<transition>标签,标签还需要一个name属性<transition name="fade" mode="in-out"><router-view ></router-view></.原创 2020-10-09 14:07:09 · 2056 阅读 · 0 评论 -
Vue 自定义指令实现点击DOM元素以外触发事件
1.directive.jsimport Vue from "vue";// 提交验证Vue.directive("clickOutside", { // 初始化指令 bind(el, binding, vnode) { function clickHandler(e) { // 这里判断点击的元素是否是本身,是本身,则返回 if (el.contains(e.target)) { return false; }原创 2020-09-16 17:12:06 · 1800 阅读 · 0 评论 -
在Vue中使用JSX作为render
ant-design-vue开源了一段时间后,收到了一些反馈,尤其是Form组件上线后,很多用户对JSX的使用感到迷惑和不习惯,为此专门介绍下Vue JSX的使用姿势及注意事项。Form组件的自动收集校验功能需要在JSX下使用,当然如果不需要自动收集校验,你依然可以使用templateVue 推荐在绝大多数情况下使用template来创建你的 HTML。然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,就需要使用render函数,它比 template 更接近编译器...原创 2020-09-16 15:54:11 · 1501 阅读 · 0 评论 -
js 实现 list转换成tree的方法示例(数组到树)
目标:JS 将有父子关系的平行数组转换成树形数据方法:双重遍历,一次遍历parentId,一次遍历id == parendId;该方法应该能很容易被想到,实现起来也一步一步可以摸索出来;const oldData = [{id:1,name:'boss',parentId:0},{id:2,name:'lily',parentId:1},{id:3,name:'jack',parentId:1},{id:4,name:'john',parentId:2},...原创 2020-07-30 15:42:07 · 3005 阅读 · 0 评论 -
vue中按钮防止暴力点击,多次提交数据的问题,组件通用化封装
方法1:用计时器改变按钮可点击状态<template> <div class="test"> <button @click="btnClick">button</button> </div></template><script> export default { name: 'HelloWorld', data() { return { is_...原创 2020-07-18 10:36:22 · 1049 阅读 · 0 评论 -
在vue中阻止click事件冒泡,防止触发冒泡另一个事件
使用vue阻止子级元素的click事件冒泡,很简单,用stop<div @click="test1()"> <span @click.stop="test2()">按钮1</span> <span>按钮2</span></div>这样点击div里面的按钮1,就不会触发div绑定时间test1()方法...原创 2020-07-01 10:45:07 · 3316 阅读 · 0 评论 -
网站前端如何实现HTML转PDF下载的两种方式
将HTML页面转化为PDF下载是前端经常会遇到的需求,下面就列举两种方式进行实现。以下两种方式默认都是在Vue项目环境下,其他框架项目自行灵活运用。方式一:使用html2canvas和jspdf插件实现该方式是通过html2canvas将HTML页面转换成图片,然后再通过jspdf将图片的base64生成为pdf文件。实现步骤如下:1,下载插件模块npm install html2canvas jspdf --save2,定义功能实现方法在项目工具方法存放文件夹utils中创.原创 2020-06-11 19:25:56 · 1288 阅读 · 1 评论 -
基于vue+iview实现省市区三级联动
表单关键代码<FormItem prop="province" label="省份"> <Select v-model="formValidate.province" placeholder="请选择省份" @on-change="changeProvince"> <Option v-for="(item,index) in provin...原创 2020-04-23 14:25:51 · 1757 阅读 · 0 评论 -
VUE模仿百度搜索框,按上下方向键及回车键实现搜索选中效果
逻辑介绍: 1、表单获取焦点时,显示搜索建议框 2、输入内容时,请求后台接口,并将返回的数据展示在搜索建议框内 3、表单获取焦点情况下,按键盘上下箭头可实现搜索列表项的切换,按回车可以选择当前激活的选项并获取当前选项的数据,然后你可以用数据做其他事了<template> <div class="container"> <div clas...原创 2020-04-21 15:13:06 · 1964 阅读 · 0 评论 -
"export 'default' (imported as '...') was not found in ''..."错误处理
开发中遇到的一个简单问题 却花了我很长时间//在一个js文件中导出fetch请求方法import fetch from 'utils/fetch';export function getCompanyList() { return fetch({ url: '/wx/company/list', method: 'get' })}//在vue的s...原创 2020-04-21 14:57:10 · 43304 阅读 · 9 评论 -
小程序中vue for循环出来的数据变成折叠面板
在我们制作移动端折叠面板的时候,可以按照ref的方式获取高度来调节,但是我们在写小程序的时候,要按照小程序的api来获取修改高度,以下为完整的折叠面板代码,可以实现自动识别高度,是否折叠v-for里面写class="changeBox" :style="{'height':flag[index] ? heightArr[index] < staticHeight ? heightA...原创 2020-03-09 20:02:46 · 1205 阅读 · 0 评论 -
vue for循环出来的数据变成折叠面板
v-for 里面写 :class ='{active:flag[index]} @click="showContent(index)"data:{ flag:[]}showContent:function(index){ var f=this.flag[index] = !this.flag[index] this.$set(this.flag,index,f);...原创 2020-03-09 19:52:40 · 1150 阅读 · 0 评论 -
vue入门——制作跑马灯效果
初学者vue可以制作一个简单的跑马灯效果的项目,效果如上图,代码如下图,大家可以自己尝试:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script原创 2019-03-11 18:32:45 · 2776 阅读 · 0 评论 -
利用vue,bootstrap制作简单的列表展示,添加和删除功能
实现效果如下图所示:添加按钮直接添加删除按钮可以删除其中的知识点有:bootstrap运用,v-model,@keyup,@click,全局过滤器,私有过滤器,自定义全局按键修饰符,Vue.directive() 定义全局指令,自定义一个颜色的指令等一些知识点,大家可以参考参考,代码如下:<!DOCTYPE html><html lang="e...原创 2019-03-13 16:56:53 · 1281 阅读 · 0 评论 -
移动端解决点击300ms延迟问题
在页面中加上如下代码: <!-- 下面这段Js是为了解决移动端点击300ms延迟问题 --> <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script> <script> if ('...原创 2019-04-30 09:47:07 · 1097 阅读 · 0 评论 -
vue项目proxyTable配置和部署服务器的问题
在localhost环境下跑项目时,接口地址是 http://xxxx.com/save/index 这样的接口地址,我们这样直接使用会存在跨域的请求,导致接口请求不成功,我们进入 config/index.js 代码下如下配置即可。dev: { // 静态资源文件夹 assetsSubDirectory: 'static', // 发布路径 assetsPu...原创 2019-04-30 22:43:45 · 998 阅读 · 0 评论 -
vue 生命周期 详解
先来看看vue官网对vue生命周期的介绍Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。每一个组件或者实例都会经历一个完整的生命周期,总共分为三个阶段:初始化、运行中、销毁。 实例、组件通过new Vue() 创建出来之后会初始...原创 2019-04-30 22:47:01 · 234 阅读 · 0 评论 -
vue使用钩子函数制作动画
vue使用钩子函数制作简单动画效果,代码如下,仅供参考交流:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...原创 2019-03-20 09:41:36 · 334 阅读 · 0 评论