随笔分类 - 前端技术栈 / Vue
摘要：vite 开发环境中，无需编译，快速冷启动 轻量快速的模块热更新 真正的按需编译，不再等待整个应用编译完成 vite对比webpack webpack是基于entry分析模块及其依赖，最终形成依赖图，最后打包成一个bundle。 然后我们才能打开页面请求本地的dev服务器上的bundle资源 即en
阅读全文
摘要：Vue 路由守卫 router.beforeEach: 全局前置路由守卫，每次切换之前被调用，可以做权限拦截 router.afterEach: 全局后置路由守卫，每次切换之后调用, 可用于切换document.title router.beforeEnter: 独享路由守卫，只有前置，没有后置，写
阅读全文
摘要：缓存路由组件 keep-alive标签包括，加上include或exclude属性即可 属性值必须和组件的name属性对应 App.vue <template> <div id="app"> <div class="nav"> <router-link class="nav" :to="`/Isla
阅读全文
摘要：Vue 缓存路由组件的生命周期钩子 activated和deactivated activated和deactivated只能用于被keep-alive包裹的路由组件 在切换路由组件时，有的路由组件被keep-alive包裹时，创建和销毁相关的生命周期钩子会失效，这两个钩子就是为了解决这个问题的 <
阅读全文
摘要：编程式路由导航 主要是以下几个api, 用法参考window.History API this.router.replace this.router.go this.$router.back
阅读全文
摘要：VueRouter replace router-link标签上设置replace属性即可 <router-link class="nav" replace to="/Polaris" active-class="active-nav"> Polaris </router-link>
阅读全文
摘要：Vue 命名路由 routes设置name属性 router-link的to属性设置对应的name routes配置 import VueRouter from 'vue-router' import Island from '../pages/Island' import IslandMessag
阅读全文
摘要：Vue 嵌套路由 嵌套路由，也叫做多级路由 routes配置项里配好children属性 然后子路由组件中使用router-link和router-view标签即可 案例 routes.js import VueRouter from 'vue-router' import Island from
阅读全文
摘要：Vue 路由 概念与基本使用 vue-router: vue的一个插件，专门来实现spa应用 关于spa应用的理解 单页应用 single page application 整个应用只有一个完整的页面 点击页面的导航，只会做局部更新 通过ajax请求数据 路由的理解 什么是路由 一个路由就是一组映射
阅读全文
摘要：Vuex namespaced namespaced: 用于划分不同模块的状态 案例 store/index.js import Vue from 'vue' import Vuex from 'vuex' // 注册Vuex插件 Vue.use(Vuex) const CounterOptions
阅读全文
摘要：Vuex mapState mapGetters mapMutations mapActions 在computed或methods中使用，在模板语法中可简化state调用声明 <template> <div> <select v-model="unit"> <option value="1">1<
阅读全文
摘要：Vuex getters 对state数据进行加工 定义 import Vue from 'vue' import Vuex from 'vuex' // 注册Vuex插件 Vue.use(Vuex) export default new Vuex.Store({ state: { count: 0
阅读全文
摘要：Vuex 概念与基本使用 概念 集中式状态管理，管理多个组件的共享状态，应用于任意组件间的通信。 什么时候用vuex 多个组件共享状态 Vuex原理图 使用Vuex npm i vuex Vue.use(vuex) 生成store commit 越过了actions, 直接与mutation对话，
阅读全文
摘要：Vue 插槽 默认插槽 具名插槽 作用域插槽 插槽的作用: 父组件向子组件的指定位置插入一段html. 也是一种组件间通信方式，适用于父传子 定义插槽内容：将内容写在组件标签体中 定义插槽默认内容: 将默认内容写在插槽标签体中 定义插槽内容展示位置: 默认插槽：在组件中将slot标签写你想要展示的位
阅读全文
摘要：Vue 过渡动画 单个元素与多个元素过渡 集成第三方过渡动画 单个元素过渡 <template> <div class="header"> <button @click="toggle">显示/隐藏</button> <transition name="island" appear> <div v-
阅读全文
摘要：nextTick在下一次dom更新结束之后执行 数据改变后，如果要基于新数据的dom去做一些事情，使用nextTick的回调去处理 案例 editTask(item) { if (Object.prototype.hasOwnProperty.call
阅读全文
摘要：消息订阅与发布 订阅: pubsub.subscribe(name,callback) 发布: pubsub.publish(name,payload) 取消订阅: pubsub.unsubscribe(id) 案例 App.vue <script> import pubsub from "pubs
阅读全文
摘要：全局事件总线 事件总线其实就是vm或vc. 可以在任意组件之间通信。 具体实现是在beforeCreate里面将vm挂到Vue.prototype上去，因为VueComponent.prototype.proto Vue.prototype 在组件的beforeDestory中要把事件总线订阅的事件
阅读全文
摘要：组件自定义事件 事件解绑 组件销毁 组件标签上绑定事件，相当于给vc绑定自定义事件，此时用emit mounted + ref + $emit 案例 App.vue <template>
阅读全文
摘要：Vue scoped lang scope: 样式作用域，防止组件样式污染 lang: 选择css扩展语言，如less <style scoped></style> <style lang="less"></style>
阅读全文
