随笔分类 - Vue
Vue事件总线
摘要:const listeners = {}; export default { // 监听某一个事件 $on(eventName, handler) { if(!listeners[eventName]) { listeners[eventName] = new Set(); } listeners[
Vue自定义指令
摘要:定义指令 全局定义 // 指令名称为:mydirec1 Vue.directive('mydirec1', { // 指令配置 }) // 指令名称为:mydirec2 Vue.directive('mydirec2', { // 指令配置 }) 之后,所有的组件均可以使用mydirec1和mydi
对某个组件进行单元测试
摘要:### 准备环境 全局下载依赖:`npm install -g @vue/cli-service-global` ### vue serve 1. 然后运行 vue serve 组件的url,这时候我们发现可以对单独的.vue进行测试了 ### 配置脚本 1. 打开项目根目录的package.jso
Vue插槽
摘要:什么是插槽? 插槽(Slot)是Vue提出来的一个概念,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有更大的重用性。 插槽显不显示、怎样显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制。 1. 举个栗子(默认插槽) 父组件 <template> <div> 我是父
Vue路由大总结
摘要:vue-router vue-router 是 vue的一个插件库,专门用来实现 SPA应用。 SPA 单页面 Web 应用(single page web application,SPA)。 整个应用只有 一个完整的页面。 点击页面中的导航链接 不会刷新页面,只会做页面的 局部刷新。 数据需要通过
Vue路由传递参数与接受参数
摘要:路由(参数传递) 使用路径匹配的方式 修改路由配置 { path: '/xxx/xxx/:id', component: XXX } 主要是在 path 属性中增加了 :id 这样的占位符,来接受路由参数 例如 /xxx/xxx/66 ID={{$route.params.id}} 源组件 => 源
Vue生命周期钩子
摘要:
Vuex快速入门
摘要:Vuex 1. state 在state中定义的数据,在组件直接使用 import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); export default new Vuex.Store({ // state相当于组件中的data,
作用域插槽
摘要:作用域插槽也是一种通信方式。 特点:数据是在组件自身 目的:传递给使用该组件者且使用template 的 slot-scope来获取并插入html结构到子组件中。 例如 A组件中有个B组件,B组件里面有插槽,我们想对B组件中插入某些html结构,但是A组件中没有数据,我们可以通过 B组件插槽中传递该
vue-router大总结
摘要:vue-router vue-router 是 vue的一个插件库,专门用来实现 SPA应用。 SPA 单页面 Web 应用(single page web application,SPA)。 整个应用只有 一个完整的页面。 点击页面中的导航链接 不会刷新页面,只会做页面的 局部刷新。 数据需要通过
Vuex 模块化 + 命名空间
摘要:Vuex 模块化 + 命名空间 目的:让代码更好维护,让多种数据分类更加明确 修改 store.js (主模块) import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const moduleA = { namespaced: tru
Vuex四个map的方法使用
摘要:四个map方法的使用 mapState mapState方法:用于帮助我们映射 state 中的数据为计算属性 computed: { // 借助 mapState生成计算属性:t1、t2、t3(对象方法) ...mapState({t1: 't1', t2: 't2',t3: 't3'}) //
getters的使用
摘要:getter的使用 概念:当 state 中的数据需要经过加工后在使用时,可以使用getters加工。 在 store.js 中追加 getters配置 ...... const getters = { bigSum(state) { return state.xxx * 10 } } // 创建并
Vuex的基本使用
摘要:基本使用 初始化数据、配置actions、配置mutations、操作文件store.js // 引入Vue核心库 import Vue from 'vue' // 引入Vuex`````` improt Vuex from 'vuex' // 引用Vuex Vue.use(Vuex) const
Vuex
摘要:概念 在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间的通信方式,且适用于任意组件间通信。 何时使用 多个组件需要共享数据时 搭建vuex环境 创建文件:src/store/index.js // 引入Vue核心库 im
插槽的分类与使用
摘要:插槽 让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于 父组件 > 子组件 分类:默认插槽、具名插槽、作用域插槽 使用方式 1. 默认插槽 父组件中: <Demo> <div>html结构1</div> </Demo> 子组件中: <template> <div> <!
VueCli配置代理服务器
摘要:Vue脚手架配置代理 方法一 在vue.config.js中添加如下配置: devServe: { proxy: 'http://localhost:xxxx' } 说明 优点:配置简单,请求资源时直接发给前端(8080)即可 缺点:不能配置多个代理,不能灵活的控制请求是否走代理 工作方式:若按照上
Vue封装的过渡与动画
摘要:Vue封装的过渡与动画 作用:在插入、更新或移出 DOM 元素时,在合适的时候给元素添加样式类名。 图示: 写法: 准备好样式: 元素进入的样式 v-enter:进入的起点 v-enter-active:进入过程中 v-enter-to:进入的终点 元素离开的样式 1. v-leave:离开的起点
nextTick
摘要:nextTick 语法 :this.$nextTick(回调函数) 作用:在下一次 DOM更新结束执行其指定的回调。 什么时候用:当改变数据后,要基于更新后的DOM进行某些操作时,要在nextTick所指定的回调函数中执行。
消息订阅与发布(pubsub)
摘要:消息订阅与发布(pubsub) 一种组件间通信的方式,适用于任意组件间通信。 使用步骤: 安装pubsub:npm i pubsub-js 或 yarn add pubsub 引入:import pubsub from 'pubsub-js' 接受数据:A组件想接受数据,则在A组件中订阅消息,订阅的