【博学谷学习记录】超强总结 用心分享|前端学习w15- vue指令基础知识

hello 小洋人回来继续学习了🤭

今天来复习vue基础指令

介绍

vue指令: 特殊的 html 标签属性, 特点: v- 开头

每个 v- 开头的指令, 都有着自己独立的功能, 将来vue解析时, 会根据不同的指令提供不同的功能

v-bind

说明：插值表达式不能用在html的属性上，想要动态的设置html元素属性，需要使用v-bind指令

作用： 动态的设置html的标签属性

语法： v-bind:属性名="值"

简写： :属性名="值"

v-on

vue指令-v-on

作用：注册事件

语法：

1. v-on:事件名=“要执行的少量代码"

2. v-on:事件名=“methods中的函数名"

3. v-on:事件名=“methods中的函数名(实参)"

注意：事件处理函数在methods中提供 简写：v-on 可以 简写 成 @

<!-- 1、简单逻辑直接写 -->
    <button v-on:click="money++">搬砖</button>
    <!-- 2\函数逻辑 -->
    <button v-on:click="addMoney">开小卖部</button>
    <!-- 3、传参数 -->
    <button v-on:click="eat('小米')">吃个饭</button>
    <!-- 简写：v-on 可以 简写 成 @ -->
    <button @click="eat('大米')">吃个饭</button>

 // 对象，存放所有方法
  methods: {
    addMoney() {
      this.money = this.money + 100;
    },
    eat(person) {
      if (person === "小米") {
        alert("来吃一顿");
        this.money -= 100;
      }
      if (person === "大米") {
        alert("小吃一下");
        this.money -= 10;
      }

ps： vue中获取事件对象

vue中获取事件对象：

(1) 没有传参, 通过形参接收 e

(2) 传参了, 通过$event指代事件对象 e

事件修饰符

事件修饰符：vue提供事件修饰符，可以快速阻止默认行为或阻止冒泡

.prevent 阻止默认行为， .stop 阻止冒泡

按键修饰符：

在监听键盘事件时，我们经常需要判断详细的按键。可用按键修饰符。

需求: 用户输入内容, 回车时, 打印输入的内容。

• @keyup.enter 监听回车键

• @keyup.esc 监听返回键

v-if

v-show 和 v-if 功能: 控制盒子的显示隐藏

1. v-show

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

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

2. v-if

语法: v-if="布尔值" (true显示, false隐藏)

原理: 实质是在动态的创建 或者 删除元素节点

应用场景:

1. 如果是频繁的切换显示隐藏, 用 v-show

(v-show, 只是控制css样式，而v-if, 频繁切换会大量的创建和删除元素, 消耗性能)

2. 如果是不用频繁切换, 要么显示, 要么隐藏的情况, 适合于用 v-if

(v-if 是惰性的, 如果初始值为 false, 那么这些元素就直接不创建了, 节省一些初始渲染开销)

      <div v-show="isShow" class="container">

export default {
  data() {
    return {
      isShow: true,
    };
  },
};
</script>

v-model

给表单元素使用, 双向数据绑定 语法: v-model.修饰符="Vue数据变量"

l .number 转数字，以parseFloat转成数字类型

l .trim 去除首尾空白字符 l .lazy 在change时触发而非input时

好了 下周继续学习吧 不偷懒了