图图的学习计划3.18

LeetCode每日一题

题目：给定两个大小为 m 和 n 的有序数组 nums1 和 nums2。
请你找出这两个有序数组的中位数，并且要求算法的时间复杂度为 O(log(m + n))。
你可以假设 nums1 和 nums2 不会同时为空。
示例 1:
nums1 = [1, 3]
nums2 = [2]
则中位数是 2.0

示例 2:
nums1 = [1, 2]
nums2 = [3, 4]
则中位数是 (2 + 3)/2 = 2.5

/**
 1. @param {number[]} nums1
 2. @param {number[]} nums2
 3. @return {number}
 */
var findMedianSortedArrays = function(nums1, nums2) {
    let nums3 = nums1.concat(nums2).sort((a,b)=>a-b);
    let length = nums3.length;
    return (length%2 == 0) ? (nums3[length/2-1] + nums3[length/2])/2 : nums3[Math.floor(length/2)] 
};

解题思路：
将两个数组拼接排序，合并数组的长度并进行排序。然后判断数组长度的奇偶，如果为奇数则将长度除以2并向下取整该索引所在的值就是中位数，如果是偶数则中位数就为该长度一半所在的数和它的前一个数相加除以2。

VUE学习

vue-router传递参数

1. 利用param传递参数：

//绑定参数：
{
      path: '/user/:userId', component: User
}
//获取：
<h1>获取过来的userId为：{{this.$route.params.userId}}</h1>

2. 利用query传递参数：

<button @click="proBtn">我的</button>
//点击方法
 proBtn () {
      this.$router.push({
        path: '/more/pro',
        query: this.obj
      })
    }
 //通过query获取对象
 <p>
        {{this.$route.query}}
 </p>

router与route的区别

router对象为：

Vue.use(VueRouter)

export default new VueRouter({
  routes: [
    {
      path: '/home', component: Home
    },
    {
      path: '/', redirect: '/home'
    },
    {
      path: '/more',
      component: More,
      children: [
        {
          path: 'news', component: News
        },
        {
          path: 'message', component: Message
        },
        {
          path: '',
          redirect: 'news'
        },
        {
          path: 'pro', component: Profile
        }
      ]
    },
    {
      path: '/user/:userId', component: User
    }
  ],
  mode: 'history',
  linkActiveClass: 'active'
})

route对象是当前路由的对象

守卫导航

如通过路由进入不同界面是需改变页面title的值

//在route对象里加入meta属性
{
      path: '/home',
      component: Home,
      meta: {
        title: '首页'
      }
}
//通过beforeEach方法 一定要调用next()方法
router.beforeEach((to, from, next) => {
  document.title = to.matched[0].meta.title
  next()
})

keep-alive

可以缓存组件

<keep-alive>
  <router-view/>
</keep-alive>
//可以使用activated方法处理该组件活跃时所作的事务
export default {
  name: 'Message',
  created () {
    console.log('create')
  },
  activated () {
    console.log('activated')
  },
  beforeRouteLeave (to, from, next) {
    console.log('leave')
    next()
  },
  destroyed () {
    console.log('destroyed')
  }
}

keep-alive的属性include与exclude

自定义TagBar的实现

封装了一个TagBar组件
整体的一个TagBar

<template>
  <div id="tagbar">
      <slot></slot>//用插槽来实现灵活的要求
  </div>
</template>

<script>

export default {
  name: 'Tagbar'
}
</script>

<style  scoped>
  #tagbar{
    display: flex;
    height: 49px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #f6f6f6;
    font-size: 12px;
  }
</style>>

每个单独小个的TagBarItem

<template>
  <div class="tagitem" @click="itemBtn">
      <slot v-if="!isActive" name="tagimg"></slot> //用来存放为活跃的图片
      <slot v-else name="activeimg"></slot>//用来存放活跃的图片
      <div :style="activeStyle">//用来绑定自定义活跃的字体颜色
        <slot name="tagtext"></slot>//用来存放文字
      </div>
  </div>
</template>

<script>
export default {
  name: 'Tagbaritem',
  props: {
    path: String,//存放路由的地址
    textStyle: { //用来存放传递过来的字体颜色
      type: String,
      default: 'red'
    }
  },
  methods: {
    itemBtn () {
      this.$router.replace(this.path) //路由跳转
    }
  },
  computed: {
    isActive () {//判断是否活跃
      return this.$route.path.indexOf(this.path) !== -1
    },
    activeStyle () {//用来设置自定义颜色
      return this.isActive ? {color: this.textStyle} : {}
    }
  }
}
</script>

<style scoped>
  .tagitem{
    flex: 1;
    text-align: center;
  }
  .tagitem img{
      margin-top: 6px;
      width: 20px;
      height: 20px;
  }
  .tagitem p{
    margin-top: 0;
    margin-bottom: 0px;
  }
</style>

在App.vue

<template>
  <div id="app">
    <router-view/>
    <tagbar>
      <tagbaritem path="/home">
        <img slot="tagimg" src="./assets/img/home.png" alt="">
        <img slot="activeimg" src="./assets/img/active.png" alt="">
        <p slot="tagtext">首页</p>
      </tagbaritem>
      <tagbaritem path="/cart">
        <img slot="tagimg" src="./assets/img/home.png" alt="">
        <p slot="tagtext">购物车</p>
      </tagbaritem>
      <tagbaritem path="/message" textStyle="green">
        <img slot="tagimg" src="./assets/img/home.png" alt="">
        <p slot="tagtext">消息</p>
      </tagbaritem>
      <tagbaritem path="/pro">
        <img slot="tagimg" src="./assets/img/home.png" alt="">
        <p slot="tagtext">个人</p>
      </tagbaritem>
    </tagbar>
  </div>
</template>

<script>
import tagbar from './components/tagbar/Tagbar'
import tagbaritem from './components/tagbar/Tagbaritem'

export default {
  name: 'App',
  components: {
    tagbar,
    tagbaritem
  }
}
</script>

<style>
@import "./assets/css/base";
</style>