Vue【三】vue指令语法 一，vue基础语法中的v-bind、v-on、v-if、v-show、v-else、v-else-if这六个指令语法的介绍以及基本使用。

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可以缩写为@

1. 最基本的语法
   <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
    },
  }

2. 需要传递参数
   <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中提供的事件修饰符：

1. .prevent 阻止默认行为
2. .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 功能: 控制盒子的显示隐藏

1. v-show

   语法: v-show=“布尔值” (true显示, false隐藏)

   原理: 实质是在控制元素的 css 样式, display: none;

2. 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

1. v-else-if
   • 限制：前一兄弟元素必须有 v-if 或 v-else-if。
2. 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这六个指令语法的介绍以及基本使用。