2 神奇大叔

尚未进行身份认证

暂无相关简介

等级
TA的排名 8k+

底部购物车(美团外卖效果)

1、实现列表数据和底部购物车数据共享: (1)vuex的state添加一个属性,用来存储购物车列表的数据,购物车列表的每一项都是商品对象 (2)当点击增加按钮时,往当前商品对象中添加count数据: 利用vuex,当点击增加/减少按钮时,将当前物品对象中添加一个count属性, 因为是对象的引用关系,如果vuex之前的state状态中已经存在商品列表的数据,无需再添加额外的state状态, 当前对象改变属性(利用Vue.set,将对象的新属性交给vue来动态绑定数据),商品列

2020-05-30 22:33:39

上下展开元素(未知元素高度的情况)

.wave-enter,.wave-leave-to{ //刚进去和离开最后一刻,消失 transform:translateY(100%) //消失即向下位移自身高度 } .x-enter-to,.x-leave{ //进入的最后一刻和刚离开,高度最高 transform:translateY(0) //即元素原本高度 } .wave-enter-active,.wave-leave-active{ transition: tran...

2020-05-30 20:27:35

vuex 改变vuex管理的数据

当使用v-for遍历、props接收、{es6方式对象解构} vuex管理的数据时,即使是其内部的数据,只要改变,就会使得vuex管理的该数据改变

2020-05-30 15:40:23

vue 新属性数据绑定

在已经数据绑定的数据,添加新的属性后,该属性不会被数据绑定,即改变该数据,不会触发vue的渲染机制如给一个已经存在的对象添加新属性后,新属性更新不会引起界面更新解决方法: Vue.set(对象名,'属性',属性的值); 设置一次后,该属性就会被vue数据绑定代码示例: if(food.count) { food.count++; }else{ Vue.set(food,'count',1); //让对象新增的数据能够被vue数据绑定,动态

2020-05-30 15:37:22

列表滑动对应分类列表也变化(如微信联系人、商家餐品列表)

思路:要想左侧分类对应的标题样式和右侧内容滑动到标题对应内容时选中这里采用better-scroll来实现滚动在数据更新后,界面更新时($nextTick) 1、通过ref获取右侧每个列表块的高度(每个li) 2、实时获取当前滚动条的y坐标 3、利用计算属性(数据变化就会执行)返回当前y坐标应该对应的index 如li高度为100,200,300,当y为220时,应返回坐标1 4、将index和左侧列表的index对比选中样式代码示例:<template> //左侧分

2020-05-29 23:14:04

better-scroll组件生成滑动条(移动端、pc端)

1、安装 cnpm install better-scroll --save2、引入 import BScroll from 'better-scroll' 3、使用 (1)找到父元素,可通过类名选择器选则,则父元素下的第一个子元素会滚动 其中:1、只对第一个子元素有效,注意v-for生成的元素,应该外面再包裹一层,否则只生效第一次遍历的元素 2、该组件效果能显示滑动,要添加滚动条还得样式中,overflow:auto; (2)必须等到数据加载后,界面更新时使用 let

2020-05-29 21:03:35

vue 异步数据加载报错但页面完好问题

异步数据: 先加载初始数据,之后再补充数据,比如如果异步数据是个对象,将先加载空对象,之后再加载里面的数据,此时页面就会报错,但页面能够加载解决方法: 使用v-if等已有数据的时候,再创建组件,不能使用v-show,因为v-show虽然隐藏但还是会加载,依旧会报错...

2020-05-28 15:56:56

保存登录信息到vuex、保持登录状态、退出登录、一些表单验证

自动登录:第一次登录成功后,后台设置具有时间的session,记录用户已登录且能确定用户的标识存进session,下次打开应用时利用vuex状态管理后,在App.vue生命周期中先发送请求到后台,后台先读取session是否存在,若存在根据标识去数据库读取用户数据,实现自动登录。...

2020-05-27 22:24:36

自定义弹框

基于vue,传入tips的值,即可自定义弹框文本内容<template> <div class='alert'> <div class='a_container' > <img src="./imgs/1.png" alt=""> <p>{{tip}}</p> <button @click='closeTip'>确认</button>

2020-05-27 09:59:26

登录(实时验证手机格式、验证码)

思路:动态验证手机号格式: 利用计算属性会根据内容的变化而调用的特点,将表单绑定v-model,在 计算属性中,利用正则不断检验手机格式,正确返回true 验证码: 当手机号格式正确时,点击才有效,利用时间制造三元运算符改变验证码的文本内容,且倒计时期间,再次点击无效代码示例:<template> <div class='login'> <p @click='$router.back()'><</p> <di

2020-05-26 22:16:19

vuex 应用模板

actions.js中的请求数据方法,越早调用越好,比如在App.vue中的生命周期函数中调用1、安装cnpm install vuex --save2、src下创建store文件夹,在store文件夹下创建index.js3、将主入口index.js文件挂载到vue实例,在main.js中import store from './store'new Vue({ el: '#app', router, store, components: { App }, templat

2020-05-26 17:53:39

根据评分显示星星个数(全星、半星、空星)

思路:将评分转换成数组,根据数组1,0.5,0来判断显示什么内容 let arr=[]; let m=Math.floor(this.score); //整数部分 let n=this.score-m; //小数部分 方式一: for(let i=0;i<m;i++) //全星 { arr.push(1); } if(n>=0.5) //最多出现一个半星 { arr.pus...

2020-05-26 17:30:18

vue watch+$nextTick界面更新渲染数据

$nextTick,在数据修改后,界面更新时立即调用回调的内容watch,监测数据改变,数据改变后此时数据更新,但界面未更新wathc+$nextTick,实现数据更新后,界面更新时重新渲染数据watch:{ xx(value){ this.$nextTick(()=>{ 进行诸如拿到数据再创建实例等操作 }) }}...

2020-05-26 15:37:08

将一维数组转换成二维数组

按最多8个数据来创建二维数组 categoryArr() { let categorys=this.categorys; let arr=[]; let minarr=[]; categorys.forEach((item,index)=>{ if(minarr.length===8) { minarr=[]; } if(minarr.length===0

2020-05-26 11:33:59

es6 常量加大括号语法

声明常量后[]使用,会先将[]内的常量解析场景:当需要常量来做 如: const type='xx'; { [type](){} 等同于 xx(){} }

2020-05-25 19:58:20

vue 使用vant库

1、引入 cnpm i vant -S cnpm i babel-plugin-import -D 2、配置按需加载 在.babelrc文件中,"plugins"数组内添加如下元素 ["import", { "libraryName": "vant", "libraryDirectory": "es", "style": true }] 3、使用看文档文档...

2020-05-24 21:06:37

vue 导航栏组件

bug:因为通过router-link跳转,所以只能点击文字跳转,将router-link换成其他标签,然后设置跳转事件能改变这一bug因为非引入static内的图片,得用require引入效果:代码示例:<template> <div class='foot'> <div class='nav'> <img :src="$route.path=='/home'?require('../../assets/tabs/1.png

2020-05-24 17:01:25

vue 动态绑定img的src属性,图片失效

静态绑定都不失效动态绑定src时:1、放置在static文件夹内的图片,可直接动态绑定不失效2、放置在其他文件夹的图片,动态绑定src时需要require引入 :src=require('图片路径')代码示例:<template> <div class='foot'> <div class='nav' @click='change'> <img :src="$route.path=='/home'?require('../..

2020-05-24 16:52:00

vue 系统信息

(1)获取url的/路径 $route.path

2020-05-24 15:08:54

vue 引入fastclick解决移动端300毫秒延迟

解决移动端点击有300毫秒的延迟(本意为设置300毫秒延迟判断用户双击),立即响应1、安装 cnpm install --save fastclick 2、在main.js中配置 import FastClick from 'fastclick' FastClick.attach(document.body);代码示例:// The Vue build version to load with the `import` command// (runtime-only or s

2020-05-24 14:42:58

查看更多

勋章 我的勋章
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 勤写标兵Lv4
    勤写标兵Lv4
    授予每个自然周发布9篇以上(包括9篇)原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。