一、Vue指令的规定
- 所有的Vue指令必须以v-开头,后面带命令动词。
- 指令的参数:v-指令动词.参数
- 指令的修饰符:v-指令动词:修饰符
二、绑定HTML属性
1、完整格式:<a v-bind:href=“url”>链接</a>
2、简化格式:<a :href=“url”>链接</a>
3、利用对象同时绑定多个属性:<a v-bind=“{href:url,title:ti,target:open}”></a>
,上诉代码中url、ti、open都是Vue数据区的变量。
三、绑定事件
- 完整格式:
<button v-on:click=“btnClick”>确定</button>
- 简化格式:
<button @click=“btnClick”>确定</button>
- v-on指令的修饰符:
(1) 取消事件的传递
(2) 实现事件的捕获传递<button v-on:click.stop=“btnClick”>确定</button>
(3) 取消对象的默认行为<button v-on:click.capture=“btnClick”>确定</button>
(4) 键盘码/键盘别名<button @click.prevent>提交数据</button>
键盘按键 | 键盘码 | 键盘别名 |
---|---|---|
ESC | 27 | esc |
Tab | 9 | tab |
Enter | 13 | enter |
Space | 32 | space |
Left | 37 | left |
Up | 38 | up |
Right | 39 | right |
Down | 40 | down |
A | 65 | |
a | 97 | |
0 | 48 |
四、为元素绑定CSS样式
(1)通过class属性绑定CSS样式:
- 利用普通变量:
<div :class="sty01"></div> <!-- sty01是变量 -->
- 利用数组:
<div :class="[vm,vn]"></div> <!-- vm和vn是变量 -->
- 利用对象:
<div :class="{s01:isS01,s02:isS02}"></div> <!-- s01和s02是类名,isS01和isS02是逻辑变量 -->
(2)通过style属性绑定CSS样式:
- 利用普通变量:
<div :style="sty01"></div>
<!-- sty01是变量
A .sty01是字符串:sty01:'width:200px; backgroundColor:#ff5857'
B .sty01是对象:sty01:{width:'200px'; backgroundColor:'#ff5857'} -->
- 利用数组:
<div :style="[vm,vn]"></div>
<!-- vm和vn是变量
vm:{width:'200px',height:'300px'},
vm:{'background-color':'#ff5857'} -->
- 利用对象:
<div :style="{css-name:css-value,css-name:css-value}"></div>
<!-- css-name是CSS属性名,css-value是取值为CSS属性值的变量 -->
<div :style=“{width:wi,height:he,backgroundColor:bgc}”> </div>
<!-- wi:'200px',
he:'300px',
bgc:'#ff5857' -->
注意:
上述三种绑定方式中,取值为对象时,键名都是CSS属性名。此时若CSS属性名用引号引住,则可以书写CSS完整的属性名;若CSS属性名不用引号引住,则必须书写为驼峰式命名。
例:
<div :style="{width:'200px','background-color':'#ff5857'}"></div>
<div :style="{width:'200px',backgroundColor:'#ff5857'}"></div>
五、利用v-model指令为表单元素绑定数据
(1)为文本框绑定数据:<input type=“text” />
- 绑定方法:
<input type=“text” v-model=“message” />
- 实现本质:
<input type="text" :value="message" @input="ok" />
ok(){ this.message=this.$el.querySelector("input[type=text]").value;}
- 利用v-model绑定在文本框上的变量取值为字符串。
- v-model也可以为密码域、多行文本域(< textarea>< /textarea>)绑定数据。
(2)为单选框绑定数据:<input type=“radio” />
1. 为单一的一个单选框绑定数据:将变量绑定到checked属性上。
<input type=“radio” :checked=“ok” />
ok:true/false //为checked属性绑定的变量取值为逻辑值
2. 为成套的多个单选框绑定数据:
A .多个互斥选择的单选框必须利用v-model指令绑定同一个变量。【代替了HTML
中name属性必须一致的特点】
B .将v-model绑定的变量设置为某个单选框value属性的取值,则该单选框默认处
于选中状态。【代替了HTML中checked属性的功能】
C .用户所选中的单选框的value属性的取值会被v-model绑定的变量获取。
3. 为复选框绑定数据:<input type=“checkbox” />
A. 为单一的一个复选框绑定数据:利用v-model绑定一个逻辑变量。
B. 为成套的多个复选框绑定数据:利用v-model绑定一个数组。
(3)为列表/菜单绑定数据:
1. HTML中列表/菜单的实现:
<select multiple size="8">
<option value="html">HTML</option>
</select>
A .multiple,放置性属性。具备该属性,则表单元素变为列表,可以实现多选。借助Ctrl键选中多个不连续的列表项;借助Shift键选中多个连续的列表项。
B .size,在multiple实现存在的前提下,设置可以显示的条目个数。
2. 利用v-model绑定变量:
A .菜单实现单选,利用v-model指令绑定一个字符变量。该字符变量的取值可以是菜单项value属性的取值,也可以是菜单项的文本内容。
B .列表实现多选,利用v-model指令绑定一个数组。
六、条件渲染指令
- v-if、v-else、v-else-if:当条件成立时,指定元素被渲染到页面上(可见),否则指定元素
不渲染在页面上(不可见)。 - v-if和v-show区别:v-show本质是利用CSS中的display:none来实现的。v-if本质是通
过重新渲染页面来实现的。频繁切换于显示和隐藏之间的对象最好使用效率较高的v-show。
七、循环渲染指令
1. 利用v-for指令遍历数组
v-for="(item,index) in 数组名"
v-for="(item,index) of 数组名"
//其中:item表示数组元素内容;index表示索引值。
- v-for指令可以用于被重复渲染的元素上。
<li v-for="(item,index) in animal">{{index+1}}.{{item}}</li>
- v-for指令可以用于被重复渲染的父元素上,此时多使用< template>标记对。
<template v-for="(item,index) in animal">
<li>{{item}}</li>
</template>
2. 利用v-for指令遍历对象
v-for="(item,key,index) in 对象名"
//其中:item表示键值;key表示键名;index表示索引值。