Vue从零到实战

码喽小郑

已于 2024-07-17 14:06:31 修改

阅读量1.4k

点赞数 35

分类专栏： Vue从0到实战文章标签： vue.js

于 2024-07-10 22:40:26 首次发布

本文链接：https://blog.youkuaiyun.com/m0_74948742/article/details/140333056

版权

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。

非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨

前言

本栏目是根据黑马程序员的网课来整理的笔记，也会结合我的一些个人见解，来记录自己学习Vue的过程，俗话说，好记性不如烂笔头，小郑喜欢在学习的过程中记笔记，记下自己在学习过程中难以理解的知识点，反复练习，加深印象，小郑打算在这个暑假的第一个月学习完Vue从0到1实现项目，希望广大网友一起监督学习，互相进步!

二、v-bind对样式控制的增强-操作class

一、什么是指令修饰符？

所谓指令修饰符就是通过“.”指明一些指令后缀不同的后缀封装了不同的处理操作 —> 简化代码

1. 按键修饰符

@keyup.enter —>当点击enter键的时候才触发

  <div id="app">
    <h3>@keyup.enter  →  监听键盘回车事件</h3>
    <input v-model="username" type="text">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: ''
      },
      methods: {
        
      }
    })
  </script>

2. v-model修饰符

v-model.trim —>去除首位空格
v-model.number —>转数字

3. 事件修饰符

@事件名.stop —> 阻止冒泡
@事件名.prevent —>阻止默认行为
@事件名.stop.prevent —>可以连用即阻止事件冒泡也阻止默认行为

二、v-bind对样式控制的增强-操作class

为了方便开发者进行样式控制， Vue 扩展了 v-bind 的语法，可以针对 class 类名 和 style 行内样式 进行控制。

1.语法

<div> :class = "对象/数组">这是一个div</div>

2.对象语法

当class动态绑定的是对象时，键就是类名，值就是布尔值，如果值是true，就有这个类，否则没有这个类

<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>

适用场景：一个类名，来回切换

3.数组语法

当class动态绑定的是数组时 → 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表

<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>

使用场景:批量添加或删除类

三、京东秒杀-tab栏切换导航高亮

1.需求：

当我们点击哪个tab页签时，哪个tab页签就高亮

2.核心思路:

1.使用v-for指令获取整个数组的内容，记得后面加上 :key 这是一个习惯问题，可以使代码更加优化

2.准备一个下标，因为此时的高亮是整个tab都有的，通过下标来索引，如果下标等于点击的下标，那么高亮就可以随之改变使用 <div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>这个语法

3.代码展示

<style>
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      display: flex;
      border-bottom: 2p

最低0.47元/天解锁文章