VUE技术栈
VUE技术知识栈
PENG121.
这个作者很懒,什么都没留下…
展开
-
vue3.0新语法的基本使用
<template> <!-- <div>count:{{ count }}</div> <div>double:{{ double }}</div> --> <div>count:{{ count }}</div> <el-button @click="add">点击</el-button></template>import { reactive, re原创 2020-10-27 10:50:33 · 453 阅读 · 0 评论 -
vue短信验证码倒计时函数
倒计时函数const downTime = (e, Style) => { // 倒计时 let btnStyle = Style let _this = e.target let time = 60 let type = parseInt(_this.getAttribute('data-type')) if (type === 1) { let interval = setInterval(() => { _this.innerHTML = `$原创 2020-05-26 11:05:02 · 233 阅读 · 0 评论 -
VUE图形验证码
VUE简易图形验证码一、安装indetifynpm install identify二、创建一个组件SIdentify.vue文件将下面代码直接复制进组件即可<template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div></template&转载 2020-05-22 21:30:19 · 464 阅读 · 0 评论 -
VUE判断是否在微信浏览器
isWeiXin () { var ua = window.navigator.userAgent.toLowerCase(); // ua.indexOf('micromessenger')为真-微信端,如果为假,就是其他浏览器 if (ua.indexOf('micromessenger') > -1) { return true; /...原创 2020-05-07 10:26:32 · 4385 阅读 · 0 评论 -
vue 关于localStorage的使用方法
初始化获取localStorage数据 created () { this.getLocalStorage() },获取localstorage函数getLocalStorage () { this.hisKey = JSON.parse(localStorage.getItem('hisKey')) // 获取localStorage数组数据 this...原创 2020-04-29 17:48:50 · 675 阅读 · 0 评论 -
vue 文字轮播
html模块<span v-html="animation[count]"></span>js模块data数据animation: ['网上购物 最高50倍保障', '已有267291人参加', '已获得保障金额57.29亿元'],js函数模块created () { setTimeout(this.animations, 3000) }, ...原创 2020-04-27 17:40:35 · 318 阅读 · 0 评论 -
VUE把字符串解析成JSON
res.data是字符串数据,通过JSON.parse()转化成JSON格式JSON.parse(res.data)原创 2020-04-26 17:29:58 · 2174 阅读 · 0 评论 -
vuex核心概念详解
图片来自网络视频截屏,如有侵权,请联系本人立即删除!原创 2020-04-19 20:29:24 · 162 阅读 · 0 评论 -
vuex应用实例
template模板部分<template> <div> <h1>当前最新的count值:{{count}}</h1> <h1>{{showNum}}</h1> <button @click="sub()">-</button> <button @click=...原创 2020-04-19 20:21:46 · 122 阅读 · 0 评论 -
vue框架Vant--Tab选项卡悬停头部
template模块代码<template> <div> <div> <div ref="getheight" style="height:50px;background:#f00">固定栏</div> <van-tabs @click="onClick" :st...原创 2020-02-20 15:23:12 · 5408 阅读 · 0 评论 -
vue 关于样式类动态绑定(推荐方法二)
方法一:通过 :class="+item.no <= 3 ? ‘top-no’ : ‘’"三木运算添加样式类<div class="list-item" v-for="item in rankData" :key="item.no"> <div classs="list-item-no" :class="+item.no <= 3 ? 'top-no' : ''">{{item.no}}</div></div>推荐写法方法二:通过数组原创 2020-07-30 21:46:06 · 155 阅读 · 0 评论 -
vue项目三种方式刷新当前页面(重载当前页面数据)
一、this.$router.go(0)相当于F5刷新,这种方法虽然代码很少,只有一行,但是体验很差。页面会一瞬间的白屏,体验不是很好二、location.reload()这种也是一样,画面一闪,体验不是很好,相当于页面刷新推荐解决方法:三、用provide / inject 组合原理:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效在App.vue,声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载。&转载 2020-06-23 15:00:04 · 3278 阅读 · 1 评论 -
自定义v-model事件
父组件<template> <div class="home"> <p>{{name}}</p> <v-model v-model="name"></v-model> </div></template><script>import vModel from '@/components/HelloWorld'export default { name: 'home',原创 2020-09-08 19:49:10 · 3156 阅读 · 0 评论