vue基础知识点

v-if vs v-show

1.v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

2.v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

3.v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

<div>
  <a v-if=""></a>
  <a v-else-if=""></a>
  <a v-else=""></a>
  <a v-show=""></a>
</div>

循环（列表）渲染

v-for既可以遍历数组，也可以遍历对象
数组举例： v-for="(item,idex) in listArr" :key="item.id"
对象举例： v-for="(val,key,index) in listObj" :key="key"
v-for和v-if不能在一块用(不建议一起用)
a.v-for比v-if优先级高
b.写一起v-for循环了多少次，v-if就判断了多少次
c.利用标签错开写
key值的重要性，作为渲染时的唯一标识，不能使用（如random、index）最好能和业务逻辑相关（如id）

const listArr = [
  {id:1, title:'标题'}
]
<li v-for="(item, index) in listArr" :key="item.id">
 {{item.index}}-{{item.id}}-{{item.title}}
</li>

遍历对象

const listObj = {
  1:{titile:'标题'}
}
<li v-for="(val, key, index) in listObj" :key="key">
  {{index}}-{{key}}-{{val}}
</li>

事件知识点

不需要传参数的可以直接在methods方法的对应事件函数中直接获取获取
举例 @click="increment1" increment1(event){}
需要传参数的，需要把event参数带过去 $event 举例 @click="increment2(2,$ event)" increment2(val,event){}
event
- event是原生的
- 事件被挂载到当前元素
- event.target 事件是在哪个位置监听的
- event.currentTarget 事件是在哪个位置触发的

事件修饰符

//阻止单击事件继续进行传播
<a v-on:click.stop=""></a>
//提交事件不再重载页面
<form v-on:submit.prevent=""></form>
//修饰符可以串联
<a v-on:click.stop.prevent=""></a>
//只有修饰符
<form v-on:submit.prevent></form>
//添加事件监听时使用事件捕捉模式
//即元素内部触发的事件先在此处理，然后才交由内部元素进行处理
<a v-on:click.capture=""></a>
//只当 event.target 是当前元素自身时触发处理函数
//即事件不是从元素内部触发的
<a v-on:click.self=""></a>

按键修饰符

//只有 alt 和 shift 同时按下时触发
<button @click.ctrl=""></buton>
//只有 ctrl 按下时触发
<button @click.ctrl.exact=""></buton>
//没有任何系统修饰符按下时触发
<button @click.exact=""></buton>