摘要：辅助函数 首先我们先来介绍几个辅助函数: mapState, mapGetters, mapMutations, mapActions。可以发现它们有一个共同点，就是map+组成部分，这些辅助函数的主要目的就是帮助我们快速获取对应部分的属性，这样在开发中就能省去很多重复代码，使用上更加简单。 map 阅读全文

摘要：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 状态管理模式 在普通组件中，一般是单向状态管理，也就是下图这种情况 但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏： 阅读全文

摘要：我们在实际开发的时候，需要和后端人员联调接口，这时候需要连接它们本地或环境上的服务器，如果直接访问服务器的时候，是会发生跨域问题的。配置代理是可以解决这种跨域问题的。 vue配置代理 vue配置代理都是在vue.config.js中配置的。有两种方式配置，这里我们假设服务器地址为http://loc 阅读全文

摘要：路由的使用就是根据匹配的路径信息将正确的组件渲染到模板中定义的的位置。其中使用路由有两种方式：第一种是声明式, 另外一种就是编程式路由。 路由使用的方式 1. router-link声明式路由 这种方式主要是通过router-link组件，配置to属性就可以实现路由的切换，router-link默认 阅读全文

摘要：路由其实就是一组映射关系（key-value）。其中key为路径，value可能就是function或组件。 路由的分类 路由分为前端路由和后端路由 1. 前端路由 前端路由中value是component，用于展示页面内容。 🐝 主要过程就是当浏览器的路径改变时，对应的组件就会展示。我们这里讲的 阅读全文

摘要：在vue中动画分为两种，一种是过渡效果，一种是动画效果。这些动画效果都可以通过transition标签来实现。 进入/离开 & 列表过渡 1. 单元素/组件的过渡 对于这类过渡效果，我们主要是通过transition来实现的。 <template> <div id="app"> <button @c 阅读全文

摘要：根据vue官方介绍，$nextTick的定义如下： 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 可以简单地理解成vue会在渲染完DOM节点之后再执行$nextTick里面的回调函数。 案例介绍 看完上面的介绍，你可能还不能理解$next到底是 阅读全文

摘要：1. 什么是插槽 插槽通俗地讲就是在封装组件的时候，对不确定部分的内容的一种占位。这个展位用slot标签表示，然后在具体使用过程中根据实际内容将其放在这个slot标签的位置。 <template> <div class="slot-wrapper"> <div class="titler-wrapp 阅读全文

摘要：插件其实就是vue的增强功能。通常用来为 Vue 添加全局功能。 常见功能 一般有下面几种功能 添加全局方法或者 property。如: vue-custom-element 添加全局资源: 指令/过滤器/过渡等。如 vue-touch 通过全局混入来添加一些组件选项。如 vue-router 添加 阅读全文

摘要：混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。 功能 混入可以将多个组件中的公共配置提取成一个混入对象。这样就可以实现代码的复用。 语法 混入和过滤器等配 阅读全文

摘要：props是用来给组件接收外部数据的, 一般是父组件给子组件传值。可以是对象或者数组。 一、语法 1. 数组 props属性值如果是数组的话，那么主要就是用来接收数据的。 props: ['name', 'msg'] ⚠️ 注意：这里name,msg 是加引号的字符串。不要把引号给忘了！ 2. 对象 阅读全文

摘要：ref是用来给元素或组件注册引用信息的。换句话说，就是通过ref我们可以获取元素或组件。 在学习ref之前，我们可以根据document来获取元素的。像这样 <template> <div class="hello"> <h1 id="msg">{{msg}}</h1> </div> </templ 阅读全文

摘要：我们在使用vue组件的时候，可能搭个脚手架就开始创建.vue文件了，然后在需要使用的页面或组件中再引入组件开始使用，很少去关注组件内部的东西，其实VueComponent,也叫组件实例在vue组件中是个很重要的概念，能够帮助我们更深入理解组件，以及后面看vue源码也会更加容易。 组件到底是什么 从代 阅读全文

摘要：一、前言 创建Vue实例时，使用 new Vue ({//配置项}) 或者 组件定义中 export default {//配置项}，所有的Vue组件都是Vue实例，并且接受相同的选项对象（一些根实例特有的选项除外） 如： new Vue({ //选项配置 el: '#app', component 阅读全文

摘要：一、什么是组件？ ⏰ 宏观上组件 在软件开发中，组件（Component）是指具有独立功能和可重用性的模块化单元。它可以是一个软件系统的一部分，也可以是一个独立的软件单元。组件的设计目标是使系统更易于开发、测试、维护和扩展。 👀 注释：“软件单元：可以是一个类，一个函数，一个功能等；” ⏰ Vue 阅读全文

摘要：生命周期 生命周期是指组件从创建，运行到销毁的阶段。而生命周期函数（也叫生命周期钩子）是vue在关键的时刻帮我们调用的一些特殊名称的函数，会根据生命周期的阶段，依次执行。 从上图可以看出，vue的生命周期分为以下几个阶段： beforeCreate created beforeMount mount 阅读全文

摘要：过滤器顾名思义，是用来过滤数据的。其实在前端页面中并不常用的，能够帮我们简化代码，使模板变得更加清楚。虽然vue3中也已经取消了这个功能，但是了解并没有坏处。 自定义过滤器 过滤器是用来过滤数据的，一般用在模板中，主要是两个地方：插值语法中和v-bind表达式中。 自定义过滤器根据局部和全局可以分为 阅读全文

摘要：条件渲染 条件渲染，顾名思义，就是根据特定条件渲染内容。在使用条件渲染的时候，我们一般都会使用到两类指令：v-if和v-show v-if指令 v-if指令的意思就是说当指令的表示式返回的是true，那么就会加载渲染对应的DOM节点，否则就不会加载渲染。 ⏰ 基本用法 <div v-if="1 1" 阅读全文

摘要：我们在使用vue的时候，经常会涉及到数据绑定和响应式，这里我们主要就是详细地介绍数据绑定和响应式原理。只有理解透了这些原理，对于开发中常见的一些问题我们就能很快地找到解决方案 数据绑定 数据绑定通俗地讲就是将视图和数据绑定在一起，让页面能够展示正确的数据内容，这里我们就不得不提一下MVVM模型。 1 阅读全文

摘要：监测对象 我们在前面已经了解到，vue监测对象是使用Object.defineProperty()来进行数据劫持的，这样就给数据添加了一个代理，每次对象的属性被修改时就会调用setter, 对象的属性被获取的时候就会调用getter。 下面我们简单地实现一下vue的响应式 let obj = { n 阅读全文