学习笔记：Vue指令 20210419

Vue的指令

1、v-cloak :他会在Vue实例借宿编译时从绑定的HTML元素上移除，经常和display：none结合使用

{{message}}

------

作用：

当网速慢的时候，Vue.js 文件还没有加载完全,页面就会显示{{message}},直到加载完全才会替换，这个过程屏幕会闪动，加上v-cloak和display:none,就可以解决了。

2、v-once:所在的元素及内容只被渲染一次，首次渲染后，不会因为数据变化而渲染，被视为静态内容。

3、Vue出于效率考虑，会尽可能的复用已有的元素而非重新渲染。也就是切换内容，但是标签不变，如果要也替换标签，就需要使用key属性，key属性必须是唯一的。

4、v-if 和v-show 基本一致，区别：

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

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

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

总结：v-if有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。

即 v-if适用于不经常变化的，v-show适用于经常变换的条件的。注意：v-show不能在<template>上使用

5.v-for,循环遍历,对象和数组都可以循环遍历

• {{book.name}}

• {{book.name}}

• {{index}}-{{book.name}}

• {{index}}-{{book.name}}

1

• {{book.name}}
• {{book.author}}

5 v-bind 一般用于 对象语法：true,false 1.

//active 2.

//active 3.

// static active 数组语法： 4.

//active error 5.

//active error 6.

//active error 在组件上使用 内联样式：

---

转自：https://www.cnblogs.com/xuqp/p/9175131.html