一、Vue-Router 是干什么的,原理是什么?(必会)
解答:
vue-Router 是 Vue.js 官方的路由插件,它和 Vue.js 是深度集成的,适合用于构建单页面应用。Vue 的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在 Vue-Router 单页面应用中,则是路径之间的切换,也就是组件的切换。路由模块的本质 就是建立起 url 和页面之间的映射关系。“更新视图但不重新请求页面”是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有两种方式:
利用 URL 中的 hash(“#”)
利用 History interface 在 HTML5 中新增的方法
收起解题思路
二、请说出vue几种常用的指令
v-if:根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
v-show:根据表达式之真假值,切换元素的 display CSS 属性。
v-for:循环指令,基于一个数组或者对象渲染一个列表,vue 2.0以上必须需配合 key值 使用。
v-bind:动态地绑定一个或多个特性,或一个组件 prop 到表达式。
v-on:用于监听指定元素的DOM事件,比如点击事件。绑定事件监听器。
v-model:实现表单输入和应用状态之间的双向绑定
v-pre:跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
v-once:只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
收起解题思路
三、请说下封装 Vue 组件的过程?(必会)
具体步骤:
- 使用 Vue.component 方法注册组件,子组件需要数据,可以在 props 中接受定义,而子组件修改好数据后,想把数据传递给父组件。可以采用$emit 方法向外抛数据
- 如果需要给组件传入模板,则定义为插槽 slot
- 如果需要 父组件主动调用子组件的方法 可以在 methods 选项中开放方法