一，知识点概览

  • 基本使用，组件使用 —— 常用，必须会
  • 高级特性 —— 不常用，但体现深度
  • Vuex 和 Vue-router 使用

二，学习方式

看文档的缺点：

  1. 比较低效，不容易看懂。
  2. 文档是一个备忘录，给会用的人进行查阅，并不是入门教程。
  3. 文档全面冗长且细节过多，不能突出面试考点。

看视频：

  1. 节约时间，效率比较高。
  2. 能够容易抓住重点，知道哪些地方经常会犯错，避免少采坑。
  3. 缺点：相当于是主讲老师的二次输出，可能会缺少很多的细节，挑重要的点去讲，某些基础点不是很详细。

三、基本知识点

  1. computed 和 watch

    1. computed 有缓存，data 不变则不会重新计算
    2. watch 如何进行深度监听？（handler函数 + deep: true）
    3. watch 监听引用类型，拿不到 oldValue

  2. class 和 style

    1. 使用动态属性
    2. 使用驼峰式写法

  3. 条件渲染

    1. v-if、v-else 的用法，可使用变量， 也可以使用 === 表达式（判断条件是否成立，即是否展示dom）
    2. v-if 和 v-show 的区别？（v-if 直接删除 dom，v-show 将 dom 的 display 置为 none，dom 依然存在）
    3. v-if 和 v-show 的使用场景？
      1. v-if 适用于不频繁切换的场景，比较耗性能。
      2. v—show 适用于频繁切换的场景。

  4. 循环（列表）渲染

    1. 如何遍历对象？—— 可以使用 v-for（ 对象（value, key, index）、数组（item, index））
    2. key 的重要性。key不能乱写（比如 random 或者 index）
    3. v-for 和 v-if 不能一起使用（v-for 的优先级高于 v-if, 循环结束的时候再进行 v-if 判断，有几次循环，就会判断几次，通常情况下，v-if 放在 v-for 的父级，先进行判断，再进行渲染 ）

  5. 事件

（1）event 参数，自定义参数

  1. // 第一种情况：定义一个事件，不带参数，例如 <div @click="handleClick"></div>
  2. // methods里面
  3.   handleClick (event) {
  4.         // 1,event 事件是原生的
  5.         // 2,事件被挂载到当前元素
  6.   }
  8. // 第二种情况：定义一个事件，带参数，例如 <div @click="handleClick(2, $event)"></div>
  9. // methods里面
  10.   handleClick (val, event) {
  11.         // val是形参，接受传过来的2
  12.         // event事件仍然是原生的
  13.   }

（2）事件修饰符，案件修饰符

  1. // 事件修饰符
  3. <!-- 阻止单击事件继续传播 -->
  4. <a v-on:click.stop="doThis"></a>
  6. <!-- 提交事件不再重载页面 -->
  7. <form v-on:submit.prevent="onSubmit">
  9. <!-- 修饰符可以串联 -->
  10.  <a @click.stop.prevent="doThis"></a>
  12.  <!-- 只有修饰符 -->
  13.  <form @click:submit.prevent></form>
  15.  <!-- 添加事件监听器使用事件捕获模式 -->
  16.  <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
  17.  <div @click.capture="doThis">...</div>
  19.  <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
  20.  <!-- 即事件不是从内部元素触发的 -->
  21.  <div @click.self="doThis">...</div>
// 按键修饰符

<!-- 即使 Alt 或 Shift 被一同按下时也会触发  -->
<div @click.ctrl="onClick">...</div>

<!-- 有且只有 Ctrl 被按下的时候才被触发  -->
<div @click.ctrl.exact="onCCtrlClick">...</div>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<div @click.exact="onClick">click</div>
  1. 【观察】事件被绑定到了哪里？
  1. 表单
    1. v-model
    2. 常见表单项：extarea、checkbox、radio、select
    3. 修饰符 lazy、number、trim