IslandZzzz - 博客园

2022年2月14日

摘要： Vue 嵌套路由嵌套路由，也叫做多级路由 routes配置项里配好children属性然后子路由组件中使用router-link和router-view标签即可案例 routes.js import VueRouter from 'vue-router' import Island from 阅读全文

posted @ 2022-02-14 22:25 IslandZzzz 阅读(2053) 评论(0) 推荐(0)

Vue 路由的基本概念与使用

摘要： Vue 路由概念与基本使用 vue-router: vue的一个插件，专门来实现spa应用关于spa应用的理解单页应用 single page application 整个应用只有一个完整的页面点击页面的导航，只会做局部更新通过ajax请求数据路由的理解什么是路由一个路由就是一组映射阅读全文

posted @ 2022-02-14 22:24 IslandZzzz 阅读(775) 评论(0) 推荐(0)

js 解构赋值的连续写法深层解构

摘要： const a = {query:{b:1}} const {query:{b}} = a console.log(b) // 1 const t = {query:{b:{d:{e:2,f:3}}}} const {query:{b:{d:{e}}}} = t const {query:{b:{d 阅读全文

posted @ 2022-02-14 22:00 IslandZzzz 阅读(684) 评论(0) 推荐(0)

2022年2月13日

Vuex namespaced

摘要： Vuex namespaced namespaced: 用于划分不同模块的状态案例 store/index.js import Vue from 'vue' import Vuex from 'vuex' // 注册Vuex插件 Vue.use(Vuex) const CounterOptions 阅读全文

posted @ 2022-02-13 21:39 IslandZzzz 阅读(152) 评论(0) 推荐(0)

Vuex mapState mapGetters mapMutations mapActions

摘要： Vuex mapState mapGetters mapMutations mapActions 在computed或methods中使用，在模板语法中可简化state调用声明 <template> <div> <select v-model="unit"> <option value="1">1< 阅读全文

posted @ 2022-02-13 16:59 IslandZzzz 阅读(33) 评论(0) 推荐(0)

Vuex getters

摘要： Vuex getters 对state数据进行加工定义 import Vue from 'vue' import Vuex from 'vuex' // 注册Vuex插件 Vue.use(Vuex) export default new Vuex.Store({ state: { count: 0 阅读全文

posted @ 2022-02-13 16:50 IslandZzzz 阅读(36) 评论(0) 推荐(0)

Vuex 概念与基本使用

摘要： Vuex 概念与基本使用概念集中式状态管理，管理多个组件的共享状态，应用于任意组件间的通信。什么时候用vuex 多个组件共享状态 Vuex原理图使用Vuex npm i vuex Vue.use(vuex) 生成store commit 越过了actions, 直接与mutation对话，阅读全文

posted @ 2022-02-13 16:32 IslandZzzz 阅读(56) 评论(0) 推荐(0)

Vue 插槽默认插槽具名插槽作用域插槽

摘要： Vue 插槽默认插槽具名插槽作用域插槽插槽的作用: 父组件向子组件的指定位置插入一段html. 也是一种组件间通信方式，适用于父传子定义插槽内容：将内容写在组件标签体中定义插槽默认内容: 将默认内容写在插槽标签体中定义插槽内容展示位置: 默认插槽：在组件中将slot标签写你想要展示的位阅读全文

posted @ 2022-02-13 12:10 IslandZzzz 阅读(198) 评论(0) 推荐(0)

2022年2月12日

Vue 过渡动画单个元素与多个元素过渡集成第三方过渡动画

摘要： Vue 过渡动画单个元素与多个元素过渡集成第三方过渡动画单个元素过渡 <template> <div class="header"> <button @click="toggle">显示/隐藏</button> <transition name="island" appear> <div v- 阅读全文

posted @ 2022-02-12 20:27 IslandZzzz 阅读(55) 评论(0) 推荐(0)

2022年2月11日

Vue $nextTick

摘要： $nextTick $nextTick在下一次dom更新结束之后执行数据改变后，如果要基于新数据的dom去做一些事情，使用$nextTick，操作$nextTick的回调去处理案例 editTask(item) { if (Object.prototype.hasOwnProperty.call 阅读全文

posted @ 2022-02-11 22:03 IslandZzzz 阅读(43) 评论(0) 推荐(0)