vue的一些使用技巧
关注
分享
扫一扫
小皮皮不皮
记录自己工作中遇到的一些问题，和经常会用到的一些东西，方便以后使用。
展开
-
点击菜单内容显示对应区域，滚动菜单也变化
以前写过一个案例，终于用到了项目中，这个是升级版考虑了点击的时候内容要显示对应的区域，内容区域滚动的时候菜单也会随着变化<template> <div class="box"> <div class="menu"> <ul> <li v-for="(item, index) in list" :key="index" :class="{ ac原创 2023-04-22 17:18:58 · 463 阅读 · 0 评论 -
vue 生命周期里面的方法只走一次怎么办？
vue生命周期里原创 2023-03-16 17:44:47 · 615 阅读 · 0 评论 -
使用element-ui 表格有一些特殊的表格
element单元格合并原创 2018-11-08 15:59:07 · 2303 阅读 · 1 评论 -
针对element表格
表格点击单元格同级的单元格也选中原创 2023-03-06 17:36:49 · 185 阅读 · 0 评论 -
vue2 启动如何配置本机ip地址
vue2 启动如何配置本机ip地址原创 2022-11-11 09:06:17 · 3687 阅读 · 0 评论 -
项目换肤具体流程
项目实现自定义换肤原创 2022-09-29 16:53:58 · 297 阅读 · 0 评论 -
vue 自定义组件npm上传
第四步npmaddcddp-ui/npmupdatecddp-ui下载或更新自己创建得组件库cddp-ui。第三步npmpublish发布到自己得npm账户。第二步npmlogin登录自己的npm账户。第一步创建自己的npm账户。原创 2022-07-28 10:38:01 · 305 阅读 · 0 评论 -
vue中有些时候需要存cookie然后改变了要监听
main.js// 自定义监听sessionStorage的方法Vue.prototype.$addStorageEvent = function (type, key, data) { if (type === 'setItem') { //type为setItem时执行下面的方法 // 创建一个StorageEvent事件 var newStorageEvent = document.createEvent('StorageEvent'); const stor.原创 2022-03-21 15:30:00 · 3936 阅读 · 0 评论 -
系统头部日期时间和星期
//判断是否在前面加0 getNow(s) { return s < 10 ? "0" + s : s; }, headerTimeFn() { let myDate = new Date(); let year = myDate.getFullYear(); //获取当前年 let month = myDate.getMonth() + 1; //获取当前月 let date = myDate.getDate(..原创 2022-02-23 15:29:46 · 757 阅读 · 0 评论 -
vue echart写法组件案例
<template> <div class="chartPart" style="width: 100%; height: 100%"></div></template><script>import echarts from "echarts";export default { props: ["chartData"], watch: { chartData: { deep: true, h.原创 2021-09-26 14:19:35 · 223 阅读 · 0 评论 -
vue3使用数字滚动vue-count-to
发现vue3中使用这个插件根本不行，找了好久终于找到了一个解决办法，那就是不用安装的方式来使用他，而是把它的代码拷贝下来放到我们的公共组件中引入使用，（哈哈这个方法好笨，但是是我目前找到的唯一解决办法，项目不等人能用就赶紧开发，有好的办法我们在更新也希望对大家看到有好的方法评论留言告诉我，谢谢）公共组件中把他的代码放进去使用的时候 正常引入使用就好了...原创 2021-09-26 11:01:03 · 1216 阅读 · 3 评论 -
vue3 组件之间传值
有时候两个组件之间并非子父组件可能是父辈组件像孙辈组件传值（不知道怎么说能懂就好了）又该怎么传呢？由于想使用vue2中的watch 监听来实现但是没有找到案例和方法，开发时间短没有过多的去尝试，还是多使用vue3的更容易对新的技术有所了解所以使用了新的语法provide 和inject使用的时候最好使用快捷键每次不管定义变量还是使用vue的方法都需要申明，所以我们为了开发快捷直接快捷键传值的组件：这个案例是我在父页面需要点击操作了子页面对应的显示隐藏，为什么我不直接把prov...原创 2021-09-26 10:55:34 · 618 阅读 · 0 评论 -
vue3 子父组件传值
steup(prope,{emit})关于 子组件调用父组件的方法 emit 图片已经说明了（想要使用 emit steup里面参数必须写我图片中完整的不然也不生效）父组件绑定定义方法就好了，props: 是父组件传给子组件的值，要想在steup 中来使用必须写参数否则不生效，使用的时候props.变量名...原创 2021-09-26 10:45:40 · 187 阅读 · 0 评论 -
vue3.0 steup 格式
定义变量可以使用ref 和 reactiveref：一般用于定于简单的字符类型或者布尔类型 （修改变量必须变量后面加 .value）reactive： 一般用于定义数组，对象，不管是方法还是变量要在html 使用必须return 返回steup 中因为方法也在里面所以要注意return放在最后面...原创 2021-09-26 10:32:58 · 176 阅读 · 0 评论 -
vue 实现从下往上无缝滚动
<template><divclass="heaerBody"><divclass="seamless-warp"><ul:class="{item:true,animationRolls:animatedLock}"@mouseout="autoScroll()"@mouseover="clearScroll()"&...原创 2021-08-23 09:38:27 · 1503 阅读 · 0 评论 -
vue 实现简单的内容很多，画上去滚动显示内容，移开内容停止
在原作者的基础上稍加改动，感觉更适用于有些内容太多只展示一行，但是又需要滑到元素区域内容开始滚动展示！ 原创地址：https://blog.youkuaiyun.com/dkm123456/article/details/110954507?spm=1001.2014.3001.5501<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <me..原创 2021-04-13 16:11:09 · 270 阅读 · 0 评论 -
vue 展开收起（高度不固定，还要有平滑的过渡效果）
找了好多案例都不是很顺滑，最终还是功夫不负有心人，找到了一个非常棒的案例，只是简单地尝试一下，以后使用可以在进行全面的封装来公共使用<template> <div class="panel"> <!-- body --> <transition name="panel-fade" @enter="enter" @before-leave="beforeLeave" @leave="leave"> <div cla..原创 2021-02-04 16:12:41 · 7101 阅读 · 3 评论 -
数字滚动
将数字滚动单独封装成一个组件（如果项目中有规定的数字四个 0010 那么传入字符串 ‘0010’就可以了）<template> <div class="chartNum"> <div class="box-item"> <li :class="{'number-item': !isNaN(item), 'mark-item': isNaN(item) }" v-for="(item,index) ...原创 2021-01-05 14:58:08 · 325 阅读 · 0 评论 -
vue中最近常用的一些组件以及一次echart常用的一些案例
countTo importcountTofrom'vue-count-to'; 数字滚动dataV 一个使用vue来做自适应的组件库，有着很漂亮的样式和一些现成的组件，非常不错原创 2021-01-05 14:48:56 · 627 阅读 · 4 评论 -
一句css实现简单的动画效果
当我们在做项目有时候会遇到写特殊的动画效果，或者简单的动画效果，如何快速的写一个效果呢，有时候不经常写都会忘了怎么来写，或者在vue中如何来实现动画？下面就是一个简单的列子首页我们在需要有动画的类名上写这么一句css: transition: all 0.8sease; （0.8s如果太快或者太慢视情况可做修改）然后需要有什么效果重新定义一个名字来进行修改有效果后的样子，通过切换类名来控制是否一致显示效果；来一个简单的列子：...原创 2021-01-05 14:34:36 · 229 阅读 · 0 评论 -
vue 中swiper分页或者滑动失效的问题
在vue中使用swiper正常情况下没有问题，但是当我们请求数据时间比较长，然后请求后在加载swiper就会发现滑动失效，或者需要展示的分页有问题，解决如下<template> <div class="main bg trafficJam"> <div class="swiper-container personListMain"> <div class="swiper-wrapper"> <div cla.原创 2020-09-11 15:56:17 · 1832 阅读 · 0 评论 -
vue 循环数据进行操作改变对象得值，但是视图没有发生变化？
很多时候我们vue中，for循环的数据很复杂，当我们要进行操作改变数组中的某个值时，视图中的展示却没有发生相应的变化，怎么办呢？找了很多方法，官网也有介绍，但是都不是我的理想中的处理方法最后还是解决了 来看代码如果是数组this.form = Object.assign([], this.form)如果是对象this.form = Object.assign({}, t...原创 2020-03-18 22:49:10 · 1835 阅读 · 2 评论 -
vue 路由的配置和使用——1.1
1.0说了路由的配置，然后接着说如何在index.vue中配置监听路由； 我们现在watch方法中来监听路由的变化watch: {//监听路由变化$route(to, from) { //监听到时候执行你的方法this.autoMove(); //我的这个方法是去请求ajax，获取用户的信息，如果没有获取到用户的信息说明他没有登录或者登录超时了，那么提醒他去登录，...原创 2018-11-09 10:45:19 · 146 阅读 · 0 评论 -
vue 路由的配置和使用——1.2
路由的配置差不多就说这么多，毕竟我也不是特别的精通，只是将一些工作中的心得或者是别人教我的方法拿来跟大家分享一下，希望大家多多鼓励，。鼓掌，，，哈哈！！！这次来给大家说说路由的使用，原先学习的时候要跳转路由需要干些什么，让我先回忆回忆我快忘了，原先学习的：定义一个标签 <router-link to="/welcome"> </router-link>将路...原创 2018-11-09 11:42:30 · 318 阅读 · 1 评论 -
vue 没办法使用转译的情况下如何操作——1.3
我在项目遇到这么一个问题当我们从后台获取到的内容是带标签的例如:<p>大家好</p><span>我是后台传过来的数据</span>需要我们放到页面中显示,通常都是 <div v-html="放置后台获取到的内容"> </div>当时当我们要将内容放到input 或者<textarea&g原创 2018-12-07 14:55:30 · 336 阅读 · 0 评论 -
vue 子父组件之间的传值----1.0
先说一说最简单,用得最多的1.父组件进行传值,子组件进行接收父组件: <udit style="margin-left:80px" :defaultMsg="defaultMsg"></udit>子组件:props: { defaultMsg: { //父组件转过来的值 type: String }, confi...原创 2018-12-25 15:40:05 · 209 阅读 · 0 评论 -
vue 子父组件传值----1.1
当我们遇上一些特殊的子父组件的时候该怎么传值呢? 比如说:我的子组件里面是一个插件是需要初始化,或者我操作了需要删除操作的内容再次操作的时候是初始状态,或者点进来后我要显示后台返回的数据了,等等,各种问题使我们的操作最简单的那些无法满足需求,教大家一个方便的方法,可以很方便的使用.首先我们父组件的内容: <udit style="margin-left:80px" :default...原创 2018-12-25 15:57:56 · 162 阅读 · 0 评论 -
vue 实现简单的tab切换
<template> <div> <ul class="tab"> <li v-for="(item,index) in review" :key="index" :id="item.id" :class="{'sever':titletStyle原创 2019-01-17 14:18:34 · 727 阅读 · 0 评论 -
vue 动态添加类名获取数组中的内容并且需要点击的选中样式类名，
最近在项目中遇到一个问题，一个选择需要一个固定的类名提供公共样式，一个类名来判定显示 那个颜色的，另一个类名判定是否是选中状态，思考了很久，网上找了很久，终于让我写了出来，一起看代码吧！！！！<template> <div style="margin-top: 30px;" class="newAddPop controlFuzzy"> &...原创 2019-08-03 11:09:49 · 2497 阅读 · 1 评论 -
vue 路由的配置和使用——1.0
先来说说功能然后在说路由的配置，先大概清楚了项目的流程，然后在配置路由会让你后面的工作更加顺利，头脑更加清晰！比如说我的项目中一般都是需要登录的，最关键的是用户不操作页面一定时间后系统会默认用户退出，这时候在获取用户信息就是未登录的，还有就是有一些公共的地方，只是某一部分需要切换。来上代码： （说明在代码下面）export default new Router({ rou...原创 2018-11-09 10:40:17 · 248 阅读 · 0 评论