Vue.js
汉武大帝·
我是攻城狮
展开
-
vue 弹窗显示时,底部页面不能滚动,弹窗隐藏时,底部弹窗可以滚动
vue 弹窗显示时,底部页面不能滚动,弹窗隐藏时,底部弹窗可以滚动原创 2023-03-03 11:38:41 · 521 阅读 · 0 评论 -
vue项目中:页面退出登录后,浏览器其他页面激活时随之刷新
vue项目中:页面退出登录后,浏览器其他页面激活时随之刷新原创 2023-03-02 10:49:03 · 529 阅读 · 0 评论 -
vue路由跳转到浏览器新页面的方式
vue路由跳转到浏览器新页面的方式原创 2023-03-01 14:22:58 · 516 阅读 · 0 评论 -
vue页面中使用防抖函数,节流函数
vue页面中使用防抖函数原创 2023-02-28 10:53:12 · 221 阅读 · 0 评论 -
vue中导出文件
vue中导出文件原创 2021-09-10 14:09:32 · 97 阅读 · 0 评论 -
使用swiper.js封装一个左右滑动,按钮可点击的tab, (每个tab宽度不同,PC端)
使用swiper.js封装一个左右滑动,按钮可点击的tab, (PC端)原创 2023-02-13 12:15:01 · 566 阅读 · 0 评论 -
vue项目页面设置水印,使用MutationObservers防止从控制台改变样式
vue项目页面设置水印,使用MutationObservers防止从控制台改变样式原创 2022-12-05 14:15:46 · 706 阅读 · 0 评论 -
vue项目双滑块组件
vue项目双滑块组件原创 2022-11-24 16:11:03 · 1708 阅读 · 0 评论 -
vue项目启动卡住,也不报错的原因
vue项目启动卡住,也不报错的原因原创 2022-09-06 14:35:30 · 4044 阅读 · 0 评论 -
vue项目中使用阿里巴巴矢量图标库中的 Lottie库
vue项目中使用lottie原创 2022-07-29 16:05:18 · 1485 阅读 · 4 评论 -
vue2实现传送门效果
vue2实现传送门效果原创 2022-07-13 11:42:10 · 2378 阅读 · 0 评论 -
Error in nextTick: “RangeError: Maximum call stack size exceeded“
Error in nextTick: “RangeError: Maximum call stack size exceeded“原创 2022-07-07 13:43:54 · 193 阅读 · 0 评论 -
vuedraggable拖拽组件
vuedraggable拖拽组件原创 2022-04-14 12:04:28 · 954 阅读 · 0 评论 -
vue.js中props的参数
参数有 type,default, required,validator,Vue.component('my-component', { props: { // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证) propA: Number, // 多个可能的类型 propB: [String, Number], // 必填的字符串 propC: { type: String, required:原创 2022-03-23 11:06:04 · 1758 阅读 · 0 评论 -
vue中的插件
vue插件总结——总有你能用上的插件 - 柠檬杨 - 博客园原创 2022-01-28 16:51:01 · 703 阅读 · 0 评论 -
页面输入框输入数据后,页面出现自动回到顶部的问题(已解决)
问题再现效果:问题描述:当前页面是一个带有滚动条的页面,表格是使用elementUI中的表格el-table组件封装的,页面输入框输入数据后,页面自动回到了顶部,确实难受;问题原因:表格中数据是可以更改的,之前是直接用 this.tableData[index].classTime = 10; 改变的数组数据,数据是改变了,但是页面没有重新渲染,为了达到渲染效果在封装的表格组件上加了一个属性 :key="Math.random()" , 这样倒是页面重新渲染了,但也导致了页面自动回到顶部...原创 2021-12-03 11:28:52 · 2341 阅读 · 3 评论 -
vue页面监听路由变化
// 监听,当路由发生变化的时候执行watch:{ $route(to,from){ console.log(to.path); // // 这种可能拿不到this, }},或者// 监听,当路由发生变化的时候执行watch: { $route: { handler: function(val, oldVal){ console.log(val); // 这种可能拿不到this }, // 深度观察监听 deep: true .原创 2021-07-21 14:10:37 · 695 阅读 · 0 评论 -
vue项目中使用swiper.js做一个轮播图
先看效果:安装swiper时,指定版本号5.4.5;否则分页器可能不显示:npm install swiper@5.4.5在main.js文件中添加;import'swiper/css/swiper.min.css'<template> <div> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="sw.原创 2021-04-13 13:10:54 · 520 阅读 · 0 评论 -
在vscode中新建用户代码片段
{ "Print to console": { "prefix": "vue", "body": [ "<template>", "<div>", "", "</div>", "</template>", "<script>", "export default {", "data() {", " return {", "", " };".原创 2021-01-16 17:28:42 · 385 阅读 · 0 评论 -
Vue-cli脚手架2.0和3.0创建项目的区别,以及4.0的使用
一、生成项目命令1、安装3.x版本的Vue脚手架:npm install -g @vue/cli创建Vue项目命令:vue create 项目名称或基于ui界面创建Vue项目,命令:vue ui2、安装了vue-cli 3.x 后如何使用 vue-cli 2.x 创建项目需要安装一个桥接工具才能使用 vue-cli 2.x创建项目npm install -g @vue/cli-init创建Vue项目:vue init webpack 项目名称二、目录的..原创 2021-01-12 10:51:24 · 2826 阅读 · 0 评论 -
vue-cli2/3/4的区别
1、安装、卸载vue-cli2:全局安装:npm install -g vue-cli 或 cnpm install -g vue-cli卸载:npm uninstall -g vue-cli 或 cnpm uninstall -g vue-cli1 2vue-cli3:全局安装:npm install -g @vue/cli@版本号 或 cnpm install -g @vue/cli@版本号卸载:npm uninstall -g @vue/cli@版本号 或 cnpm un原创 2021-01-12 10:50:57 · 778 阅读 · 0 评论 -
使用vue-cli2.x创建项目
创建项目语句:vue init webpack my-project // my-project 项目名字然后进入文件夹 : cd my-threejs ,运行项目: npm run dev原创 2021-01-12 09:22:56 · 222 阅读 · 0 评论 -
vue调试工具vue-devtools安装及使用
安装:1.到github下载:(下载一定要记得是master环境的代码,默认克隆后进入的是dev环境,执行npm run build会报错,执行git checkout master切换到master分支)git clone https://github.com/vuejs/vue-devtools2.在vue-devtools目录下安装依赖包 1 2 cd vue-devtools npm install 3.依赖包下载完后执行n.原创 2021-01-10 13:48:43 · 288 阅读 · 0 评论 -
vue中的混入 mixin
混入是一种非常灵活的方式,来分发vue组件中可复用的功能,一个混入对象可以包含任意组件选项,当组件使用混入对象时,所有的混入对象的选项将被‘混合’ 进入该组件本身的选项;定义混入对象时,我习惯将混入对象单独写入一个js文件中,然后导出,在哪个组件中使用的话再引入;例如新建文件mixin.js :; 文件内容如下,该文件是导出了一个对象:export default({ created(){ console.log('我是混合对象里面的created'); .原创 2020-10-24 17:32:50 · 94 阅读 · 0 评论 -
vue基础组件的自动化全局注册
dd原创 2020-10-22 22:06:05 · 314 阅读 · 0 评论 -
vue中动态组件
ww原创 2020-10-22 21:43:08 · 172 阅读 · 0 评论 -
vue中组件的注册方式
ss原创 2020-10-22 18:00:01 · 565 阅读 · 0 评论 -
vue中表单输入绑定的修饰符
表单输入修饰符:1, .lazy 该修饰符将输入框的值和数据的同步时机由 在input事件时 转为 change 事件之后; input事件 和 change 事件的区别:https://blog.csdn.net/yinge0508/article/details/109226879<input v-model.lazy="msg">2, .number 该修饰符可以将用户的输入值转为数值类型(备注:如果输入的值无法被parseFloat()解析,会返回原始值...原创 2020-10-22 17:46:25 · 232 阅读 · 0 评论 -
vue中v-if 和 v-show 的区别
v-if 是 ‘真正’ 的条件渲染,因为他会确保在切换过程中 条件块内的事件监听器和子组件 适当的被销毁和重建;v-if 也是惰性的,如果在初始化渲染时条件为假,则什么也不做,直到条件第一次变为真时,才开始渲染条件块;v-show ,不管初始化条件是什么,元素总会被渲染,并且只是简单的基于css进行切换;一搬来说,v-if 具有更高的切换开销,v-show 具有更高的初始化渲染开销,所以,如果需要频繁的切换的话,使用v-show更好;如果是很少改变,使用v-if 更好;v-if 和 v-for.原创 2020-10-21 17:52:46 · 243 阅读 · 0 评论 -
vue中使用router打开一个新的窗口
let routeData = this.$router.resolve({name: "housingDetails",query: {id:id,domain:this.domain},params:{id:id,domain:this.domain}});window.open(routeData.href, '_blank');或者使用:<router-link target="_blank" :to="{path:'/home',query:{id:'1'}}">新页面原创 2020-07-24 13:40:57 · 881 阅读 · 0 评论 -
Vue 项目中 axios 的封装和API接口的管理
一、axios的封装在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。他有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。安装npm install axios; // 安装axios复制代码引入一般我会在项目的src目录中,新建一个request文件夹,然后在里面新建一个http.js和一个api.js文件。http.js文件用来封装我们的axios,api.原创 2020-07-06 10:21:38 · 272 阅读 · 1 评论 -
vue-countTo---简单好用的一个数字滚动插件
vue-countTo是一个无依赖,轻量级的vue组件,可以自行覆盖easingFn。你可以设置startVal和endVal,它会自动判断计数或倒计时。支持vue-ssr。vue-countTo参考于countUp.js;安装使用:npm install vue-count-to<template> <countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo&...原创 2020-07-01 17:59:56 · 847 阅读 · 0 评论 -
Vue项目中出现 “Error in mounted hook: TypeError: handler.call is not a function”
出现该错误的原因可能是 在页面中写了一些生命周期函数,而生命周期函数里面什么都没有;没有使用的生命周期函数直接删掉;原创 2020-06-05 19:24:24 · 4684 阅读 · 0 评论 -
vue项目中使用vue-cropper实现裁剪、上传到oss接口
效果图:实现步骤:1,项目中添加vue-cropper插件 :npm install vue-cropper --save 或者 yarn add vue-cropper --save2,在main.js中引入一下:importVueCropperfrom'vue-cropper'Vue.use(VueCropper)3,.vue文件内容:<template> <div style="width:1200px;margin:12px aut...原创 2020-05-09 11:11:26 · 753 阅读 · 0 评论 -
vue中的深度监听(监听一个对象的全部属性、监听一个对象的一个属性)
<div> <p>obj.a: {{obj.a}}</p> <p>obj.a: <input type="text" v-model="obj.a"></p></div>new Vue({ el: '#root', data: { obj: { a: 12...原创 2020-04-28 17:09:18 · 3373 阅读 · 0 评论 -
vue项目中使用js实现页面缓慢回到顶部
执行方法: scrollAnimation(currentY, targetY) { // 获取当前位置方法 // 计算需要移动的距离 let needScrollTop = targetY - currentY let _currentY = currentY setTimeout(() => { //...原创 2020-04-26 14:46:19 · 829 阅读 · 0 评论 -
vue项目中使用ant-design-vue中a-tabel组件
1,首先安装ant-design-vue:yarn add ant-design-vue2,在main.js中引入:importAntdfrom'ant-design-vue'import'ant-design-vue/dist/antd.css'Vue.use(Antd)3,App.vue页面<template> <div id="app"...原创 2020-03-12 18:14:12 · 3247 阅读 · 0 评论 -
切换路由时添加切换效果,使用label重写单选按钮
先看效果图:红色按钮是用label重写的 单选按钮;切换路由时有移动效果的代码:<template> <div id="app"> <transition> // Vue 提供了 transition 的封装组件 <router-view/> </transition> ...原创 2020-01-13 14:42:02 · 288 阅读 · 0 评论 -
VUE中的粒子特效,点和线连接,类似星座,vue-particles
先看效果图:使用方式:npm install vue-particles --save-dev main.js中加入import VueParticles from 'vue-particles' Vue.use(VueParticles) 在某个.vue文件中 <vue-particles color="#1256e6" :p...原创 2019-12-26 17:02:23 · 528 阅读 · 0 评论 -
VUE插件大总结
UI组件element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 mint-ui- Vue 2的移动UI元素 iview- 基于 Vuejs 的开源 UI 组件库 Keen-UI- 轻量级的基本UI组件合集 vue-material- 通过Vue Material和Vue 2建立精美的app应用 muse-ui- 三端样式...原创 2019-12-26 16:17:24 · 229 阅读 · 0 评论