Vue【三】vue指令语法 一
文章目录
前言
vue指令, 实质上就是特殊的 html 标签属性, 特点: v- 开头。
每个 v- 开头的指令, 都有着自己独立的功能, 将来vue解析时, 会根据不同的指令提供不同的功能
一、v-bind
- 描述:插值表达式不能用在html的属性上,如果想要动态的设置html元素的属性,需要使用v-bind指令。
- 作用:动态的设置html的属性。
- 语法:
v-bind:title="msg"
- 简写:
:title="msg"
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
二、v-on
2.1、基本用法
语法:(三种)
1. v-on:事件名=“要执行的少量代码"
2. v-on:事件名=“methods中的函数名"
3. v-on:事件名=“methods中的函数名(实参)"
v-on可以缩写为@
- 最基本的语法
<button v-on:事件名="事件函数">按钮</button>
,需要在methods中提供事件处理函数
<button v-on:click="fn">btn1</button>
<button v-on:click="fn1">btn2</button>
// 提供方法
methods: {
fn () {
console.log('你好啊')
// console.log(this)
this.money++
},
fn1 () {
this.money += 10000
},
}
- 需要传递参数
<button v-on:事件名="事件函数(参数)">按钮</button>
,需要在methods中提供事件函数,接受参数。
<button v-on:click="addMoney(1)">btn1</button>
<button v-on:click="addMoney(10000)">btn2</button>
methods: {
addMoney (money) {
this.money += money
}
}
3.如果事件的逻辑足够简单,可以不提供函数
<button v-on:click="money++">btn1</button>
<button v-on:click="money += 10000">btn2</button>
2.2、vue中获取事件对象
需求: 默认a标签点击会跳走, 希望阻止默认的跳转, 阻止默认行为 e.preventDefault()
vue中获取事件对象
(1) 没有传参, 通过形参接收 e
(2) 传参了, 通过$event指代事件对象 e
<template>
<div id="app">
<a @click="fn" href="http://www.baidu.com">去百度</a>
<a @click="fn2(100, $event)" href="http://www.baidu.com">去百度2</a>
</div>
</template>
<script>
export default {
methods: {
fn(e) {
e.preventDefault()
},
fn2(num, e) {
e.preventDefault()
}
}
}
</script>
注:如果事件函数既要传参也要获取事件对象,形参必须传$event
2.3、v-on事件修饰符
vue中提供的事件修饰符:
- .prevent 阻止默认行为
- .stop 阻止冒泡
<div id="app">
<a @click.prevent="fn" href="http://www.baidu.com">去百度</a>
</div>
2.4、按键修饰符
需求: 用户输入内容, 回车, 打印输入的内容
在监听键盘事件时,我们经常需要判断详细的按键。此时,可以为键盘相关的事件添加按键修饰符
- @keyup.enter 回车
- @keyup.esc 返回
<div id="app">
<input type="text" @keyup="fn"> <hr>
<input type="text" @keyup.enter="fn2">
</div>
三、v-if与v-show
3.1、基本使用
v-show 和 v-if 功能: 控制盒子的显示隐藏
-
v-show
语法: v-show=“布尔值” (true显示, false隐藏)
原理: 实质是在控制元素的 css 样式,
display: none;
-
v-if
语法: v-if=“布尔值” (true显示, false隐藏)
原理: 实质是在动态的创建 或者 删除元素节点
应用场景:
-
如果是频繁的切换显示隐藏, 用 v-show
v-if, 频繁切换会大量的创建和删除元素, 消耗性能
-
如果是不用频繁切换, 要么显示, 要么隐藏的情况, 适合于用 v-if
v-if 是惰性的, 如果初始值为 false, 那么这些元素就直接不创建了, 节省一些初始渲染开销
<template>
<div id="app">
<h1 v-show="isShow">v-show盒子-{{ msg }}</h1>
<h1 v-if="isShow">v-if盒子-{{ msg }}</h1>
</div>
</template>
3.2、v-else与v-else-if
- v-else-if
- 限制:前一兄弟元素必须有 v-if 或 v-else-if。
- v-else
- 限制:前一兄弟元素必须有 v-if 或 v-else-if。
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
总结
本文主要讲了vue基础语法中的v-bind、v-on、v-if、v-show、v-else、v-else-if这六个指令语法的介绍以及基本使用。