前端技术栈 - 随笔分类(第7页) - IslandZzzz

taro路由配置路由跳转和传参

摘要：taro路由配置和跳转路由传参顶级组件App pages属性配置谁在pages数组最上面，就默认打开谁 import Taro, { Component, Config } from '@tarojs/taro' import Index from './pages/index' import 阅读全文

posted @ 2022-03-07 20:29 IslandZzzz 阅读(2009) 评论(0) 推荐(0)

taro hooks

摘要：taro 使用react hooks import Taro, { useState } from '@tarojs/taro' import { View, Text } from '@tarojs/components' import './index.less' const Child = ( 阅读全文

posted @ 2022-03-07 20:28 IslandZzzz 阅读(165) 评论(0) 推荐(0)

bash 复制文件

摘要：cp -r execFile.js ../a.js 阅读全文

posted @ 2022-02-26 22:15 IslandZzzz 阅读(147) 评论(0) 推荐(0)

js 常见业务数据数组转换操作时间复杂度降级O(n)的尝试

摘要：提取外层关键数据(如果需要)，将双层数组扁平化为单层单层再做转换，很容易得到O(n)的实现 const infos = [ { time: '2022-02-21', data: [{ Duration: 22, Spec: "h264" }, { Duration: 33, Spec: "h26 阅读全文

posted @ 2022-02-23 22:30 IslandZzzz 阅读(116) 评论(0) 推荐(0)

Vite 初探

摘要：vite 开发环境中，无需编译，快速冷启动轻量快速的模块热更新真正的按需编译，不再等待整个应用编译完成 vite对比webpack webpack是基于entry分析模块及其依赖，最终形成依赖图，最后打包成一个bundle。然后我们才能打开页面请求本地的dev服务器上的bundle资源即en 阅读全文

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

Vue路由守卫

摘要：Vue 路由守卫 router.beforeEach: 全局前置路由守卫，每次切换之前被调用，可以做权限拦截 router.afterEach: 全局后置路由守卫，每次切换之后调用, 可用于切换document.title router.beforeEnter: 独享路由守卫，只有前置，没有后置，写阅读全文

posted @ 2022-02-19 15:02 IslandZzzz 阅读(1004) 评论(0) 推荐(0)

Vue keep-alive 缓存组件

摘要：缓存路由组件 keep-alive标签包括，加上include或exclude属性即可属性值必须和组件的name属性对应 App.vue <template> <div id="app"> <div class="nav"> <router-link class="nav" :to="`/Isla 阅读全文

posted @ 2022-02-19 14:45 IslandZzzz 阅读(35) 评论(0) 推荐(0)

Vue 缓存路由组件的生命周期钩子 activated和deactivated

摘要：Vue 缓存路由组件的生命周期钩子 activated和deactivated activated和deactivated只能用于被keep-alive包裹的路由组件在切换路由组件时，有的路由组件被keep-alive包裹时，创建和销毁相关的生命周期钩子会失效，这两个钩子就是为了解决这个问题的 < 阅读全文

posted @ 2022-02-19 14:45 IslandZzzz 阅读(298) 评论(0) 推荐(0)

Vue 编程式路由导航

摘要：编程式路由导航主要是以下几个api, 用法参考window.History API this.$router.push this.$router.replace this.$router.forward this.$router.go this.$router.back 阅读全文

posted @ 2022-02-19 14:44 IslandZzzz 阅读(50) 评论(0) 推荐(0)

VueRouter replace

摘要：VueRouter replace router-link标签上设置replace属性即可 <router-link class="nav" replace to="/Polaris" active-class="active-nav"> Polaris </router-link> 阅读全文

posted @ 2022-02-15 20:08 IslandZzzz 阅读(445) 评论(0) 推荐(0)

Vue 命名路由

摘要：Vue 命名路由 routes设置name属性 router-link的to属性设置对应的name routes配置 import VueRouter from 'vue-router' import Island from '../pages/Island' import IslandMessag 阅读全文

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

Vue 嵌套路由

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

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

Vue 路由的基本概念与使用

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

posted @ 2022-02-14 22:24 IslandZzzz 阅读(782) 评论(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 阅读(690) 评论(0) 推荐(0)

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 阅读(156) 评论(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 阅读(42) 评论(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 阅读(40) 评论(0) 推荐(0)

Vuex 概念与基本使用

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

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

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

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

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

Island

随笔分类 - 前端技术栈