第一章： Vue2 技术精讲

1. Vue 是什么

构建用户界面：基于 数据 动态 渲染 页面
渐进式：循序渐进的学习
框架：一套完整的项目解决方案，提升开发效率↑ (理解记忆规则，规则 ---> 官网)

‍

2. 创建一个 Vue 实例

‍

核心步骤（4步）：
1. 准备容器
2. 引包（官网） — 开发版本/生产版本
3. 创建Vue实例 new Vue()
4. 指定配置项，渲染数据
  1. el:指定挂载点
  2. data提供数据

‍

‍

代码演示：

代码语言：javascript复制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
     <div id="app">
        <h1>{{ msg }}</h1>
     </div>

     <script>
        const app = new Vue({
            el : '#app',
            data: {
                msg : 'Hello Vue'
            }
       
        })
     </script>
</body>
</html>

‍

3. 插值表达式

‍

语法：插值表达式语法：{{ 表达式 }}

作用：利用表达式进行插值，渲染到页面中

插值表达式的注意点：

使用的数据要存在（data）
支持的是表达式，而非语句 if ... for
不能在标签属性里面使用

‍

4. Vue 响应式特性

‍

什么是响应式：简单理解就是数据变，视图对应变。

‍

‍

5. 开发者工具安装

‍

‍

6. 指令初始 v-html

‍

指令：带有 v- 前缀的特殊标签属性，不同属性对应不同功能

‍

作用：设置元素的 innerHTM

语法：v-html = "表达式 "

代码演示：

代码语言：javascript复制

    <div id="app">
        <h3 v-html = msg></h3>
    </div>

    <script>
        const vue = new Vue({
            el : '#app',
            data : {
                msg : '<a href="https://www.baidu.com/">点击一下</a>'
            }
        })
    </script>

‍

7. 指令 v-show 和 v-if

‍

v-show

作用：控制元素显示隐藏
语法： v-show = "表达式" 表达式值 true 显示， false 隐藏
原理：切换 display:none 控制显示隐藏
场景：频繁切换显示隐藏的场景

‍

v-if

作用：控制元素显示隐藏（条件渲染）
语法： v-if = "表达式" 表达式值 true 显示， false 隐藏
原理：基于条件判断，是否创建或移除元素节点
场景：要么显示，要么隐藏，不频繁切换的场景 (就像登陆注册页面，只会显示一次)

‍

8. 指令 v-else 和 v-else-if

和Java中 if , else-if 差不多

作用：辅助 v-if 进行判断渲染
1. 语法： v-else v-else-if = "表达式"
1. 注意：需要紧挨着 v-if 一起使用

代码演示：

代码语言：javascript复制

<!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>Document</title>
</head>
<body>
  
  <div id="app">
    <p v-if="gender === 1">性别：♂ 男</p>
    <p v-else>性别：♀ 女</p>
    <hr>
    <p v-if="score >= 90">成绩评定A：奖励电脑一台</p>
    <p v-else-if="score >= 70">成绩评定B：奖励周末郊游</p>
    <p v-else-if="score >= 60">成绩评定C：奖励零食礼包</p>
    <p v-else>成绩评定D：惩罚一周不能玩手机</p>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>

    const app = new Vue({
      el: '#app',
      data: {
        gender: 2,
        score: 95
      }
    })
  </script>

</body>
</html>

‍

9. 指令 v-on

‍

作用：注册事件
语法：
1. ① v-on:事件名 = "内联语句"
2. ② v-on:事件名 = "methods中的函数名"
简写： @时间名
注意：methods函数内的 this 指向 Vue 实例

代码演示：

代码语言：javascript复制

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app">
        <button @click="count--">-</button>
        <span>{{count}}</span>
        <button @click="count  "> </button>
    </div>

    <script>
        const vue = new Vue({
            el: '#app',
            data: {
                count: 100
            }
        })
    </script>
</body>

</html>

Vue 指令 v-on 调用传

‍

10. 指令 v-bind

‍

作用：动态的设置html的标签属性 → src url title
语法： v-bind:属性名="表达式"
注意：简写形式 :属性名="表达式"

代码演示：

代码语言：javascript复制

    <div id="app">
        <img v-bind:src="url" v-bind:title="msg">
        <img :src="url" :title="msg">
    </div>
<!-- --------------------------------------- -->
    <script>
        const vue = new Vue({
            el: '#app',
            data: {
                url: '../img/10-01.png',
                msg: '图片展示'
            }
        })
    </script>

11. 图片切换案例

‍

核心思路分析：

数组存储图片路径 → [ 图片1，图片2，图片3， ... ]
准备下标 index，数组[下标] → v-bind 设置 src 展示图片 → 修改下标切换图片

代码演示：

代码语言：javascript复制

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="../js/vue.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <button v-show="index > 0" @click="index--">上一页</button>
        <div>
            <img :src="list[index]" alt="">
        </div>
        <button v-show="index < list.length - 1" @click="index  ">下一页</button>
    </div>

    <script>
        const vue = new Vue({
            el: '#app',
            data: {
                index: 0,
                list: [
                    './img/11-00.gif',
                    './img/11-01.gif',
                    './img/11-02.gif',
                    './img/11-03.gif',
                ]
            }
        })
    </script>
</body>

</html>

‍

12. 指令 v-for

‍

作用：基于数据循环，多次渲染整个元素 → 数组、对象、数字...
遍历数组语法：
- v-for = "(item, index) in 数组"
- item 每一项， index 下标
- 省略 index: v-for = "item in 数组"

代码演示：

代码语言：javascript复制

    <div id="app">
        <ul>
            <li v-for="(item , index) in list">{{item}}</li>
        </ul>
    </div>

    <script>
        const vue = new Vue({
            el: '#app',
            data: {
                list: ['徐凤年', '陈平安', '李七夜']
            }
        })
    </script>

‍

13. 图片管理案例

明确需求：

基本渲染 → v-for
删除功能 → 用 filter 根据 id 从数组中删除

代码演示：

代码语言：javascript复制

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>Document</title>
</head>

<body>
    <h1>小黑的书架</h1>
    <div id="app">
        <ul>
            <li v-for="(item , index) in booksList">
                <span>{{item.name}}</span>
                <span>{{item.author}}</span>
                <button @click="del(item.id)">删除</button>
            </li>
        </ul>
    </div>


    <script>
        const vue = new Vue({
            el: '#app',
            data: {
                booksList: [
                    { id: 1, name: '《红楼梦》', author: '曹雪芹' },
                    { id: 2, name: '《西游记》', author: '吴承恩' },
                    { id: 3, name: '《水浒传》', author: '施耐庵' },
                    { id: 4, name: '《三国演义》', author: '罗贯中' }
                ]
            },
            methods: {
		// 删除功能的实现
                del(id) {
                    this.booksList = this.booksList.filter(item => item.id !== id)
                }
            }
        })
    </script>
</body>

</html>

14. 指令 v-for 的 key

语法：key属性 = "唯一标识"
作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。
注意点：
1. key 的值只能是字符串或数字类型
2. key 的值必须具有唯一性
3. 推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应)

‍

‍

15. 指令 v-model

作用: 给表单元素使用, 双向数据绑定
- 数据变化 → 视图自动更新
- 视图变化 → 数据自动更新
语法: v-model = '变量'

‍

‍

16. 综合案例 - 小黑记事本

功能总结：

列表渲染： v-for key 的设置 {{ }} 插值表达式
删除功能 v-on 调用传参 filter 过滤覆盖修改原数组
添加功能 v-model 绑定 unshift 修改原数组添加
底部统计和清空数组.length累计长度覆盖数组清空列表 v-show 控制隐

代码演示：

代码语言：javascript复制

<!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" />
  <link rel="stylesheet" href="./css/index.css" />
  <!-- <script src="../js/vue.js"></script> -->
  <title>记事本</title>
</head>

<body>

  <!-- 主体区域 -->
  <section id="app">
    <!-- 输入框 -->
    <header class="header">
      <h1>小黑记事本</h1>
      <input v-model="todoName" placeholder="请输入任务" class="new-todo" />
      <button @click="add" class="add">添加任务</button>
    </header>
    <!-- 列表区域 -->
    <section class="main">
      <ul class="todo-list">
        <li class="todo" v-for="(item , index) in list" :key="item.id">
          <div class="view">
            <span class="index">{{index   1}}</span> <label>{{item.name}}</label>
            <button @click="del(item.id)" class="destroy"></button>
          </div>
        </li>
      </ul>
    </section>
    <!-- 统计和清空 -->
    <footer v-show="list.length > 0" class="footer">
      <!-- 统计 -->
      <span class="todo-count">合 计:<strong> {{list.length}} </strong></span>
      <!-- 清空 -->
      <button @click="clear" class="clear-completed">
        清空任务
      </button>
    </footer>
  </section>

  <!-- 底部 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>

    const app = new Vue({
      el: '#app',
      data: {
        todoName: '',
        list: [
          { id: 1, name: '跑步一公里' },
          { id: 2, name: '跳绳200个' },
          { id: 3, name: '游泳100米' },
        ]
      },
      methods: {
        del(id) {
          this.list = this.list.filter(item => item.id != id)
        },
        add() {
          if (this.todoName.trim() === '') {
            alert('请输入任务名称')
            return
          }
          this.list.unshift({
            id:  new Date(),
            name: this.todoName
          })
          this.todoName = ''
        },
        clear() {
          this.list = []
        }
      }
    })

  </script>
</body>

</html>

‍

17. 指令修饰符

‍

通过 "." 指明一些指令后缀，不同后缀封装了不同的处理操作 → 简化代码

‍

按键修饰符： @keyup.enter → 键盘回车监听
v-model修饰符：v-model.trim → 去除首尾空格， v-model.number → 转数字
事件修饰符： @事件名.stop → 阻止冒泡， @事件名.prevent → 阻止默认行为

18. v-bind对于样式的增强 - class

‍

v-bind 对于样式控制的增强

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

‍

‍

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

‍

语法 :class = "对象/数组"

‍

① 对象 → 键就是类名，值是布尔值。如果值为 true，有这个类，否则没有这个类

语法：

代码语言：javascript复制

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

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

② 数组 → 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表

语法：

代码语言：javascript复制

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

适用场景：批量添加或删除类

19. v-bind操作class案例 - 京东秒杀 tab 导航高亮

‍

‍

代码语言：javascript复制

<!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>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      display: flex;
      border-bottom: 2px solid #e01222;
      padding: 0 10px;
    }
    li {
      width: 100px;
      height: 50px;
      line-height: 50px;
      list-style: none;
      text-align: center;
    }
    li a {
      display: block;
      text-decoration: none;
      font-weight: bold;
      color: #333333;
    }
    li a.active {
      background-color: #e01222;
      color: #fff;
    }

  </style>
</head>
<body>

  <div id="app">
    <ul>
      <li v-for="(item, index) in list" :key="item.id" @click="activeIndex = index">
        <a :class="{ active: index === activeIndex }" href="#">{{ item.name }}</a>
      </li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        activeIndex: 2, // 记录高亮
        list: [
          { id: 1, name: '京东秒杀' },
          { id: 2, name: '每日特价' },
          { id: 3, name: '品类秒杀' }
        ]
      }
    })
  </script>
</body>
</html>

‍

20. v-bind 操作style

‍

语法 :style = "样式对象"

‍

代码语言：javascript复制

<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>

‍

适用场景：某个具体属性的动态设置

21. v-model 应用于其他表单元素

‍

常见的表单元素都可以用 v-model 绑定关联 → 快速获取或设置表单元素的值

它会根据 控件类型 自动选取 正确的方法 来更新元素

‍

22. computed 计算属性

‍

概念：基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算。

语法：

声明在 computed 配置项中，一个计算属性对应一个函数
使用起来和普通属性一样使用 {{ 计算属性名 }}
计算属性 → 可以将一段求值的代码进行封装

代码语言：javascript复制

computed: { 
  计算属性名 () {
    基于现有数据，编写求值逻辑
    return 结果
  }
},

‍

演示代码：

代码语言：javascript复制

<!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>Document</title>
  <style>
    table {
      border: 1px solid #000;
      text-align: center;
      width: 240px;
    }
    th,td {
      border: 1px solid #000;
    }
    h3 {
      position: relative;
    }
  </style>
</head>
<body>

  <div id="app">
    <h3>小黑的礼物清单</h3>
    <table>
      <tr>
        <th>名字</th>
        <th>数量</th>
      </tr>
      <tr v-for="(item, index) in list" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.num }}个</td>
      </tr>
    </table>

    <!-- 目标：统计求和，求得礼物总数 -->
    <p>礼物总数：{{totalCount}} 个</p>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        // 现有的数据
        list: [
          { id: 1, name: '篮球', num: 1 },
          { id: 2, name: '玩具', num: 2 },
          { id: 3, name: '铅笔', num: 5 },
        ]
      },
      computed: {
        totalCount() {
            let total = this.list.reduce((sum , item) => sum   item.num , 0);
            return total;
        }
      }
    })
  </script>
</body>
</html>

‍

23. computed 计算属性 vs methods 方法

‍

渲染事件数据数组语法

0 人点赞

第一章 ： Vue2 技术精讲