【前端--面试】常见面试题（一）—— Vue

事件修饰符

• .native：绑定一个原生的click事件
• .prevent： 提交时间不再重载页面
• .stop：阻止单击事件冒泡
• .self：当事件发生在该元素本身而不是子元素的时候触发
• .capture：事件侦听，事件发生的时候会调用
• 组合键 click.ctrl.exact 只有ctrl被按下的时候才触发

开发中常用的指令

• v-model：一般用在表达输入，很轻松的实现表单控件和数据的双向绑定
• v-html：更新元素的 innerHTML
• v-show 与 v-if：条件渲染
• v-on: click:可以简写为@click,@绑定一个事件。如果事件触发了，就可以指定事件的处理函数
• v-for：基于源数据多次渲染元素或模板块
• v-bind：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

vue插槽

• 单个插槽

  当子组件模板只有一个没有属性的插槽时，父组件传入的整个内容片段将插入到插槽所在的 DOM 位置，并替换掉插槽标签本身。

• 命名插槽

  solt元素可以用一个特殊的特性name来进一步配置如何分发内容。多个插槽可以有不同的名字。 这样可以将父组件模板中 slot 位置，和子组件 slot元素产生关联，便于插槽内容对应传递。

• 作用域插槽

  可以访问组件内部数据的可复用插槽(reusable slot)在父级中，具有特殊特性 slot-scope 的 元素必须存在，表示它是作用域插槽的模板。slot-scope 的值将被用作一个临时变量名，此变量接收从子组件传递过来的 prop 对象。

vue-router 路由模式

• 1、hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。

• 2、history : 依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式。

• 3、abstract : 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的
  API，路由会自动强制进入这个模式。

vue路由的钩子函数

首页可以控制导航跳转，beforeEach，afterEach等，一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。

beforeEach主要有3个参数to，from，next。

• to：route即将进入的目标路由对象。
• from：route当前导航正要离开的路由。
• next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数；可以控制网页的跳转。