1.Vue2.x指令+过滤器+侦听器+计算属性

# 什么是 vue

1. 构建用户界面

用 vue 往 html 页面中填充数据，非常的方便

2. 框架

框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！
要学习 vue，就是在学习 vue 框架中规定的用法！
vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库
只有把上面罗列的内容掌握以后，才有开发 vue 项目的能力！

# vue 的两个特性

1. 数据驱动视图

数据的变化会 驱动视图 自动更新
好处：程序员只管把数据维护好，那么页面结构会被 vue 自动渲染出来！

2. 双向数据绑定

> 在网页中，form 表单负责 采集数据，Ajax 负责 提交数据。

js 数据的变化，会被自动渲染到页面上
页面上表单采集的数据发生变化的时候，会被 vue 自动获取到，并更新到 js 数据中

> 注意：数据驱动视图和双向数据绑定的底层原理是 MVVM（Mode 数据源、View 视图、ViewModel 就是 vue 的实例）

# vue 使用基本步骤

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

<body>
  <!-- 希望 Vue 能够控制下面的这个 div，帮我们在把数据填充到 div 内部 -->
  <div id="app">{{ username }}</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: {
        username: 'zhangsan'
      },
      // methods 对象就是绑定的处理函数
      methods: {
        dosth(){
        },
      },
    })
  </script>
</body>

# vue 指令（模板语法）

## 1. 内容渲染指令

v-text 指令的缺点：会覆盖元素内部原有的内容！
{{ }} 插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容！
v-html 指令的作用：可以把带有标签的字符串，渲染成真正的 HTML 内容！

<div v-text="info"></div>
<div>{{ info }}</div>
<div v-html="info"></div>

支持 JavaScript 简单语法

## 2. 属性绑定指令

> 注意：插值表达式只能用在元素的 内容节点 中，不能用在元素的 属性节点 中！

在 vue 中，可以使用 v-bind: 指令，为元素的属性动态绑定值；
简写是英文的 ` : `
在使用 v-bind 属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号，例如：

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

## 3. 事件绑定指令

1. v-on: 简写是 @

2. 语法格式为：

//不传参
<button @click="add"></button>

methods: {
    add() {
    // 在方法中可以通过 this 访问到 data 中的数据
    this.count += 1
    }
}


//传参
<button @click="add（1）"></button>

methods: {
    add(n) {
    // 在方法中可以通过 this 访问到 data 中的数据
    this.count += n
    }
}

3. $event 的应用场景：如果默认的事件对象 e 被覆盖了，则可以手动传递一个 $event。例如：

<button @click="add(3, $event)"></button>

methods: {
   add(n, e) {
   // 如果在方法中要修改 data 中的数据，可以通过 this 访问到
   this.count += 1
   }
}

4. 事件修饰符：

.prevent 阻止默认行为

链接<        /a ><       /a ><      /a ><     /a ><    /a ><   /a ><  /a >< /a >

.stop 阻止冒泡

.capture 以捕获模式触发当前的事件处理函数(少用）

.once 绑定的事件只触发一次（少用）
.self 只有在 event.target 是当前元素自身时触发事件处理函数(少用

## 4. v-model 指令（数据双向绑定指令）

1. input 输入框中使用

type="radio"
type="checkbox"
type="xxxx"

2. textarea 中使用
3. select 中使用

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

## 5. 条件渲染指令

1. v-show 的原理是：动态为元素添加或移除 `display: none` 样式，来实现元素的显示和隐藏

如果要频繁的切换元素的显示状态，用 v-show 性能会更好

2. v-if 的原理是：每次动态创建或移除元素，实现元素的显示和隐藏

如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时 v-if 性能更好

> 在实际开发中，绝大多数情况，不用考虑性能问题，直接使用 v-if 就好了！！！

3. v-if v-else -if 指令在使用的时候，有两种方式：

直接给定一个布尔值 true 或 false

<p v-if="true">被 v-if 控制的元素</p>

给 v-if 提供一个判断条件，根据判断的结果是 true 或 false，来控制元素的显示和隐藏

<p v-if="type === 'A'">良好</p>

＃＃ 6.列表渲染指令

v-for 列表渲染指令用来基于一个数组来循环渲染一个列表结构，如下：

v-for 的索引：
v-for 还支持一个可选的第二个参数，即当前项的索引。语法格式为 (item, index) in items，示例代码如下:

注意：

为了给 vue 一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲染的性能。此时，需要为每项提供一个唯一的 :key 属性(官方建议）！

小结及小结案例：

小结：

1 能够知道 vue 的基本使用步骤

导入 vue.js 文件
new Vue() 构造函数，得到 vm 实例对象
声明 el 和 data 数据节点
MVVM 的对应关系

2 掌握 vue 中常见指令的基本用法

插值表达式、v-bind、v-on、v-if 和 v-else
v-for 和 :key、v-model

案例：

案例页面：

代码部分：

查看代码


<!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>

# 过滤器

过滤器仅在 vue 2.x 和 1.x 中受支持，在 vue 3.x 的版本中剔除了过滤器相关的功能。

在企业级项目开发中:

如果使用的是 2.x 版本的 vue，则依然可以使用过滤器相关的功能
如果项目已经升级到了 3.x 版本的 vue，官方建议使用计算属性或方法代替被剔除的过滤器功能

## 过滤器的注意点

1. 要定义到 filters 节点下，本质是一个函数
2. 在过滤器函数中，一定要有 return 值
3. 在过滤器的形参中，可以获取到“管道符”前面待处理的那个值
4. 如果全局过滤器和私有过滤器名字一致，此时按照“就近原则”，调用的是“私有过滤器“

## 过滤器使用的地方

过滤器可以用在两个地方:插值表达式和 v-bind 属性绑定,例如：

## 私有过滤器的定义

在创建 vue 实例期间，可以在 filters 节点中定义私有过滤器，它只能在当前 vm 实例所控制的 el 区域内使用。示例：

## 全局过滤器的定义

如果希望在多个 vue 实例之间共享过滤器，则可以按照如下的格式定义全局过滤器:

## 调用多个过滤器

## 过滤器参数

# watch 侦听器

## 侦听器的格式

watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。

1. 方法格式的侦听器
+ 缺点1：无法在刚进入页面的时候，自动触发！！！
+ 缺点2：如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器！！！

语法：

2. 对象格式的侦听器
+ 好处1：可以通过 immediate 选项，让侦听器自动触发！！！
+ 好处2：可以通过 deep 选项，让侦听器深度监听对象中每个属性的变化（深度侦听）！！！

启用immediate选项：

查看代码

<script>
    const vm = new Vue({
      el: '#app',
      data: {
        username: 'admin'
      },
      // 所有的侦听器，都应该被定义到 watch 节点下
      watch: {
        // 定义对象格式的侦听器
        username: {
          // 侦听器的处理函数
          handler(newVal, oldVal) {
            console.log(newVal, oldVal)
          },
          // immediate 选项的默认值是 false
          // immediate 的作用是：控制侦听器是否自动触发一次！
          immediate: true
        }
      }
    })
  </script>

启用deep选项：

查看代码

<script>
    const vm = new Vue({
      el: '#app',
      data: {
        // 用户的信息对象
        info: {
          username: 'admin',
          address: {
            city: '北京'
          }
        }
      },
      // 所有的侦听器，都应该被定义到 watch 节点下
      watch: {
        //启用deep选项
        /* info: {
          handler(newVal) {
            console.log(newVal)
          },
          // 开启深度监听，只要对象中任何一个属性变化了，都会触发“对象的侦听器”
          deep: true
        } */

        //深度侦听的另一种方式（只能侦听对象中单个属性）
        // 如果要侦听的是对象的子属性的变化，则必须包裹一层单引号
        'info.username'(newVal) {
          console.log(newVal)
        }
      }
    })
  </script>

# 计算属性

特点：

1. 定义的时候，要被定义为“方法”
2. 在使用计算属性的时候，当普通的属性使用即可

好处：

1. 实现了代码的复用
2. 只要计算属性中依赖的数据源变化了，则计算属性会自动重新求值！

用法：

计算属性的方法写在 computed 节点下，最终 return 得到一个属性值。这个动态计算出来的属性值可以被模板结构或 methods 方法使用。示例代码如下:

查看代码

<body>
  <div id="app">
    <div>
      <span>R：</span>
      <input type="text" v-model.number="r">
    </div>
    <div>
      <span>G：</span>
      <input type="text" v-model.number="g">
    </div>
    <div>
      <span>B：</span>
      <input type="text" v-model.number="b">
    </div>
    <hr>

    <!-- 专门用户呈现颜色的 div 盒子 -->
    <!-- 在属性身上，: 代表  v-bind: 属性绑定 -->
    <!-- :style 代表动态绑定一个样式对象，它的值是一个 {  } 样式对象 -->
    <!-- 当前的样式对象中，只包含 backgroundColor 背景颜色 -->
    <div class="box" :style="{ backgroundColor: rgb }">
      {{ rgb }}
    </div>
    <button @click="show">按钮</button>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        // 红色
        r: 0,
        // 绿色
        g: 0,
        // 蓝色
        b: 0
      },
      methods: {
        // 点击按钮，在终端显示最新的颜色
        show() {
          console.log(this.rgb)
        }
      },
      // 所有的计算属性，都要定义到 computed 节点之下
      // 计算属性在定义的时候，要定义成“方法格式”
      computed: {
        // rgb 作为一个计算属性，被定义成了方法格式，
        // 最终，在这个方法中，要返回一个生成好的 rgb(x,x,x) 的字符串
        rgb() {
          return `rgb(${this.r}, ${this.g}, ${this.b})`
        }
      }
    });

    console.log(vm)
  </script>
</body>

posted @ 2022-04-09 21:11 RHCHIK 阅读(134) 评论(0) 收藏举报

刷新页面返回顶部

百索园前端

懂一点代码的程序员

1.Vue2.x指令+过滤器+侦听器+计算属性

# 什么是 vue

# vue 的两个特性

1. 数据驱动视图

2. 双向数据绑定

# vue 使用基本步骤

# vue 指令（模板语法）

## 1. 内容渲染指令

## 2. 属性绑定指令

## 3. 事件绑定指令

## 4. v-model 指令（数据双向绑定指令）

## 5. 条件渲染指令

＃＃ 6.列表渲染指令

小结及小结案例：

小结：

案例：

# 过滤器

## 过滤器的注意点

## 过滤器使用的地方

## 私有过滤器的定义

## 全局过滤器的定义

## 调用多个过滤器

## 过滤器参数

# watch 侦听器

## 侦听器的格式

# 计算属性