vue知识点与项目联合讲解

问：vue生命周期你用到了哪些？各自的应用场景分别是什么？

答：mounted：页面初始化请求数据

beforeDestroy：清除定时器

问：什么时候用v-on:click="click"？什么时候用v-on:click.native="click"？

答：官方对.native修饰符的解释为：有时候，你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native

问：为什么会有<router-link to="/home">首页</router-link>这种东西？

答：这是用来跳转的，相当于<a href='/home'>首页</a>

继续问：为什么不直接用<a href='/home'>首页</a>？

答：你自己把<router-link to="/home">首页</router-link>改成<a href='/home'>首页</a>，看下效果，就知道了

问：编程式导航的作用是什么？

答：用js实现跳转，有时我们不是点击<a>标签跳转，比如登录成功以后跳到首页，这种情况就不能用<a>标签

继续问：如果vue没有提供编程式导航，怎么办？

答：那就给<a>标签设置href属性，然后给<a>标签设置click事件

问：<style>标签里的<scoped>的作用是什么?

答：比如页面a有div{color:#f00;}，页面b有div{color:#000;}，如果没有用到scoped，页面a的样式会和页面b的样式发生冲突

问：axios拦截器的作用是什么？

答：防止黑客攻击，可以根据请求地址、请求参数进行拦截

问：router.beforeEach的作用是什么？

答：比如，如果url里没有id，就alert(‘您暂未登录，请登录’)，就可以通过这个实现，

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

    let id = to.query.id;

    if(id){ }

    else{}

});

问：axios.defaults的作用是什么？

答：比如axios.defaults.baseURL，可以避免写重复的请求地址，比如页面里有2个请求，1个请求地址是'a.com?id=x'，1个请求地址是'a.com?name=x'；这时用了axios.defaults.baseURL的话，'a.com?'就只需要写1遍就可以了

问：v-for什么时候用得到？

答：

综合来看，就是列表性质的可以用。

1.<ul>下渲染多个<li>的时候用得到

2.<select>下渲染多个<option>时用得到

问：v-if什么时候用得到？

同一个地方，在不同情况需要显示不同内容时可以用，比如：有个<span>标签，里面写用户的角色，后端返回的可能是1和2，我渲染的时候渲染‘主任’和‘副主任’，就可以这么写：

<span>

<template v-if='people == 1'>主任</template>

<template v-else>副主任</template>

</span>

问：<template>什么时候用得到？

使用场景有点类似于v-if，可以参数上面的‘v-if什么时候用得到？’

问：v-bind:什么时候用得到？

当html属性是动态的而不是写死的时候，就需要用到v-bind:，例如

<option v-bind:value='item' v-for='item in items'>{{item}}</option>