【VUE】day02-vue基本使用、调试工具、指令与过滤器

boy快快长大

已于 2025-03-16 11:59:57 修改

阅读量530

点赞数 2

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2025-03-09 22:18:14 首次发布

本文链接：https://blog.youkuaiyun.com/Blue_Pepsi_Cola/article/details/146139288

版权

Vue 专栏收录该内容

14 篇文章

订阅专栏

1. 什么是Vue

Vue（Vue.js）是一个用于构建用户界面的渐进式 JavaScript 框架，其核心设计理念是“自底向上逐层应用”，既能作为轻量级库增强现有项目，也能发展为功能完备的单页应用（SPA）框架。

2. Vue的基本使用

① 导入vue.js的script脚本
② 在页面中声明一个将要被vue所控制的DOM区域
③ 创建vm实例对象(vue实例对象)

在这里插入图片描述

3. 指令

vue中的指令按照不同的用途可以分为如下6大类
① 内容渲染指令
② 属性绑定指令
③ 事件绑定指令
④ 双向绑定指令
⑤ 条件渲染指令
⑥ 列表渲染指令

3.1 内容渲染指令

3.1.1 v-text

在这里插入图片描述
指令的缺点：会覆盖元素内部原有的内容！

3.1.2 {{}}

插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容！

在这里插入图片描述

3.1.3 v-html

指令的作用：可以把带有标签的字符串，渲染成真正的 HTML 内容！
在这里插入图片描述

在这里插入图片描述

3.2 el属性的使用注意点

当el属性为’p’而不是id的时候，只会处理第一个p标签
在这里插入图片描述

3.3 属性绑定指令

在 vue 中，可以使用 v-bind: 指令，为元素的属性动态绑定值；

在这里插入图片描述

另一种写法
在这里插入图片描述

在使用 v-bind 属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号，例如：

<div :title="'box' + index">这是一个 div</div>

3.3 在插值和属性绑定中编写JS语句

在vue提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持JavaScript表达式的运算，例如：
在这里插入图片描述

3.4 了解v-on指令的基本语法

vue提供了v-on事件绑定指令，用来辅助程序员为DOM元素绑定事件监听。语法格式如下：

在这里插入图片描述

=======================================================================================================

<!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>
  <!-- 希望 Vue 能够控制下面的这个 div，帮我们在把数据填充到 div 内部 -->
  <div id="app">
    <p>count 的值是：{{ count }}</p>
    <!-- 在绑定事件处理函数的时候，可以使用 () 传递参数 -->
    <!-- v-on: 指令可以被简写为 @ -->
    <button @click="add(1)">+1</button>
    <button @click="sub">-1</button>
  </div>

  <!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 -->
  <script src="./lib/vue-2.6.12.js"></script>
  <!-- 2. 创建 Vue 的实例对象 -->
  <script>
    // 创建 Vue 的实例对象
    const vm = new Vue({
      // el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器
      el: '#app',
      // data 对象就是要渲染到页面上的数据
      data: {
        count: 0
      },
      // methods 的作用，就是定义事件的处理函数
      methods: {
        add(n) {
          // 在 methods 处理函数中，this 就是 new 出来的 vm 实例对象
          // console.log(vm === this)
          console.log(vm)
          // vm.count += 1
          this.count += n
        },
        sub() {
          // console.log('触发了 sub 处理函数')
          this.count -= 1
        }
      }
    })
  </script>
</body>

</html>

3.5 事件修饰符

在事件处理函数中调用event.preventDefault()或event.stopPropagation()是非常常见的需求，因此vue提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制。
常用的5个事件修饰符
在这里插入图片描述

3.6 按键修饰符

在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符。例如：
在这里插入图片描述

@keyup没有加上esc或者enter时，按下任意键都会触发clearInput方法
在这里插入图片描述
只有按了esc才会触发方法

实现了ESC清空文本
在这里插入图片描述

3.7 v-model指令

双向数据绑定指令v-model指令，用来辅助开发者在不操作DOM的前提下，快速获取表单数据。
在这里插入图片描述

更改了文本框里面的值，然后用户名哪里也会变。

3.7.1 v-model指令

为了方便对用户输入的内容进行处理，vue为v-model指令提供三个修饰符。

在这里插入图片描述

实例用法
在这里插入图片描述

3.8 条件渲染指令

条件渲染指令用来辅助开发者按需控制DOM的显示与隐藏。条件渲染指定有如下两个，分别是

v-if
v-show

在这里插入图片描述

<!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>
  <!-- 希望 Vue 能够控制下面的这个 div，帮我们把数据填充到 div 内部 -->
  <div id="app">
    <p v-if="flag">这是被 v-if 控制的元素</p>
    <p v-show="flag">这是被 v-show 控制的元素</p>

    <hr>
    <div v-if="type === 'A'">优秀</div>
    <div v-else-if="type === 'B'">良好</div>
    <div v-else-if="type === 'C'">一般</div>
    <div v-else>差</div>
  </div>

  <!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 -->
  <script src="./lib/vue-2.6.12.js"></script>
  <!-- 2. 创建 Vue 的实例对象 -->
  <script>
    // 创建 Vue 的实例对象
    const vm = new Vue({
      // el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器
      el: '#app',
      // data 对象就是要渲染到页面上的数据
      data: {
        // 如果 flag 为 true，则显示被控制的元素；如果为 false 则隐藏被控制的元素
        flag: false,
        type: 'A'
      }
    })
  </script>
</body>

</html>

3.8.1 v-if与v-show有什么区别

在 Vue.js 中，v-if 和 v-show 都用于控制元素的显示与隐藏，但它们的工作方式有所不同：

1.v-if 的特点
条件渲染：v-if 会真正地在 DOM 中添加或移除元素。
懒加载：当条件变为 false 时，Vue 直接移除该元素及其子组件；当条件变为 true 时，Vue 重新创建并插入该元素。
性能消耗大：因为频繁地销毁和重新渲染元素，适用于切换不频繁的情况。

这是一个v-if的段落

isVisible = true 时， 标签会被渲染到 DOM 中。
isVisible = false 时， 标签会完全从 DOM 中移除。

2.v-show 的特点
条件显示：v-show 只是通过 CSS display: none; 来控制元素的显示或隐藏，并不会真正移除 DOM 元素。
初始渲染：无论条件是否满足，v-show 绑定的元素都会被渲染到 DOM 中，只是默认可能是隐藏的。
性能较好：适用于切换频繁的情况，因为不会销毁和重建 DOM 结构，只是修改 display 样式。

这是一个v-show的段落
isVisible = true 时，元素正常显示。
isVisible = false 时，元素仍然存在于 DOM 中，但通过 display: none; 隐藏。

3.9 v-else

v-if可以单独使用，也可以配套v-else使用
在这里插入图片描述
注意v-else指令必须配合v-if指令一起使用。

3.9 v-for

v-for列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for需要使用item items形式的特殊语法，其中

items是待循环的数组
item是被循环的每一项

<!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>
  <link rel="stylesheet" href="./lib/bootstrap.css">
</head>

<body>
  <!-- 希望 Vue 能够控制下面的这个 div，帮我们把数据填充到 div 内部 -->
  <div id="app">
    <table class="table table-bordered table-hover table-striped">
      <thead>
        <th>索引</th>
        <th>Id</th>
        <th>姓名</th>
      </thead>
      <tbody>
        <!-- 官方建议：只要用到了 v-for 指令，那么一定要绑定一个 :key 属性 -->
        <!-- 而且，尽量把 id 作为 key 的值 -->
        <!-- 官方对 key 的值类型，是有要求的：字符串或数字类型 -->
        <!-- key 的值是千万不能重复的，否则会终端报错：Duplicate keys detected -->
        <tr v-for="(item, index) in list" :key="item.id">
          <td>{{ index }}</td>
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 -->
  <script src="./lib/vue-2.6.12.js"></script>
  <!-- 2. 创建 Vue 的实例对象 -->
  <script>
    // 创建 Vue 的实例对象
    const vm = new Vue({
      // el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器
      el: '#app',
      // data 对象就是要渲染到页面上的数据
      data: {
        list: [
          { id: 1, name: '张三' },
          { id: 2, name: '李四' },
          { id: 3, name: '王五' },
          { id: 4, name: '张三' },
        ]
      }
    })
  </script>
</body>

</html>

在这里插入图片描述

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>品牌列表案例</title>
  <link rel="stylesheet" href="./lib/bootstrap.css">
  <link rel="stylesheet" href="./css/brandlist.css">
</head>

<body>

  <div id="app">
    <!-- 卡片区域 -->
    <div class="card">
      <div class="card-header">
        添加品牌
      </div>
      <div class="card-body">
        <!-- 添加品牌的表单区域 -->
        <!-- form 表单元素有 submit 事件 -->
        <form @submit.prevent="add">
          <div class="form-row align-items-center">
            <div class="col-auto">
              <div class="input-group mb-2">
                <div class="input-group-prepend">
                  <div class="input-group-text">品牌名称</div>
                </div>
                <input type="text" class="form-control" placeholder="请输入品牌名称" v-model.trim="brand">
              </div>
            </div>
            <div class="col-auto">
              <button type="submit" class="btn btn-primary mb-2">添加</button>
            </div>
          </div>
        </form>
      </div>
    </div>

    <!-- 表格区域 -->
    <table class="table table-bordered table-hover table-striped">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">品牌名称</th>
          <th scope="col">状态</th>
          <th scope="col">创建时间</th>
          <th scope="col">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>
            <div class="custom-control custom-switch">
              <!-- 使用 v-model 实现双向数据绑定 -->
              <input type="checkbox" class="custom-control-input" :id="'cb' + item.id" v-model="item.status">
              <!-- 使用 v-if 结合 v-else 实现按需渲染 -->
              <label class="custom-control-label" :for="'cb' + item.id" v-if="item.status">已启用</label>
              <label class="custom-control-label" :for="'cb' + item.id" v-else>已禁用</label>
            </div>
          </td>
          <td>{{ item.time }}</td>
          <td>
            <a href="javascript:;" @click="remove(item.id)">删除</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <script src="./lib/vue-2.6.12.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        // 用户输入的品牌名称
        brand: '',
        // nextId 是下一个，可用的 id
        nextId: 4,
        // 品牌的列表数据
        list: [
          { id: 1, name: '宝马', status: true, time: new Date() },
          { id: 2, name: '奔驰', status: false, time: new Date() },
          { id: 3, name: '奥迪', status: true, time: new Date() },
        ],
      },
      methods: {
        // 点击链接，删除对应的品牌信息
        remove(id) {
          this.list = this.list.filter(item => item.id !== id)
        },
        // 阻止表单的默认提交行为之后，触发 add 方法
        add() {
          // 如果判断到 brand 的值为空字符串，则 return 出去
          if (this.brand === '') return alert('必须填写品牌名称！')

          // 如果没有被 return 出去，应该执行添加的逻辑
          // 1. 先把要添加的品牌对象，整理出来
          const obj = {
            id: this.nextId,
            name: this.brand,
            status: true,
            time: new Date()
          }
          // 2. 往 this.list 数组中 push 步骤 1 中得到的对象
          this.list.push(obj)
          // 3. 清空 this.brand；让 this.nextId 自增 +1
          this.brand = ''
          this.nextId++
        }
      },
    })
  </script>
</body>

</html>