Vue指令总结

v-for：

在vue中可以通过v-for来循环数据的通知循环dom，语法是item in/of items，接收第二个参数是索引 (item,index) of items,还可以循环键值对，第一个参数是value，第二个是key，第三个依然是索引

 

v-on：

在vue中还有v-on来为dom绑定事件，在v-on：后面加上要绑定的事件类型，值里可以执行一些简单javascript表达式：++ -- = ...

可以将一些方法设置在methods里，这样就可以在v-on:click的值里直接写方法名字可以，默认会在方法中传入事件对象，当写方法的时候加了()就可以传参，这个时候如果需要事件对象，那就主动传入$event

v-on绑定的事件可以是任意事件,v-on:可以缩写为@

 

v-model：

用v-model绑定数据后，标签设置默认值无效
用v-model绑定的数据在实例data里必须提前挂载，
因为只有挂载在实例data中的属性才是响应式的，才能进行绑定
v-model只能用在form表单相关的标签

v-model和angularJS里的ng-model一样，只是所绑定的数据必须是事前存在的

 

v-bind：

v-bind的作用是绑定属性的 id，class，style，src...
v-bind:指令可以简写为:
v-html 可以将某一个标签的innerHTML设置为数据，并且可以解析标签
v-bind:src-> :src

v-bind-class：

:class="['btn','btn-'+(activeIndex===index?'primary':'default')]"

v-bind-style：

:style="{backgroundColor:'red',color:'#fff',fontSize:fz} //fz是变量
:style="[{fontSize:'40px'},{background:'red',color:'#fff'}]

 

 

 

v-if：

在Vue中可以使用v-if来控制模板里元素的显示和隐藏，值为true就显示，为false就隐藏

v-if控制的是是否渲染这个节点

当我们需要控制一组元素显示隐藏的时候，可以用template标签将其包裹，将指令设置在template上，等等vm渲染这一组元素的时候，不会渲染template

v-else-if：

v-else-if指令可以实现多分支逻辑

v-else：

当有else分支逻辑的时候，可以给该元素加上v-else指令来控制，v-else会根据上面的那个v-if来控制，效果与v-if相反，注意，一定要紧挨着

 

v-show：

带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display
【注】v-show 不支持 <template> 元素，也不支持 v-else。

 

v-if和v-show的区别：

需要注意的一个地方是：Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这样确实能使Vue变得更快，性能更高，但是有的时候我们需要让实例去更新dom而不是复用，就需要给dom加上不同的key属性，因为vue在判断到底渲染什么的时候，包括哪些dom可以复用，都会参考key值，如果dom表现基本一致，符合复用的条件，但是key值不同，依然不会复用

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

 

v-cloak：

当元素上加上v-cloak指令的时候，在vue没有加载的时候，
这个指令就相当于p标签的一个标签属性，当vue加载完成后，会将这个指令去掉
依靠这个属性可以实现防止{{}}闪烁

回流 和 重绘 reflow和repaint
这个两个玩意儿都是在指当我们操作了页面中的dom结构之后发生的现象，重绘比回流好
diplay:none; 产生回流
visibility:hidden; 产生重绘

 

插值：

{{message}}：

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值
<span>这个将不会改变: {{ message }}</span>

v-text：

不解析标签会显示为<h1>hello wold</h1>

v-html：

解析标签会显示成H1标签文本

v-pre：

 跳过元素和其子元素的编译过程，可以用来显示mustache语句