Vuex是由Vue官方开发的一个专为Vue.js开发的状态管理库。Vuex可以集中存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 Vuex基于“单向数据流”理念： Vuex的工作模式如下： Vuex应用的核心就是Store（仓库）。Store基本上就是一个容器，它包含着应用中大部分的状态（State）。 使用Vuex也可以实现任意组件间通信。但是官方在文档中提到，如果要构建一个简单的网页应用，使用Vuex可能是繁琐冗余的。 如果应用够简单，最好不要使用Vuex。一个简单的Store模式就足够了。 如果需要构建一个中大型单页应用，就需要考虑如何更好地在组件外部管理状态，Vuex将会成为自然而然的选择。...

Vue插槽（Slots）用于向组件传递一些模板片段，让子组件在它们的组件中渲染这些片段。插槽也是属于一种父组件到子组件的组件间通行的方式。 Vue插槽有以下3种类型： 默认插槽。 具名插槽。 作用域插槽。 默认插槽 使用默认插槽时，只需在子组件模板中，将要从外部传入的模板内容，使用<slot>进行占位即可。 例如有一个名为display-frame的组件，其模板内容如下： 1<div class="display-frame"> 2 <h3>{{title}}</h3> 3 <!-- 默认插槽，等待组件的使用者进行填充 --> 4 <slot> 5 默认插槽内容。使用者没有传递结构时，会显示。 6 </slot> 7</div> 该...

通常情况下，跨域问题是由服务端依靠CORS或JSONP等方法解决。为了在开发过程中不依靠后端解决跨域问题，可以使用一台与前端页面服务的Host相同的代理服务器，将请求发送给这台代理服务器，然后再由代理服务器将请求转发给真实的服务器。 使用服务代理可绕开浏览器同源策略的限制。服务代理可以使用Nginx等应用创建，当然Vue CLI也支持创建代理。 Vue CLI代理需要在vue.config.js中进行配置。 注：Vue CLI代理仅是在开发过程中使用的。 简单代理 Vue CLI创建代理最简单的方式就是： 1module.exports = { 2 devServer: { 3 proxy:...

Vue封装了一套可以快速构建基于状态变化的过渡和过度与动画的组件<transition>（<Transition>）和<transition-group>（<TransitionGroup>）。 <transition>和<transition-group>是Vue内置的组件，无需注册即可使用。它们可以将进入和离开的动画应用到通过默认插槽传递给它的元素或组件上。 它们的进入/离开动画的切换可以由v-if或v-show所触发。 Transition 组件 <transition>用于在一个元素或组件进入和离开DOM时应用动画。 最基本的用法如下： 1<template> 2<div> 3 <button @click="isShow...

在Vue中，每个组件都有其对应的生命周期，这个过程与Vue 生命周期中描述的过程一致。 Vue组件的生命周期图示如下： 下图是尚硅谷天禹所给的有关Vue生命周期的解释： 嵌套组件的生命周期 定义存在嵌套关系的组件： App.vue（父组件，3秒后自动销毁）： 1<template> 2 <div> 3 <h1>App.vue</h1> 4 <UserInfo/> 5 </div> 6</template> 7 8<script> 9import SubComponent from './components/SubComponent.vue'; 10 11export default { 12 name: 'app', 13...

Vue组件间的通信还可借助第三方库来实现。而pubsub-js就是一种实现了消息的订阅与发布的库。使用pubsub-js可以实现任意组件间的通信。 安装pubsub-js： 1npm i pubsub-js 在需要发布或订阅消息的组件中引入pubsub-js： 1import pubsub from 'pubsub-js' 发布消息 pubsub-js发布消息可以使用pubsub.publish()方法： 1pubsub.publish(msgName, data) msgName：发送消息的名称，字符串类型。 data：发送的消息（数据），类型任意。 注：pubsub.publish()与$bus.$emit()方法不一样...

给一个子组件定义自定义事件的步骤大致如下： 在父组件中使用v-on绑定自定义事件，并定义回调。 例如给一个user-info绑定自定义事件： 1<!-- 2 App.vue 3 --> 4 5<template> 6 <div> 7 <!-- 8 通过父组件给子组件绑定一个自定义事件 9 实现子组件给父组件传递数据 10 使用 .once 修饰符，让事件只在第1次被触发时执行回调 11 --> 12 <user-info @get-name.once="getUserName"/> 13 </div> 14</template> 15 16<script> 17 import UserInfo from...

样式冲突 Vue多组件开发时，组件中的CSS样式默认是全局使用的。例如在A.vue这个组件中定义的样式，也会在B.vue这个组件中生效。 而当项目中使用的组件越来越多时，这种全局通过的CSS样式的方式势必会影响整个项目，导致样式冲突。例如A.vue和B.vue都用了.demo这个样式，那么在引入和使用组件时，会造成样式的冲突。相同选择器的样式，究竟是哪个组件中的样式生效？ Vue在引入组件.vue时，如果存在相同的样式导致的冲突，后引入的组件会覆盖先引入的组件中相同的样式。例如A.vue和B.vue都用了.demo这个样式： 1import A from './components/A.vue' 2import B from...

Vue插件主要用于增强Vue。 定义插件 在Vue中，插件的本质是一个包含install()方法的对象。 install()方法： 参数1：Vue原型对象. 参数2 ~ n：第二个参数开始之后的参数（包括第二个）是插件使用者传递的数据。 定义一个简单的插件： 1/** 2 * plugins.js 3 * Vue 插件 4 */ 5 6export const myPlugin = { 7 install(Vue) { 8 console.log('Hello my plugin!'); 9 console.log(Vue); // 获取 Vue 原型对象 10 11 /* 12 可以在插件中使用 Vue 原型对象定义一些全局的配置...

混入（mixin）是指将多个组件重复的、可共用的配置选项提取成一个混入对象，然后在这些组件中对这些配置选项进行重用。 局部混入 局部混入是指在组件或特定的Vue实例中引入通用的配置对象。 例如： 1/** 2 * mixin.js 3 * 混入配置对象 4 */ 5 6// 组件中的配置选项基本上都能在 mixin 中使用 7export const mixin1 = { 8 methods: { 9 showName() { 10 alert(this.name) 11 } 12 }, 13 mounted() { 14 console.log('Hello mixin1!'); 15 }, 16} 17 18export...