![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
喝啤酒的猫
这个作者很懒,什么都没留下…
展开
-
自定义EventBus 与 自定义PubSub
自定义EventBus(function (window) { // 需要向外暴露的事件总线对象 const EventBus = {} // 包含所有监听器函数的容器对象 // 内部结构: {msg1: [listener1, listener2], msg2: [listener3]} let listenersContainer = {} /* 用来绑定监听的on方法 eventName: 事件名 listener: 监听回调函数 */ EventBus.on = functi原创 2020-05-29 21:21:42 · 634 阅读 · 0 评论 -
VUE——组件间通信
组件间通信组件间通信的基本原则props : 父 ——> 子非函数属性(对象/数组/基本类型)函数属性自定义事件($emit) : 子 ——> 父全局事件总线---任意组件间通信组件间通信的基本原则不要在子组件中直接修改父组件的状态数据数据在哪, 更新数据的行为(函数)就应该定义在哪数据定义在哪个组件?若多个组件公共一份数据,那么这个数据就定义在他们共同的父组件上更新数...原创 2020-05-29 10:11:12 · 212 阅读 · 0 评论 -
vue动画
Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。vue过渡动画会和 v-show , v-if 相结合使用必须使用 transition 组件将需要过渡动画的元素 包裹起来当元素从显示状态 --> 隐藏状态 我们称为leave状态 vue会给目标元素加上3个classv-leave: 当前这个class vue本身是没有使用的!v-leave-active : 他在整个vue过渡的生命周期中都会有效v-leave-to : 他只有在vue过渡动画的最原创 2020-05-20 22:07:03 · 112 阅读 · 0 评论 -
vue脚手架2版本——项目启动的流程
windows中快捷键 & dos命令windows + R 调出运行模板 ; 输入 cmd 调出dos窗口(cmd文件:windows环境下的可执行文件)windows + E 调出(我的电脑)资源管理器cls : 清屏操作set : 查看当前windows操作系统的环境变量set name : 查看指定的环境变量set name=val : 设置环境变量(一次性的设置 关掉命令行窗口后 设置就会失效)set name= : 删除环境变量npm相关的命令npm root -g :原创 2020-05-20 21:14:45 · 3665 阅读 · 0 评论 -
vue源码分析(三)——数据劫持 与 数据绑定
Object1、数据绑定(model==>View):一旦更新了data中的某个属性数据, 所有界面上直接使用或间接使用了此属性的节点都会更新(更新)2、数据劫持①. 数据劫持是vue中用来实现数据绑定的一种技术②. 基本思想: 通过defineProperty()来监视data中所有属性(任意层次)数据的变化, 一旦变化就去更新界面3、四个重要对象①. Observer通过过隐式递归调用实现所有层次属性的监视/劫持给data重新定义属性, 添加 setter / getter为原创 2020-05-17 12:04:17 · 374 阅读 · 0 评论 -
vue源码分析(二)——模板解析
模板解析模板解析的关键对象: compile对象模板解析的基本流程:①. 将el的所有子节点取出, 添加到一个新建的文档fragment对象中②. 对fragment中的所有层次子节点递归进行编译解析处理 - 对插值文本节点进行解析 - 对元素节点的指令属性进行解析 &nbs原创 2020-05-17 10:24:35 · 202 阅读 · 0 评论 -
vue源码分析(一)——数据代理
数据代理data 对象中的所有属性的操作(读/写)由vm对象来代理操作,这样操作data比较方便const vm = new MVVM({ data: { name: 'tom2' }}) 原本的读写方式:vm._data.name = '张三' //写console.log(vm._data.name) //读现在的读写方式:vm.name = '张三' //写console.log(vm.name) //读实现:1、通过Object.define原创 2020-05-17 10:22:38 · 129 阅读 · 0 评论 -
shop-client 电商项目详解
源码地址:Detail 组件一、静态页面拆分二、调接口三、动态显示页面数据四、实现缩放轮播图以及点击缩放图显示大图效果思路:缩放轮播图效果可以引入swiper插件,注意设置在第一次渲染页面后就对skuImageList 进行一次监听(immediate: true);点击缩放图的图片会添加active的class,因此动态绑定class;设置一个data属性currentInde...原创 2020-04-23 16:56:49 · 868 阅读 · 0 评论 -
axios使用与源码分析
HTTP相关一、不同类型的请求 GET: 从服务器端读取数据 POST: 向服务器端添加新数据 PUT: 更新服务器端已经数据 (不能接受 query 参数,只能接受 params 参数) DELETE: 删除服务器端数据 (不能接受 query 参数,只能接受 params 参数)query 参数 : localhost:8080/path?name=xxx&age...原创 2020-04-23 16:49:01 · 284 阅读 · 0 评论 -
编程式路由跳转到当前路由, 控制台抛出NavigationDuplicated的错误
编程式路由跳转到当前路由, 控制台抛出NavigationDuplicated的错误router.push 的语法规则如下:router.push(location(导航路径), onComplete(成功的回调)?, onAbort?(失败的回调))router.push(location).then(onComplete).catch(onAbort)router.replace...原创 2020-04-06 19:33:39 · 496 阅读 · 0 评论 -
Vuex
基本概念Vuex 是状态管理工具。集中式存储管理 应用的所有组件的状态,可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面,并将这个变量放在顶层的Vue实例中,让其他组件可以使用。...原创 2020-04-04 19:27:51 · 93 阅读 · 0 评论 -
VUE学习笔记——路由
VUE学习笔记——路由基本路由嵌套路由缓存路由组件对象向路由组件传递数据一、路由路径携带参数方式1:param方式2:query二、router-view属性携带数据vue-resource基本路由1、定义路由组件:src/views/About.vue<template> <div> About </div></template&...原创 2019-08-07 20:22:17 · 181 阅读 · 0 评论 -
VUE学习笔记——基础
VUE学习笔记第一部分:基础知识vue的基本认识vue的基本使用模板语法计算属性和监视class与style绑定条件渲染列表渲染列表的搜索和排序事件处理表单事件的自动收集VUE的生命周期动画过滤器指令第一部分:基础知识vue的基本认识一、官网https://cn.vuejs.org/二、介绍描述1、渐进式 javascript 框架渐进式的意思就是在核心库中逐渐添加相应的插件库...原创 2019-07-27 16:02:59 · 180 阅读 · 0 评论 -
VUE学习笔记——AJAX
VUE学习笔记——AJAXvue-resourceaxiosvue 项目中常用的 2 个 ajax 库:1、vue-resource——vue 插件, 非官方库, vue1.x 使用广泛2、axios——通用的 ajax 请求库, 官方推荐, vue2.x 使用广泛vue-resourcenpm install vue-resource --save测试接口 : https://api...原创 2019-08-04 11:37:15 · 186 阅读 · 0 评论