Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。

Vue常用指令

1、v-if：根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。

v-on 可以绑定多个事件，可以用键值对的形式事件类型：事件名如果绑定是多个相同事件，直接用逗号分隔就行

v-for优先于v-if （解析如下）
第一种<p v-for="child in childer" v-if="isFolder">{{child.tltle}}</p> 如果v-for和v-if二者同时使用。第一种每次渲染都会执行先循环后判断。无论循环多少次都无法避免。（不推荐，浪费性能）
第二种<template v-if="isFolder"><p v-for="child in childer">{{child.tltle}}</p></template>第二种情况就是在外层嵌套template，然后判读if条件，条件成立则渲染for循环，否则执行空函数。

Key 属性的作用是在数据层和视图层之间建立一一对应关系, 方便后期对页面进行局部更新. 如果某一条数据发生改变, 只更新当前数据对应的DOM 元素。

v-show 是通过css 的方式来隐藏元素, 而v-if 是根据条件是否成立决定是否要创建元素. 如果某个元素需要频繁切换显示状态的话, 建议是使用v-show, 因为频繁创建销毁DOM 需要性能开销。

相同点：

v-show和v-if都能控制元素的显示和隐藏。 不同点：
实现本质方法不同v-show本质就是通过设置css中的display设置为none，控制隐藏v-if是动态的向DOM树内添加或者删除DOM元素
编译的区别v-show其实就是在控制cssv-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件
编译的条件v-show都会编译，初始值为false，只是将display设为none，但它也编译了v-if初始值为false，就不会编译了
性能比较v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一。 注意点：
因为v-show实际是操作display:""或者none，当css本身有display：none时，v-show无法让显示 总结（适用场景）：
如果要频繁切换某节点时，使用v-show（无论true或者false初始都会进行渲染，此后通过css来控制显示隐藏，因此切换开销比较小，初始开销较大），如果不需要频繁切换某节点时，使用v-if（因为懒加载，初始为false时，不会渲染，但是因为它是通过添加和删除dom元素来控制显示和隐藏的，因此初始渲染开销较小，切换开销比较大）

提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标.可以是CSS选择器，也可以是一个HTMLElement实例

使用v-html 或v-text 替代插值表达式; 使用v-clack 解决插值表达式闪烁, 第一步:声明属性选择器[v-clack]{display:none} 第二步:在插值表达式所在标签添加属性v-clack