mwms

1、css的定位有哪些，他们的区别是什么？

• relative（相对定位）：相对定位的偏移参考元素是元素本身，不会使元素脱离文档流。元素的初始位置占据的空间会被保留。
• absolute（绝对定位）绝对定位元素以父辈元素中最近的定位元素为参考坐标，如果绝对定位元素的父辈元素中没有采用定位的，那么此绝对定位元素的参考对象是html,元素会脱离文档流。
• fixed (固定定位)位移的参考坐标是可视窗口，使用fixed的元素脱离文档流。

2、 简述block，inline，inline-block的区别？

display:block：

1. block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
2. block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
3. block元素可以设置margin和padding属性。

display:inline:

1. inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
2. inline元素设置width,height属性无效。
3. inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

display:inline-block

1. 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

3. 简述cookie、localstorage、seesionstorage

image.png

4. 说出至少四种vue的指令和他的用法

v-show 控制的隐藏出现，只是将css属性设为了display：none 或block;
v-if 当值为 true时，显示div ，当值为false时，改元素消失，代码也会消失，相当于将代码删除了
v-bind绑定属性，使用：替代 有三个修饰符：sync，once，camel将绑定的特性的名称转化为驼峰法则命名
v-model 双向数据绑定
v-html 获取html标签 v-text不解释标签，v-html解释标签

5. 怎么定义vue-router的动态路由，怎么获取动态路由传过来的参数？

可以通过query，param两种方式.。
params的类型：

• 配置路由格式:/router/:id
• 传递的方式：在path后面跟上对应的值
• 传递后形成的路径：/router/123

// 动态路由params
在App.vue中
<router-link :to="'/user/'+userId" replace>用户</router-link>

在index.js
{
    path:"/user/:userid",
    component:User,
}

可以通过$route.params.userid 获取你说传递的值

query的类类型

• 配置路由格式:/router,也就是普通配置
• 传递的方式:对象中使用query的key作为传递方式
• 传递后形成的路径:/route?id=123

可以通过$route.query 获取你所传递的值

6. vue-router有哪几种导航钩子？

全局前置守卫
你可以使用 router.beforeEach 注册一个全局前置守卫：

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

全局后置钩子

---

你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next函数也不会改变导航本身：

const router = new VueRouter({ ... });
router.afterEach((to, from) => {
    // do someting
});

路由独享的守卫

---

你可以在路由配置上直接定义 beforeEnter 守卫：

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

组件内的守卫

---

最后，你可以在路由组件内直接定义以下路由导航守卫：

• beforeRouteEnter
• beforeRouteUpdate (2.2 新增)
• beforeRouteLeave

const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

beforeRouteEnter 守卫 不能 访问 this，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。

不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。

beforeRouteLeave (to, from, next) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}

6. 一个池塘里有无穷多的水,你有一个5升的桶和一个6升的桶,怎么用这两个桶取出3升的水

将6升的桶灌满,再将6升的桶中的水倒入5升的桶中,使它灌满,此时6升的桶中还有1升水,将5升的桶中的水全倒掉,再将6升的桶中的1升水倒入5升的桶中,再将6升的桶灌满,再将6升的桶中的水倒入已有1升水的5升的桶中,使它灌满,此时6升的桶中还有2升水,将5升的桶中的水全倒掉,再将6升的桶中的2升水倒入5升的桶中,再将6升的桶灌满,再将6升的桶中的水倒入已有2升水的5升的桶中,使它灌满,此时6升的桶中就有3升水.

7. 判断字符串中出现次数最多的字符，并统计其次数

// 1.统计次数
var str = 'abdgdbcaethbganmugthaesqszaphfdvwd';
var obj = {};
// 创建了一个空的对象，存储字符串中的每个字符。属性：每个字符，属性值：该字符出现的次数
for (var i = 0; i < str.length; i++) {
    // 遍历字符串
    var chars = str.charAt(i);
    // chars代表字符串的每一个字符
    if (obj[chars]) {
        obj[chars]++;
    } else {
        obj[chars] = 1;
    }
    // obj[chars]属性值：该字符出现的次数
    // 如果已经存在，那么次数+1；否则赋值为1
}
console.log(obj);
// 输出对象obj，显示每个字符出现的次数

// 2.遍历对象，找出最大的次数
var max = 0;
var ch = '';
for (var k in obj) {
    if (obj[k] > max) {
        max = obj[k];
        ch = k;
    }
}
// k代表属性：每个字符
// obj[k]代表属性值：该字符出现的次数
// 将次数最多的字符赋值到ch

console.log('最多的字符是' + ch + '，次数为' + max);