Vue的一些基本指令总结

指令：以v-开头的称之为vue的指令（directive）
指令的作用：就是用来操作dom

1.v-for：渲染数据和模板快

2.v-on:用来绑定点击事件
v-on:click,也可以简写成@click

`事件的修饰符：

.stop         可以阻止事件的冒泡
.prevent   	  可以取消事件的默认行为
.once		  只会触发一次
.self		  只会自身触发

在运用中@xxx.prevent 就可以`

3.v-model:实现双向数据绑定，监听更改后的数据

v-model指令只能在表单域（input/textarea/checkbox等）里面，不能用在（例如：div）上面

v-model的修饰符：

.lazy 默认是同步更新，如果加了.lazy修饰符，等光标离开以后才会同步更新
.number 这个值无法被parseFloat解析的时候，会原样返回。如果能解析，返回解析后的数值
.trim 去掉首尾的空格

v-model的原理：1.给输入框绑定value值 2.绑定input事件（变量=输入框里面的值）

4.v-bind:添加class属性 可以简写为 ：class

样式处理 -class 和 style，使用v-bind就可以体现出来

5.v-cloak:配合css样式，实现{{}}闪烁的问题


6.v-text:如果数据中有html标签会将html标签原样输出来

7.v-html:用法和v-text类似,但是v-html是可以你解析标签的,建议不要使用，性能消耗比v-text高

8.v-pre:跳过这个元素和它的子元素的编译过程。可以用来显示原始 标签。跳过大量没有指令的节点会加快编译。和v-text输出的结果一样的

9.v-if 和 v-show
v-if：根据表达式的值的真假条件，直接将dom销毁或者重建

v-show：根据表达式之真假值，切换元素的 display CSS 属性

10. 在<template> 元素上使用 v-if 条件渲染分组

因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 元素。

<template v-if="msg">
  <h1>hello world</h1>
  <p>hello 1</p>
  <p>hello 2</p>
</template>