VUE指令

一.指令是什么

1.指令的本质就是自定义的属性

2.指令的格式：v-(?)

二.数据填充指令

1.v-text 填充纯文本

2.v-html 填充HTML片段

相比于插值表达式更加简洁

 v-text：

1.作用与插值表达式类似，用于将数据填充到标签中

2.将数据中的HTML标签一并输出

3.v-text的值会将标签中的原有内容覆盖

v-html：

1.用于将HTML片段填充到标签中

2.输出纯文本，不会对html再进行解析。

v-model：

双向数据绑定：

1.当数据发生变化时，视图同时发生变化

2.当视图发生变化时数据也同步发生变化

使用场景：

在<input><select><textarea><components>中使用

v-bind：

1.属性绑定：v-bind用来响应地更新HTML属性，可以将v-bind：href缩写为：href

2.  样式绑定：通过v-bind：class={键：值} 绑定对象

键代表类名

值：定义在data中

值为：true  显示类名

值为：false  不显示类名

3.行内样式绑定：

对象语法：<div v-bind:style="{}"></div>

数组语法：<div v-bind:style="[]"></div>

v-show:

根据条件展示元素。使这块内容只会在指令表达式返回true时被渲染。条件不足时隐藏

v-if:

根据条件展示元素。使这块内容只会在指令表达式返回true时被渲染。

v-else:元素必须紧跟在v-if 或者v-else-if的元素后面，否则不识别。

v-else-if:充当v-if的else-if块，可以连续使用；

v-if与v-show区别：

前者动态添加，当值是false时，完全移除改元素；

后者则是将元素隐藏起来，并没有移除。

v-for:

循环数组：

item：第一个参数---数组中的元素

                第二个参数：-----改元素对应下标