vue
文章平均质量分 65
前端阿龙
希望做好身边的小事
展开
-
vue组件库初探
背景因为业务是基于element组件的基础上重复封装,所以想要封装个基于elementui的基础上的业务组件库来解放劳动力StoryBook 为一种较为成熟的解决方案,所以下文就是通过storyBook来进行编写的安装storybook的安装分为自动和手动安装,以下是根据自动安装来进行自动安装npx -p @storybook/cli sb init --type vueyarn add vueyarn add vue-loader vue-template-compiler --原创 2022-03-13 16:30:34 · 1793 阅读 · 2 评论 -
vue源码 - 数据响应式原理 - 总结
各种进阶资源 + 联系方式请看下方链接。原创 2022-02-13 13:16:01 · 210 阅读 · 0 评论 -
vue中不确定高度情况下设置展开收起动画
前言基本上之前没有怎么使用过vue,所以当写一个展开收起动画的时候看了文档感觉还是挺简单的,然后手撸之后并没有达到预期的动画效果,查了下才知道是div没有定高的原因,但是我div内的内容是不确定高度的,随后又尝试了使用js动态获取高度,感觉有点麻烦,但是本来想将就着用,后来看到了某个大佬写的一个解决此类问题的一个通用的js文件,解决了问题,在此分享下。首先把下面的代码单独放在一个js文件中再啰嗦一句:拷贝前人写的代码的时候,自己也要看下别人是怎么实现的const transitionStyle =原创 2021-10-29 10:59:19 · 2231 阅读 · 1 评论 -
vue概略
vuevue自定义事件vue自定义事件可以通过创建一个文件 event 里面new一个vue的实例 然后 通过两个随便是什么组件(兄弟 或者隔的比较远)的mounted中调用 一个调用on 然后传递一个函数 但是要在 beforeDestroy生命周期中销毁这个绑定 要不然容易造成内存泄漏 在另一个组件中的mothod的方法中使用emit调用父子组件生命周期顺序cerated vue...原创 2020-03-21 20:30:18 · 327 阅读 · 1 评论 -
Vue中引入插件 修改插件样式问题
vue中引入插件 一般是在父组件标签下 使用 >>> 子插件标签 但是如果在vue中使用了scss这类的css编译模式 就得使用 父组件标签 /deep/ 子插件标签这样的形式了...原创 2018-12-25 09:15:26 · 2027 阅读 · 0 评论 -
MVVM 和 VUE
MVVM是一个设计模式如何理解MVVMJquery和使用框架的区别 通过jQuery实现点击按钮 添加todo-list 页面上设置 一个input 一个button 一个ul 然后在jQuery中获得输入框的val 把val 给新建的li标签里面 当点击按钮时ul append li 并清空input 这样就可以实现点击添加list Vue实现todo-list 给input绑定一...原创 2018-12-23 21:48:08 · 986 阅读 · 0 评论 -
vue登录逻辑
1.实现超过一定时间就需重新登录的登录的逻辑首先点击登录按钮获取token给一个函数 这个函数里面的逻辑是获取到token 把它存起来存到localstorage里面同时获取当前事件戳并转化成秒数然后存起来 并在逻辑中判断如果token=null的时候设置token 再存一遍 在别的函数中判断超过一天 return 0 在第三个函数中判断如果第二个函数为0 就removetoken 删除loca...原创 2018-12-12 11:09:00 · 2629 阅读 · 0 评论 -
vue页面中接收到后台传递过来的一个from表单的字符串转化为页面
支付宝H5支付,基本流程就是在前台使用服务器提供的接口创建订单,服务器根据支付宝提供的SDK,进行签名等一系列操作,具体可以参见支付宝的官方文档https://docs.open.alipay.com/203,当服务器完成这些操作后会会返回一个form表单,前台拿到后家在这个form表单就可以了。让我最困扰最耽误时间的就是在使用返回的form数据基本形式:....在vue中使用form的...转载 2018-12-20 11:34:25 · 5559 阅读 · 2 评论 -
vue界面发送表情实现
完全照搬不一定能写出来 只是让看个思想<template> <section class="dialogue-section clearfix" > <div class="row clearfix" v-for=&原创 2018-12-12 18:22:24 · 6698 阅读 · 0 评论 -
vue之树状递归组件
//此处是父组件 父组件就是一个div 刚开始的时候在created中获取根节点并渲染出来 根节点如果有子集 子集要有不同的id 然后根据递归组件点击传id过去发请求<template> <div> <tree :model="treeData&a原创 2018-12-12 17:56:45 · 1113 阅读 · 0 评论 -
vue模式下h5调用支付宝支付
1.vue模式下直接跳转支付宝APP支付main.js里面全局设置function plusReady() { checkUpdate() // 设置一个全局plusready状态 store.state.isplusReady = true store.state.storageEngine = plus.storage plus.screen...原创 2019-01-07 10:06:20 · 13801 阅读 · 6 评论 -
vue中使用 soket.io建立小型聊天室
1.首先在vue脚手架里下载soketio的依赖npm install vue-socket.io --savenpm install socket.io-client --save2.在 main.js里面引用Vue.use(new VueSicketio({ debug: true, connection: 'http://192.168.0.188:2...原创 2019-01-29 10:31:56 · 872 阅读 · 0 评论 -
vue中vant滑动单元格组件踩坑记录
移动端项目中用vant组件感觉还是不错的 但是今天在调用vant的滑动单元格组件实现类似于微信聊天列表的左滑删除功能时因为业务需求 还有自己的技术水平的缘故 常在河边走 哪有不湿鞋主要实现的功能就是 渲染出一个类似微信聊天列表的页面 这个页面可以上拉加载下拉刷新 然后这个页面的每个列表都可以左滑删除 同时每个列表还可以点击进入详情页 我就是实现了左滑出现删除按钮 但是随意再次点击列表应该是删除按...原创 2019-04-11 18:43:00 · 10108 阅读 · 7 评论 -
vue写微信公众号安卓手机子路由页面无法渲染问题
这个问题困扰我了很长时间 上网找答案 都没有对症的 关于这个问题 如果想要知道自己是什么原因 建议使用chrome浏览器下的手机模式 进入G5的那个手机模式进行调试 我的这个是webpack配置问题...原创 2019-04-15 21:49:59 · 389 阅读 · 0 评论 -
vue项目开发环境下实现与多个后台进行联调
在配置开发环境设置反向代理的地方设置反向代理 proxyTable: { '/jk': { target: 'http://10.200.101.121:8090/', //target: 'http://118.24.184.180:8080/', changeOrigin:...原创 2019-04-16 09:14:18 · 9545 阅读 · 2 评论 -
vue点击选中图片并以base64格式传向后台
input标签中的写法<input type='file' class="uploadphoto" @change="uploadphoto($event)" ref="inputer" multiple accept="image/png,image/jpeg,image/gif,image/jpg">函数中原创 2018-12-12 16:00:13 · 1545 阅读 · 0 评论 -
vue切换页面时让滚动轴置顶的兼容性写法
router.afterEach((to, from, next) => {切换页面时触发 window.scrollTo(0, 0) 这一行要不要都行 Vue.nextTick(() => { 这是dom渲染完执行 if (document.querySelector('.app-content') && document.qu...原创 2018-12-12 14:49:37 · 663 阅读 · 2 评论 -
vue项目过程中需要用到的知识
Vue项目开发前的准备首先下载node.js下载git打开码云 建项目 然后拉下来可以通过码云平台帮助文档来建立ssh公匙Vue-cli中的src文件中是项目中所有的源代码文件Vue的单文件组件和路由当一个文件以.Vue为后缀时被称为单文件组件组建的模板在template中组件的逻辑在script中组件的样式在style中路由就是根据地址不同返回内容不同Vue中...原创 2018-10-25 21:52:50 · 1667 阅读 · 0 评论 -
vue拉别人的项目到本地以及自己做项目可能遇到的问题
1.可能node的版本不合适 会报node的错误2.可能有依赖没有安装 会有提示安装某项依赖3.下载完Vue项目运行的时候 在package.json里面的scripts{里面写的什么就 npm run 什么}4.在Chrome浏览器中下载Vue插件地址https://www.cnblogs.com/momozjm/p/7098476.html5.拿到一个新的Vue项目后首先进入route...原创 2018-10-23 15:37:19 · 1165 阅读 · 0 评论 -
vue基础
1.Vue中的v-on:click可以简写为@click2.vue组件的定义可以写为Vue.component(‘item’,{template:’’})在上面的div中用就可以了2.Vue实例的生命周期钩子函数Vue的生命周期函数就是Vue实例在某一个时间点自动执行的函数得详细的看那张官网的生命周期图示生命周期中首先执行beforecrea()函数 然后是执行created()函数然...原创 2018-10-08 08:56:01 · 220 阅读 · 0 评论 -
vue---cli 构建
1.刚开始的时候 在 命令行输入 cnpm install -g vue-cli 然后会得到vue命令 可以用vue list 展示所有的模板 2. vue init 模板 目录 模板是使用什么模板 目录就是项目目录 如果有项目文件了 就不用写 例:vue init webpack demo 会创建一个demo文件夹 一路回车 但是到ESlint 要 no 最后会有三个选项 选最后一个 ...原创 2018-08-11 17:27:53 · 106 阅读 · 0 评论 -
关于路由的导航
1.导航: 声明式导航 to=“路由路径” 所谓 router-link就是声明式导航 :to = ” ‘topic/’ + xxx.id” 冒号后面的双引号相当于一个script执行环境 :to =” {path: ‘路径’, query : { key:value }} ” 相当于 to = ” /路径?key=value ” ...原创 2018-08-13 15:18:25 · 562 阅读 · 0 评论 -
路由全局守卫
首先 创建路由配置 const router = new VueRouter({…}) 然后注册一个全局的前置守卫 router.beforeEach((to,from,next)=>{..}) 每个守卫方法接受三个参数: to :Route : 即将要进入目标 路由对象 from:Route : 当前导航正要离开的路由 next:Function: 一下通过...原创 2018-08-13 16:01:44 · 2437 阅读 · 0 评论 -
vuex模块总结
vuex模块总结 模块化的写法 模块创建 new Vuex.Store({ modules:{ 模块名:{}} })分开写 const module = {} new Vuex.Store({ modules:{ 模块名:module } })每个模块中都可以写 state getters mutations actions...原创 2018-08-27 19:15:51 · 647 阅读 · 0 评论 -
vuex详情
vuex中的几个属性的示例以及解析 vuex - state 在这个示例中主要通过 const store 创建了一个新的new Vuex.Store实例然后放在了 app中 所以app中的computed就可以用this.$store来调用里面的东西 所以在div中就可以的到数据 state就是专门用来保存各组件的数据的 示例: “` {{msg}} ...原创 2018-08-27 19:16:40 · 196 阅读 · 0 评论 -
vue中实现上下滑动文字通告的功能
<template><div class="marquee"> <div class="marquee_title"> <span&原创 2018-10-23 18:36:27 · 8199 阅读 · 1 评论 -
vue-router和
1.在new Router里面 加上scrollBehavior(to,from,savedPosition){if(savedPosition){return savedPosition}else{return{x:0,y:0}}}以上是路由跳转页面时 当前页面滚动位置被记录下来调回来的时候还是这个位置如果当前没有滚动位置 那就 默认在 0 0 位置2.在配置路由的时候 一...原创 2018-10-30 07:06:12 · 116 阅读 · 0 评论 -
vue 循环每个列表配置倒计时
//首先在父组件中先计算好 然后传入子组件中 methods: { beginTimer() { this.ticker = setInterval(() =>{ for (let i=0, len=this.iconlist.length; i<len; i++) { ...原创 2018-11-22 13:38:58 · 5093 阅读 · 3 评论 -
Vue 3.0 配置
原文出自http://www.php.cn/js-tutorial-394518.html转载 2018-11-11 21:00:00 · 138 阅读 · 0 评论 -
vue组件内配置守卫阻止跳转对应的组件
注意 只能在配置路由对应的父组件路由上面定义 beforeRouteLeave(to, from, next) { if (to.name == "grapredparack") { //如果要跳转到 grapredparack 这个名字的路由组件上面的时候 如果是列表可以根据在上面循环设置的query.id获取到对应的id this.http.post("/api...原创 2018-11-08 14:35:36 · 1060 阅读 · 0 评论 -
vue之随机跑马灯组件
<template> <div class="allcontent"> <div class="headerimg"> <p class="imgresult">原创 2018-11-07 20:16:28 · 568 阅读 · 0 评论 -
vue组件之支付弹框
<template> <div class="progectile"> <span class="del" @click="h原创 2018-11-07 15:36:11 · 2075 阅读 · 0 评论 -
封装vue发送请求
import axios from 'axios'import { getToken } from '@/util/token'import qs from 'qs'import router from './router'import config from './config'import Vue from 'vue'console.log(config)// 创建axios实...原创 2018-11-02 14:12:31 · 399 阅读 · 0 评论 -
Vue 封装一个自己写的组件或方法
1.首先写好里面的模板及传递过来的参数2.定义一个index.js并引入刚创建的组件并export defaut(vue)=>{vue.component(组件名,组件)}3.在main.js里面引入 然后vue.use(引入的名称)Vue封装一个js引用Vue封装的js里面可以是个对象 也可以是方法export 和 export default的区别是 在一个页面中 expo...原创 2018-11-09 22:43:39 · 8388 阅读 · 0 评论 -
vue页面过度效果实现
首先在app.vue的标签外加上transition标签 给其设定 进入效果 离开效果<transition name="custom-classes-transition" :enter-active-class="enterAnimate" :leave-active-class="leaveAnimate"> <router-view/> </transiti...原创 2018-11-09 10:28:48 · 1375 阅读 · 0 评论 -
vue动画过渡效果实现
1.首先在父路由中添加transition标签 并给其添加动态的:name属性 然后用transition标签包裹router-view标签 然后在data中return出来动态:name 在style中写 name-enter,name-enter-to,name-enter-active的样式 分别代表刚进入 元素插入前生效的状态 和 在整个过渡效果的状态 和离开前一帧状态 但是如果没有...原创 2018-08-27 19:17:20 · 885 阅读 · 0 评论