07 2020 档案
摘要：some()、every()是用于判断数组的： 1.some() 不创建新数组、不改变原数组、判断为true则马上return true，否则return false； let arr = [1,2,3,4,5]; let result1 = arr.some((item)=> { return i
阅读全文
摘要：一，购物车的删除 1.封装请求删除购物车商品函数 //请求删除购物车商品 /api/cart/deleteCart/{skuId} delete export const reqDeleteCart = (skuId) => Ajax.delete(`/cart/deleteCart/${skuId
阅读全文
摘要：一， 对商品的数量输入框做限制，change事件，对输入框修改数据后，失去焦点后，对于负数控制 <input autocomplete="off" class="itxt" v-model="skuNum" @change="$event.target.value*1 > 1? skuNum = $
阅读全文
摘要：淘宝 npm 地址： http://npm.taobao.org/ 如何使用有很多方法来配置npm的registry地址，下面根据不同情境列出几种比较常用的方法。以淘宝npm镜像举例： 1.临时使用 npm --registry https://registry.npm.taobao.org ins
阅读全文
摘要：reduce的原理 简介 在红宝书中，将这个方法定义为数组的归并方法，这个方法和迭代方法（map,forEach,filter...）一样，都会对数组进行遍历，reduce与他们不同的是函数的第一个参数得到的是迭代计算后的效果（看不懂没关系，继续往下看就会懂了） 语法 这个方法接收两个参数： 要执行
阅读全文
摘要：if（condition）的condition求值结果若非布尔值，ECMAScript会自动调用Boolean()转换函数将结果转换为布尔值。转换规则为：
阅读全文
摘要：一，在detail组件中，向子组件zoom和 imglist传递数据，属性传递， 1.父组件detail computed: { ...mapGetters(["categoryView", "skuInfo", "spuSaleAttrList",'imgList']) }, 向子组件传递数据 <
阅读全文
摘要：一，分页组件连续页起始和结束计算 自定义通用的分页组件 实现静态组件（模板结构样式） 参考文档去获取 设计数据 外部接受的 当前页码 每页数量 总数 连续页码数量 一般都是奇数个 自己内部的 总页数 连续页码的起始和结束（比较恶心） 1、先判断连续页码是不是比最大的页码还要大，如果是那么start=
阅读全文
摘要：一，解决search多次跳转返回不能一次返回到首页 1.在search组件中，将push改成replace,没有路由历史记录，可以直接返回到home页 1.1, 在从search页跳转到search页，不需要有路由记录，直接用replace //删除面包屑的类别名称 removeCategoryNa
阅读全文
摘要：一，search组件的静态页面实现以及数据获取到vuex内 之前在home页，点击商品分类列表，跳转到search页，在search页我们需要获取数据，根据接口文档，需要一些请求参数，我们可从search组件的路由对象的query,params参数获取需要的请求参数，然后在beforemounted
阅读全文
摘要：一，处理swiper轮播图 在floor组件中， 轮播图html模板 <!-- <div class="swiper-container" ref="floor1Swiper"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for
阅读全文
摘要：一，mockjs模拟banner和floor接口操作，组件获取数据 1.创建mock文件夹，创建banner.json和floor.json, mockServer.js(提供服务，模拟接口) 安装mockjs npm i mockjs mockServer.js 文件内容 //正儿八经的模拟接口
阅读全文
摘要：【vue踩坑记录】3、“Error in render: "TypeError: Cannot read property '0' of undefined"”渲染错误问题 最后发布:2019-02-09 20:20:07首发:2019-02-09 20:20:07 原文链接：https://blo
阅读全文
摘要：1、event.target.dataset https://www.cnblogs.com/aichihuamei/p/6417268.html 2、HTMLElement.dataset https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLE
阅读全文
摘要：// 创建axios实例 const service= axios.create({ baseURL:'/api',//配置基础路径 timeout:3000 }) //请求拦截器 service.interceptors.request.use(config=>{ //发送请求，开始进度条 Npr
阅读全文
摘要：放图 home模块的vuex home.js // 引入ajax的函数 import {reqCategoryList} from '@/api' const state= { CategoryList:[] } const mutations={ RECEIVECATEGORYLIST(state
阅读全文
摘要：一，新建axios文件夹，axios二次封装 Ajax.js 前后台交互模块ajax模块，对axios的二次封装 获取数据离不开ajax，所以先把ajax工具搞定 配置基础路径和超时限制 添加进度条信息 nprogress 返回的响应不再需要从data属性当中拿数据，而是响应就是我们要的数据 统一处
阅读全文
摘要：描述: 编程式路由跳转到当前路由(参数不变), 会抛出NavigationDuplicated的警告错误 声明式路由跳转内部已经处理 原因：vue-router3.1.0之后, 引入了push()的promise的语法 如果没有通过参数指定成功或者失败回调函数就返回一个promise来指定成功/失败
阅读全文
摘要：需求：需要跳转到login和register组件时，footer组件影藏 路由配置项中配置meta { path:'/login', component:Login, // 用来判定底部是否隐藏 meta:{ isHide:true } }, { path:'/register', componen
阅读全文
摘要：typeNav.vue html部分 <transition name="show"> <div class="sort" v-show="isShow"> <div class="all-sort-list2" @click="toSearch"> <div class="item" v-for=
阅读全文
摘要：typeNav.vue 模板template 一.移入移出背景颜色显示与隐藏， <div @mouseleave="moveOut" @mouseenter="isShow=true"> <h2 class="all">全部商品分类</h2> <transition name="show"> <di
阅读全文
摘要：js部分, app.vue //本来我们请求三级分类列表的功能是在TypeNav里面去做的，TypeNav组件又在 /home 路径下，加载TypeNav后，自动会发送ajax请求， //而当从 /home 路由切换到 /serach 路径后，因为 /serach 路径 也有 TypeNav组件，加
阅读全文
摘要：一，使用声明式路由连接到search组件，使用组件对象（申明式路由），会让浏览器卡顿，可采用编程式路由 模板template 二， 每个连接路由使用编程式路由，效率还不是很高，因为每个类别都添加了相同的点击事件，多加了很多回调，浪费内存，可采用事件委派，给相同的父元素添加即可 <div class=
阅读全文
摘要：meta简单来说就是路由元信息 也就是每个路由身上携带的信息。这里简单的举两个例子:其次还有一个功能就是能够控制公共组件的显示或隐藏 原文链接：https://blog.csdn.net/Ares0412/article/details/98795576?utm_medium=distribute.
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键： // 在单独构建的版本中辅助函数为 Vuex.mapState import { mapState } from 'vuex
阅读全文
摘要：NProgress是页面跳转是出现在浏览器顶部的进度条官网：http://ricostacruz.com/nprogress/github：https://github.com/rstacruz/nprogress 如下图所示，绿色的进度条就是NProgress实现的效果 1、安装$ npm ins
阅读全文
摘要：最近在项目中要用到拦截器，坦白说是第一次听说这玩意，所以资料查了好久，现在也算是明白了拦截器的作用。我的理解就是拦截每一次你的请求和响应，然后进行相应的处理。比如一些网站过了一定的时间不进行操作，就会退出登录让你重新登陆页面，当然这不用拦截器你或许也可以完成这功能，但是会很麻烦而且代码会产生大量重复
阅读全文
摘要：router.push 的语法规则如下： router.push(location（导航路径）, onComplete（成功的回调）?, onAbort?（失败的回调）)router.push(location).then(onComplete).catch(onAbort)router.repla
阅读全文
摘要：window 右键菜单添加 vscode 原文链接：https://blog.csdn.net/GreekMrzzJ/article/details/82194913 window 右键菜单添加 vscode 我最终想要的效果如上图所示： - 右键文件夹，可以使用vscode打开 - 右键单文件，可
阅读全文
摘要：先看效果。 很简单。重新安装vscode.,然后把该勾选的都勾住// 是不是比.reg文件配置的方式方便多了【哈哈】// 放心，安装的插件不会被卸载
阅读全文
摘要：vue-webpack项目本地开发环境设置代理解决跨域问题 前言： 一般跨域问题只要后端配置好的话，是不需要前端做处理的，但也不能保证你遇到的所有后端都能很好的处理这个问题，这个时候可能就需要前端设置代理解决这个问题了。 配置方法： 1. config/index.js proxyTable: {
阅读全文
摘要：在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理，个人的理解是全局状态管理更合适；简单的理解就是你在state中定义了一个数据之后，你可以在所在项目中的任何一个组件里进行获取、进行修改，并且你的修改可以得到全局的响应变更。下面咱们一步一步地剖析下vuex的使
阅读全文
摘要：Object.create()方法是ECMAScript5中新增的，用来规范化原型式继承的。这个方法接收两个参数，一个是用作新对象原型的对象，和一个为新对象定义额外属性的（可选）对象。 var person = { name: "Nicholas", friends: ["John", "Jane"
阅读全文
摘要：组件 (Component) 是用来构成你的 App 的业务模块，它的目标是 App.vue。 插件 (Plugin) 是用来增强你的技术栈的功能模块，它的目标是 Vue 本身。 简单来说，插件就是指对Vue的功能的增强或补充。 比如说，让你在每个单页面的组件里，都可以调用某个方法，或者共享使用某个
阅读全文
摘要：在已有dom元素上创建一个vue组件 <div id="app"> </div> var app = new Vue({ el:'#app', data:{ message:'', } }) 自定义vue组件： <div id="app"> <my-example></my-example> </d
阅读全文
摘要：自定义指令 使用Vue.directive()定义全局的指令v-focus 参数1 ：指令的名称，注意，在定义的时候，名称前面不需要加 v- 前缀，但在调用的时候，必须在指令名称前加上 v- 前缀来进行调用 参数2： 是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关
阅读全文
摘要：watch和computed都是以Vue的依赖追踪机制为基础，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。 methods用来定义函数，它需要手动调用才能执行，需要像”fuc()”
阅读全文
摘要：原文链接； https://www.cnblogs.com/susu-yee/p/11533546.html 1、点击【文件】 【首选项】 【用户代码片段】 2、新建或修改vue.json 3、将下列代码粘贴上去（可根据自己需要添加/删除） { "Print to console": { "pref
阅读全文
摘要：Vue.js 过滤器的基本使用（filter） vue中的过滤器分为两种：局部过滤器和全局过滤器 1、定义无参全局过滤器 Vue.filter('msgFormat', function(msg) { // msg 为固定的参数 即是你需要过滤的数据 return msg.replace(/单纯/g
阅读全文
摘要：如图，ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例： 在上面的例子中，input的引用信息为input1 ，$refs 是所有注册过的ref的一个集合，
阅读全文