一、所有的vue指令都以v-开头,格式:
<元素标签 v-指令名=“”></元素标签>
二、常见指令
1、v-text
渲染data数据,格式:<元素标签 v-text=“data属性名”></元素标签>
注:在元素标签中间所写的内容不会显示。
2、v-html
将字符串结构的dom,转化为dom渲染在页面中。
格式:<元素标签 v-text=“data属性名”></元素标签>
注:在元素标签中间所写的内容不会显示。
3、v-show
可以根据值得真假控制元素的显示与隐藏。
原理:通过控制值得真假,控制元素的display属性,none或者block。
4、v-if
通过控制值得真假,控制元素的销毁与重建。可以单独使用,可以一直编写v-if="条件“,条件的值是布尔值。
5、v-else-if
不能添加条件,需要配合v-if或者v-if使用。
6、v-else
不能添加条件,需要配合v-if或者v-else-if使用。
7、v-for
可以对数据进行循环遍历,类似于js里的for循环。
格式:<元素标签 v-for=”(自定义名字,下标索引)in data属性名" :key=”下标索引">{{自定义名字}}<元素标签>
其中自定义名字对应的是data里边的每一项数据,如果是数组的话表示数组的每一项。
key是为了对数据进行快速的内部排序,用到了diff算法。
v-for尽可能不要和v-if在一个元素标签上使用。
8、v-on
主要作用是绑定事件。
格式:<元素标签 v-on:事件方法名="自定义时间名(实参)"></元素标签>
<元素标签 @事件方法名="自定义时间名(实参)"></元素标签>
methods:{
自定义时间名(形参){
//执行代码块
}
}
9、v-bind
动态绑定属性。
格式:<元素标签 v-bind:属性名=“{类名:布尔值}”></元素标签>
<元素标签 :属性名=“{类名:布尔值}”></元素标签>,如果布尔值为true添加类名,为false去除类名。
<元素标签 :属性名=“['类名1‘,{类名2:布尔值}]”></元素标签>,类名1为默认类名,类名2为动态类名。
10、v-mode
绑定表单进行数据的渲染。
<元素标签 v-model=“data属性名”></元素标签>
11、v-pre
跳过当前节点及其子节点,渲染其他元素。
12、v-clock
可以隐藏未编译mustache标签,直到实力准备完毕。
13、v-once
只渲染元素组件一次。