图图的学习计划3.17

LeetCode每日一题

题目：无重复字符的最长子串**
给定一个字符串，请你找出其中不含有重复字符的 最长子串 的长度。
示例 1:
输入: “abcabcbb”
输出: 3
解释: 因为无重复字符的最长子串是 “abc”，所以其长度为 3。
示例 2:
输入: “bbbbb”
输出: 1
解释: 因为无重复字符的最长子串是 “b”，所以其长度为 1。
示例 3:
输入: “pwwkew”
输出: 3
解释: 因为无重复字符的最长子串是 “wke”，所以其长度为 3。
请注意，你的答案必须是 子串 的长度，“pwke” 是一个子序列，不是子串。

/**
 * @param {string} s
 * @return {number}
 */
var lengthOfLongestSubstring = function(s) {
    var childString = ''; //用来存放当前子串
		var longString = '';//用来存放无重复最长的子串
		for(var i in s) {
			if(childString.indexOf(s[i]) == -1) {
				childString += s[i];
				if(childString.length > longString.length) {
					longString = childString
				}		
			}else{
				childString += s[i]
				childString = childString.slice(childString.indexOf(s[i])+1);//返回的是找到重复字符之后的子串不包括第一次找到的重复字符所以加一
			}
		}
    return longString.length;
};

解题思路：

检索传入的字符串，按顺序一个个检索。如没有重复的则添加到当前字符串childString中，并与longString的长度比较，如childString的长度大于longString则将值赋予longString。如遇到重复字符，先添加到childString中，并将childString中第一次出现这个重复字符之前和包括它自己删除，只取后面的字符串。

VUE的学习

改变url的值

location.hash = ‘aaa’ 只改变url不会重新请求数据
location.href = ‘aaa’ 改变url并重新请求数据
history.pushState ({ },’ ‘,‘aaa’) 只改变url不会重新请求数据并以堆栈的形式存放记录可以返回
history.replaceState ({ },’ ',‘aaa’)只改变url不会重新请求数据不可以返回
history.back() 返回 相当于 history.go(-1)
history.forward() 前进 相当于 history.go(1)

VUE使用router

import Vue from 'vue' //导入VUE
import Router from 'vue-router'//导入路由
import Home from '../view/Home'//导入组件

Vue.use(Router) //使用路由

//创建一个路由对象并导出
export default new Router({
  routes: [
    {
      path: '/', redirect: '/home' //重定向
    }
    {
      path: '/home', component: Home   //当界面url变成/home时渲染Home组件
    }，
  ]，
  mode: 'history' //默认使用hash，url可能不怎么好看
})

在入口函数里导入router.js并使用

import router from './router'

new Vue({
  el: '#app',
  router,
  render: c => c(app)
  // template: '<App/>'
  // components: { App },
})

在App.vue加入router-link与router-view

<router-link to="/home"></router-link>//可以改变url
<router-view/> //显示组件

关于router-link标签的其他属性

tag 改变标签的渲染类型 如<router-link to="/home" tag='button'></router-link>
replace 是url无法返回相当于使用了history.replaceState，使用时无需赋值
active-class 改变处于活跃状态下的class名如<router-link to="/home" tag='button' active-class='active'></router-link>也可在router.js中修改linkActiveClass

export default new Router({
  routes: [
    {
      path: '/', redirect: '/home' //重定向
    }
    {
      path: '/home', component: Home   //当界面url变成/home时渲染Home组件
    }，
  ]，
  linkActiveClass: 'active'
})

通过代码实现跳转路由

methods: {
    homeBtn () {
      this.$router.push('/home')
    }
  }

动态路由和获取动态路由的值

在路由入口index.js中

    {
      path: '/user/:userId', component: User //通过:userid来存放动态的值
    }

在router-link中修改

<router-link :to="'/user/'+userId"></router-lin>//通过v-bind来获取到data中userId的值

在User组件中获取值
通过计算属性，通过this.$route来获取当前的路由对象，然后通过params属性来获取用来存放值userId

  computed: {
    userId () {
      return this.$route.params.userId
    }
  }

路由的懒加载

在路由变换时要用到组件时在进行加载而不是一进去就全部加载组件

// import Home from '../view/Home'
// import User from '../view/User'

const Home = () => import('../view/Home')
const User = () => import('../view/User')

路由的嵌套

{
      path: '/more',
      component: More,
      children: [ //通过children属性进行嵌套
        {
          path: 'news', component: News
        },
        {
          path: 'message', component: Message
        },
        {
          path: '',
          redirect: 'news'
        }
      ]
    }