Vue.js笔记（2）

Vue.js指令

Vue中有多个指令，这些指令通过DOM渲染，从而显示在HTML页面上。

1、v-if 和 v-else
v-if 指令是条件渲染指令，根据表达式的真假（true or false）来插入和删除元素：true表示显示该元素，false表示隐藏该元素。
v-if 和 v-else 可以搭配使用，也可以单独使用（情况较少）。
例如：

2、v-show
v-show 用来控制切换元素的显示和隐藏，用法和v-if 相似，但是他们的原理是不同的。v-if 仅仅是控制显示和隐藏的效果，而v-show则会渲染到style中，相比较而言，v-show更使用于频繁切换。
例如：

这个时候我们去看浏览器的调试工具f12，明显可以看到，v-show已经渲染到了style属性中：

手动调试一下会发现v-show依旧生效（默认状态下，true的时候是没有style属性的，我这边仅仅是为了演示）

3、v-on
v-on为元素绑定事件监听，语法规则为：v-on：事件名称=“函数名称”，函数定义在methods配置项中。
例如我们创建一个点击事件：

注意：v-on： 可以简写为 @

v-on同样会渲染DOM的style

4、v-model
v-model 可以实现表单输入和应用状态之间的数据双向绑定。
这里的双向绑定指的是vue实例中的data与其渲染的DOM元素上的内容一致，两者无论谁改变，另一方都会相应的更新为相同的数据。

注意：v-model指令只能用在、、等这些表单元素上。

例如：

同样是渲染到了DOM中

5、v-bind
v-bind 可以动态绑定标签的属性，v-bind：可以只用 ：表示。
通俗的讲，v-bind实现了标签属性与data的相互绑定。
例如：

6、v-for
v-for通过遍历data中的数据，然后渲染到页面进行显示。
语法规则： v-for = “（item,index in items）”
item：表示的是每次遍历到的元素
index：表示的是元素的索引
items：表示的是数组或者对象

例如：

写入DOM

ok！常用的v-指令就是这些，vue小白，欢迎大佬指点！