• vue-2

    一、文章内容概括

    1.指令补充

    1. 指令修饰符
    2. v-bind对样式增强的操作
    3. v-model应用于其他表单元素

    2.computed计算属性

    1. 基础语法
    2. 计算属性vs方法
    3. 计算属性的完整写法
    4. 成绩案例

    3.watch侦听器

    1. 基础写法
    2. 完整写法

    4.综合案例 （演示）

    1. 渲染 / 删除 / 修改数量 / 全选 / 反选 / 统计总价 / 持久化

    二、指令修饰符

    1.什么是指令修饰符？

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

    2.按键修饰符

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

    代码演示：

        <div id="app">
        <h3>@keyup.enter → 监听键盘回车事件</h3>
        <input @keyup.enter="fun" 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: {
                fun() {
                    console.log(this.username);
                }
            }
        })
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    等价于：

        <div id="app">
        <h3>@keyup.enter → 监听键盘回车事件</h3>
        <input @keyup="fun" 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: {
                fun(e) {
                    if (e.key !== "Enter") {
                        return;
                    }
                    console.log(this.username);
                }
            }
        })
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    3.v-model修饰符

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

    4.事件修饰符

    • @事件名.stop —> 阻止冒泡
    • @事件名.prevent —>阻止默认行为
    • @事件名.stop.prevent —>可以连用 即阻止事件冒泡也阻止默认行为
    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <style>
    .father {
      width: 200px;
      height: 200px;
      background-color: pink;
      margin-top: 20px;
    }
    .son {
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
  style>
head>
<body>
  <div id="app">
    <h3>v-model修饰符 .trim .numberh3>
    姓名：<input v-model.trim="username" type="text"><br>
    年纪：<input v-model.number="age" type="text"><br>

    
    <h3>@事件名.stop     →  阻止冒泡h3>
    <div @click="fatherFn" class="father">
      <div @click.stop="sonFn" class="son">儿子div>
    div>

    <h3>@事件名.prevent  →  阻止默认行为h3>
    <a @click.prevent href="http://www.baidu.com">阻止默认行为a>
  div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        age: '',
      },
      methods: {
        fatherFn () {
          alert('老父亲被点击了')
        },
        sonFn (e) {
          // e.stopPropagation()
          alert('儿子被点击了')
        }
      }
    })
  script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57

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

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

    1.语法：

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

    • 1

    2.对象语法

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

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

    • 1

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

    3.数组语法

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

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

    • 1

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

    4.代码练习

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <style>
    .box {
      width: 200px;
      height: 200px;
      border: 3px solid #000;
      font-size: 30px;
      margin-top: 10px;
    }
    .pink {
      background-color: pink;
    }
    .big {
      width: 300px;
      height: 300px;
    }
  style>
head>
<body>

  <div id="app">
    <div class="box" :class="{ pink: true, big: true }">黑马程序员div>
    <div class="box" :class="['pink', 'big']">黑马程序员div>
  div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {

      }
    })
  script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41

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

    1.需求：

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

    2.准备代码:

    DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>