Vue指令
1 . Vue语法-插值表达式
- 在DOM中插入内容
- 语法:{{表达式/vue变量}}
- vue的变量在data函数内, return的对象
2 .Vue指令-v-bind:
- 给标签属性赋Vue变量
- 语法:v-bind:属性名=“vue变量”
- 简写::属性名=“vue变量”
3.Vue指令-v-on事件绑定
- 绑定绑定事件
- 语法:v-on:事件名="methods中的函数"
- 语法:v-on:事件名="methods中的函数(参数)"
- 简写:@事件名="methods中的函数(参数)/methods中的函数"
4.Vue指令-事件对象
- vue事件处理函数中, 拿到事件对象(函数中的参数)
- 语法1:无传参, 通过形参直接接收
- 语法2:传参, 通过$event指代事件对象传给事件处理函数
<template>
<div>
//语法1
<a @click="one" href="http://www.baidu.com">阻止百度</a>
<hr>
//语法2
<a @click="two(10, $event)" href="http://www.baidu.com">阻止去百度</a>
</div>
</template>
<script>
export default {
methods: {
one(e){
e.preventDefault()
},
two(num, e){
e.preventDefault()
}
}
}
</script>
5.Vue指令-鼠标修饰符
- 语法:@事件名.修饰符="methods里函数"
- 修饰符:.stop - 阻止事件冒泡
- .prevent - 阻止默认行为
6.Vue指令-按键修饰符
- 给键盘事件, 绑定修饰符
- 语法:
- @keyup.enter - 监测回车按键
- @keyup.esc - 监测返回按键
7.Vue指令-v-model双向绑定1
- 把表单值和Vue变量双向绑定(一定要有value值,因为双向绑定的是value)
- 语法:v-model="vue数据变量"
- 注意:本阶段v-model只能用在表单元素上
8.Vue指令-v-model双向绑定2
- 在复选框使用(重点: 有区别)
- 在单选框使用:(有value)
- 下拉菜单:(有value)
1> 遇到复选框,vue变量应该为数组
2> 非数组 - 关联的是checked属性
3> 数组 - 关联的是value属性
9.Vue指令-v-model修饰符
语法:v-model.修饰符="vue数据变量"
1> .number 以parseFloat转成数字类型
2> .trim 去除首尾空白字符
3> .lazy 在change时触发而非inupt时
10.Vue指令-v-html
- 设置内容,这个命令会识别html的标签
- 语法:v-html="vue数据变量"
- 注意: 会覆盖插值表达式
11.Vue指令-v-show和v-if
控制标签显示或隐藏
语法:v-show="vue变量"
v-if="vue变量"
两者区别:
- v-show 用的display:none隐藏 (频繁切换使用)
- v-if 直接从DOM树上移除(删除)
- 高级的用法(v-if 与 v-else一起搭配使用,方便通过变量控制一套标签出现/隐藏)
12.Vue指令-v-for
数据循环生成标签(可以遍历数组 / 对象 / 数字 / 字符串)
语法:
- v-for="(值变量, 索引变量) in 目标结构" :key = "值变量"
- v-for="值变量 in 目标结构" :key="值变量"
内容会持续更新!!!