VUE（三）：基础指令与表达式

一、指令

1.什么是指令

• 指令 (Directives) 是带有 v- 前缀的特殊属性。例如在入门案例中的v-model，代表双向绑定。指令中封装了一些DOM行为，指令可以绑定一些属性值，根据不同的值，框架会进行相关DOM操作的绑定。

• 它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性

2.常见的VUE指令

指令	说明
v-if	v-if是条件渲染指令，它根据表达式的真假来删除和插入元素,基本语法： v-if=“expression”，expression是一个返回布尔值的表达式， 表达式可以是一个布尔属性，也可以是一个返回布尔的运算式。 只有布尔值为true时相关html元素才会被渲染
v-else	v-else与v-if判断条件相反，v-if条件不成立则会显示v-else内容
v-if-else	如果有多个判断条件时，则可以使用v-if-else进行连续判断
v-show	不管条件是否成立都会渲染html元素，和v-if区别在于，v-show条件不成立时仅仅是在 html元素上添加了display:none属性，而v-if则会完全不产生这个html元素
v-for	遍历一个集合来渲染一个列表，v-for=“item in list”，list是一个集合，item是当前遍历 集合的某一个元素 当有两个参数时：v-for="(item,index) in list"其中index是当前循环的索引，下标从0开始 （关于更详细参数说明请访问：https://www.cnblogs.com/cn-oldboy/p/12689150.html）
v-on	v-on用于监听DOM事件，也就是说该html元素绑定的js函数 例如给button添加点击事件<button v-on:click=“show”> v-on也可以使用简写，用@符号代替:<button @click=“show”>
v-bind	将一个数据绑定在一个dom的属性上，通过v-bind可以实现属性的动态绑定 例如：<img v-bind:src=“img”> 这里img的值可以动态的从vue实例中(例如data)获取 简写方式为：<img :src=“img”>
v-text	只是单纯的将内容绑定到html元素中，例如：<p v-text = “h”></p> 相当于js函数的innerText
v-html	可以解析html标签元素，例如<p v-html = " <h1>啦啦啦</h1&g