Vue2:组件基础(下)

Vue2:组件基础(下)

Date: April 12, 2023
Sum: props验证、计算属性、自定义时间、组件上的v-model、任务列表案例
Tags: *


目标:

能够知道如何对 props 进行验证

能够知道如何使用计算属性

令能够知道如何为组件自定义事件

令能够知道如何在组件上使用 v-model




props 验证

  1. 什么是 props 验证

概念:封装组件时对外界传递过来的 props 数据进行合法性的校验,从而防止数据不合法的问题。

Untitled

使用数组类型的 props 节点的缺点:无法为每个 prop 指定具体的数据类型。

  1. 对象类型的 props 节点

使用对象类型的 props 节点,可以对每个 prop 进行数据类型的校验,示意图如下:

Untitled

  1. props 验证

对象类型的 props 节点提供了多种数据验证方案,例如:

① 基础的类型检查 ② 多个可能的类型 ③ 必填项校验 ④ 属性默认值 ⑤ 自定义验证函数

3.1 基础的类型检查

可以直接为组件的 prop 属性指定基础的校验类型,从而防止组件的使用者为其绑定错误类型的数据:

Untitled

3.2 多个可能的类型

如果某个 prop 属性值的类型不唯一,此时可以通过数组的形式,为其指定多个可能的类型,示例代码如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F6H4rcVn-1691303451848)(https://nathan-blog-img.oss-cn-nanjing.aliyuncs.com/blog_img/Untitled%203.png)]

3.3 必填项校验

如果组件的某个 prop 属性是必填项,必须让组件的使用者为其传递属性的值。此时,可以通过如下的方式将其设置为必填项:

export default {name: 'MyCount',props: {count: {type: Number,required: true //设定required},state: Boolean,}
}

3.4 属性默认值

在封装组件时,可以为某个 prop 属性指定默认值。示例代码如下:

export default {name: 'MyCount',props: {// 通过“配置对象”的形式,来定义 propC 属性的“验证规则”count: {type: Number,default: 100, // 如果使用者没有指定 default 的值,则 count 属性的值默认为 100required: true },state: Boolean,}
}

3.5 自定义验证函数

封装组件时,可以为 prop 属性指定自定义的验证函数,从而对 prop 属性的值进行更加精确的控制

Untitled



个人总结:

props验证

概念:封装组件时对外界传递过来的 props 数据进行合法性的校验,从而防止数据不合法的问题。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QAPgtspB-1691303451848)(https://nathan-blog-img.oss-cn-nanjing.aliyuncs.com/blog_img/Untitled.png)]

解决方案:采用对象类型的 props 节点

Untitled




自定义事件👌

自定义事件概念:

概念:自定义事件让使用者可以监听到组件内最新的数据变化

语法

Untitled

<my-counter @自定义事件="监听方式"></my-counter> // App.vue

注意:通过自定义事件可以在App.vue中监听MyCounter组件中数据的变化。



自定义事件使用步骤

自定义事件的 3 个使用步骤

在封装组件时:

① 声明自定义事件:在emits 节点中声明

② 触发自定义事件:通过 this.$emit(‘自定义事件的名称’) 方法进行触发

在使用组件时:

③ 监听自定义事件:通过 v-on 的形式监听自定义事件

传参方式

在调用 this.$emit() 方法触发自定义事件时,可以通过第 2 个参数为自定义事件传参

//counter.vue
methods: {add() {this.count++this.$emit('countChange',this.count) // 触发自定义事件,通过第二个参数传参}
}

结合例子理解

Counter.vue

<template><div><p>Counter的值是:{{ count }}</p><button @click="add">+1</button></div>
</template><script>
export default {name: 'MyCounter',// 1-声明自定义事件emits: ['countChange'],data() { return {count: 1,}},methods: {add() {this.count++// 2-触发自定义事件,通过第二个参数传参this.$emit('countChange',this.count) }}
}
</script>

App.vue

<template><div><h1>app 根组件</h1><hr/><!-- 3-监听自定义事件(左:自定义事件 右:监听方式) --><my-counter @countChange="getCount"></my-counter></div>
</template><script>
import MyCounter from './counter.vue'
export default {name: 'MyApp',methods: {getCount(val) {console.log("触发了 countChange 自定义事件", val);}},components: {MyCounter},
}
</script>



组件上的 v-model

1. 为什么需要在组件上使用 v-model

v-model 是双向数据绑定指令,当需要维护组件内外数据的同步时,可以在组件上使用 v-model 指令。示意图如下:

Untitled

外界数据的变化会自动同步到 counter 组件中 ; counter 组件中数据的变化,也会自动同步到外界

理解:父组件和子组件中数据的变化会相互影响

2. 在组件上使用 v-model 的步骤

2.1 父向子传递数据

Untitled

① 父组件通过 v-bind: 属性绑定的形式,把数据传递给子组件
② 子组件中,通过 props 接收父组件传递过来的数据

案例:

<template><div><h1>App根组件 --- {{ count }}</h1><button @click="count += 1">+1</button><hr/><my-counter :number="count"></my-counter> //通过v-bind属性将count值传递给number</div>
</template>

Untitled


2.2 子向父传递数据

Untitled

① 在 v-bind: 指令之前添加 v-model 指令

② 在子组件中声明 emits 自定义事件,格式为 update:xxx

③ 调用 $emit() 触发自定义事件,更新父组件中的数据

案例:

// App.vue
<template><div><h1>App 根组件  ---- {{count}}</h1><button @click="count += 1">+1</button><hr /><my-counter v-model:number="count"></my-counter></div>
</template>
// Counter.vue
<template><div><p>count值是:{{number}}</p><button @click="add">+1</button></div>
</template><script>
export default {name: 'MyCounter',props: ['number'],emits: ['update:number'],methods: {add() {this.$emit('update:number', this.number + 1)}}
}
</script>

效果:

子父组件中数据同步

Untitled



个人总结:




综合案例:

成绩案例:

功能描述

1.渲染功能

2.删除功能

3.添加功能

4.统计总分,求平均分

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9NUG2Kst-1691303451849)(https://nathan-blog-img.oss-cn-nanjing.aliyuncs.com/blog_img/Untitled%2011.png)]

思路分析

1.渲染功能 v-for :key v-bind:动态绑定class的样式

2.删除功能 v-on绑定事件, 阻止a标签的默认行为

3.v-model的修饰符 .trim、 .number、 判断数据是否为空后 再添加、添加后清空文本框的数据

4.使用计算属性computed 计算总分和平均分的值

业务技术总结

1-渲染功能(不及格高亮)

v-if v-else v-for v-bind:class

2-删除功能

点击传参 filter过滤覆盖原数组

.prevent 阻止默认行为

3-添加功能

v-model v-model修饰符(.trim .number)

unshift 修改数组更新视图

代码

  • Code: 渲染实现

    <!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="./styles/index.css" /><title>Document</title></head><body><div id="app" class="score-case"><div class="table"><table><thead><tr><th>编号</th><th>科目</th><th>成绩</th><th>操作</th></tr></thead><tbody v-if="list.length > 0"><tr v-for="(item, index) in list" :key="item.id"><td>{{ index + 1 }}</td><td>{{ item.subject }}</td><!-- 需求:不及格的标红, < 60 分, 加上 red 类 --><td :class="{ red: item.score < 60 }">{{ item.score }}</td><td><a href="#">删除</a></td></tr></tbody><tbody v-else><tr><td colspan="5"><span class="none">暂无数据</span></td></tr></tbody><tfoot><tr><td colspan="5"><span>总分:246</span><span style="margin-left: 50px">平均分:79</span></td></tr></tfoot></table></div><div class="form"><div class="form-item"><div class="label">科目:</div><div class="input"><inputtype="text"placeholder="请输入科目"/></div></div><div class="form-item"><div class="label">分数:</div><div class="input"><inputtype="text"placeholder="请输入分数"/></div></div><div class="form-item"><div class="label"></div><div class="input"><button class="submit" >添加</button></div></div></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {list: [{ id: 1, subject: '语文', score: 62 },{ id: 7, subject: '数学', score: 39 },{ id: 12, subject: '英语', score: 70 },],subject: '',score: ''}})</script></body>
    </html>
    
  • Code: 删除添加

    <!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="./styles/index.css" /><title>Document</title></head><body><div id="app" class="score-case"><div class="table"><table><thead><tr><th>编号</th><th>科目</th><th>成绩</th><th>操作</th></tr></thead><tbody v-if="list.length > 0"><tr v-for="(item, index) in list" :key="item.id"><td>{{ index + 1 }}</td><td>{{ item.subject }}</td><!-- 需求:不及格的标红, < 60 分, 加上 red 类 --><td :class="{ red: item.score < 60 }">{{ item.score }}</td><td><a @click.prevent="del(item.id)" href="http://www.baidu.com">删除</a></td></tr></tbody><tbody v-else><tr><td colspan="5"><span class="none">暂无数据</span></td></tr></tbody><tfoot><tr><td colspan="5"><span>总分:246</span><span style="margin-left: 50px">平均分:79</span></td></tr></tfoot></table></div><div class="form"><div class="form-item"><div class="label">科目:</div><div class="input"><inputtype="text"placeholder="请输入科目"v-model.trim="subject"/></div></div><div class="form-item"><div class="label">分数:</div><div class="input"><inputtype="text"placeholder="请输入分数"v-model.number="score"/></div></div><div class="form-item"><div class="label"></div><div class="input"><button @click="add" class="submit" >添加</button></div></div></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {list: [{ id: 1, subject: '语文', score: 62 },{ id: 7, subject: '数学', score: 39 },{ id: 12, subject: '英语', score: 70 },],subject: '',score: ''},methods: {del (id) {// console.log(id)this.list = this.list.filter(item => item.id !== id)},add () {if (!this.subject) {alert('请输入科目')return}if (typeof this.score !== 'number') {alert('请输入正确的成绩')return}this.list.unshift({id: +new Date(),subject: this.subject,score: this.score})this.subject = ''this.score = ''}}})</script></body>
    </html>
    
  • Code: 计算属性

    <!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="./styles/index.css" /><title>Document</title></head><body><div id="app" class="score-case"><div class="table"><table><thead><tr><th>编号</th><th>科目</th><th>成绩</th><th>操作</th></tr></thead><tbody v-if="list.length > 0"><tr v-for="(item, index) in list" :key="item.id"><td>{{ index + 1 }}</td><td>{{ item.subject }}</td><!-- 需求:不及格的标红, < 60 分, 加上 red 类 --><td :class="{ red: item.score < 60 }">{{ item.score }}</td><td><a @click.prevent="del(item.id)" href="http://www.baidu.com">删除</a></td></tr></tbody><tbody v-else><tr><td colspan="5"><span class="none">暂无数据</span></td></tr></tbody><tfoot><tr><td colspan="5"><span>总分:{{ totalScore }}</span><span style="margin-left: 50px">平均分:{{ averageScore }}</span></td></tr></tfoot></table></div><div class="form"><div class="form-item"><div class="label">科目:</div><div class="input"><inputtype="text"placeholder="请输入科目"v-model.trim="subject"/></div></div><div class="form-item"><div class="label">分数:</div><div class="input"><inputtype="text"placeholder="请输入分数"v-model.number="score"/></div></div><div class="form-item"><div class="label"></div><div class="input"><button @click="add" class="submit" >添加</button></div></div></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {list: [{ id: 1, subject: '语文', score: 62 },{ id: 7, subject: '数学', score: 89 },{ id: 12, subject: '英语', score: 70 },],subject: '',score: ''},computed: {totalScore() {return this.list.reduce((sum, item) => sum + item.score, 0)},averageScore () {if (this.list.length === 0) {return 0}return (this.totalScore / this.list.length).toFixed(2)}},methods: {del (id) {// console.log(id)this.list = this.list.filter(item => item.id !== id)},add () {if (!this.subject) {alert('请输入科目')return}if (typeof this.score !== 'number') {alert('请输入正确的成绩')return}this.list.unshift({id: +new Date(),subject: this.subject,score: this.score})this.subject = ''this.score = ''}}})</script></body>
    </html>
    



总结:

① 能够知道如何对 props 进行验证

数组格式、对象格式

type、default、required、validator

② 能够知道如何使用计算属性

computed 节点、必须 return 一个结果、缓存计算结果

③ 能够知道如何为组件绑定自定义事件

v-on 绑定自定义事件、emits、$emit()

④ 能够知道如何在组件上使用 v-model

应用场景:实现组件内外的数据同步

v-model:props名称、emits、$emit(‘update:props名称’)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/78687.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Matlab中图的最短路径

前言&#xff1a; 图的基本概念&#xff1a; 若想简单绘制图可以利用此网站&#xff1a; 左上角Undirected/Directed是无向图/有向图 左边 0-index &#xff0c;1-index为0下标&#xff0c;1下标。 Node Count为节点个数 Graph Data&#xff1a;最初尾节点的名称&#xff…

2023华数杯数学建模A题思路 - 隔热材料的结构优化控制研究

# 1 赛题 A 题 隔热材料的结构优化控制研究 新型隔热材料 A 具有优良的隔热特性&#xff0c;在航天、军工、石化、建筑、交通等 高科技领域中有着广泛的应用。 目前&#xff0c;由单根隔热材料 A 纤维编织成的织物&#xff0c;其热导率可以直接测出&#xff1b;但是 单根隔热…

【C# 基础精讲】C# 开发环境搭建(Visual Studio等)

安装C#开发环境是开始学习和使用C#编程的第一步。目前&#xff0c;最常用的C#开发环境是Microsoft Visual Studio&#xff0c;它是一套强大的集成开发环境&#xff08;IDE&#xff09;&#xff0c;提供了丰富的工具和功能&#xff0c;使开发C#应用程序变得更加便捷。以下是安装…

Docker极速安装Jenkins

安装 Jenkins 是一个常见的任务&#xff0c;使用 Docker 进行安装可以简化该过程并确保环境一致性。以下是在 Docker 中安装 Jenkins 的详细步骤&#xff1a; 安装 Docker: 首先&#xff0c;请确保您已在目标机器上安装了 Docker。根据您的操作系统&#xff0c;可以在 Docker 官…

CCF-CSP 29次 第三题【202303-3 LDAP】(多个STL+递归)

计算机软件能力认证考试系统 #include <iostream> #include <cstring> #include <algorithm> #include <vector> #include <unordered_map> #include <string>using namespace std;typedef long long LL;const int N 2510, M 510;int n…

Windows下安装Kafka(图文记录详细步骤)

Windows下安装Kafka Kafka简介一、Kafka安装前提安装Kafka之前&#xff0c;需要安装JDK、Zookeeper、Scala。1.1、JDK安装&#xff08;version&#xff1a;1.8&#xff09;1.1.1、JDK官网下载1.1.2、JDK网盘下载1.1.3、JDK安装 1.2、Zookeeper安装1.2.1、Zookeeper官网下载1.2.…

51单片机程序烧录教程

STC烧录步骤 &#xff08;1&#xff09;STC单片机烧录方式采用串口进行烧录程序&#xff0c;连接的方式如下图&#xff1a; &#xff08;2&#xff09;所以需要先确保USB转串口驱动是识别到&#xff0c;且驱动运行正常&#xff1b;是否可通过电脑的设备管理器查看驱动是否正常…

接口的顶级理解

目录 1.基本介绍 1.1定义接口 1.2接口使用 2.接口特性 3.实现多个接口 4.接口间的继承 5.接口使用实例 5.1对象比大小 5.1.1方法1&#xff1a;Comparable 接口法 5.1.2构造比较器&#xff08;Comparator接口法&#xff09; 5.2对象数组排序 5.2.1 实现 Comparable 接…

【力扣刷题 | 第二十四天】

目录 前言&#xff1a; 1049. 最后一块石头的重量 II - 力扣&#xff08;LeetCode&#xff09; 494. 目标和 - 力扣&#xff08;LeetCode&#xff09; 总结&#xff1a; 前言&#xff1a; 今天我们依然暴打动态规划 1049. 最后一块石头的重量 II - 力扣&#xff08;LeetCod…

每天一道leetcode:剑指 Offer 53 - II. 0~n-1中缺失的数字(适合初学者二分查找)

今日份题目&#xff1a; 一个长度为n-1的递增排序数组中的所有数字都是唯一的&#xff0c;并且每个数字都在范围0&#xff5e;n-1之内。在范围0&#xff5e;n-1内的n个数字中有且只有一个数字不在该数组中&#xff0c;请找出这个数字。 示例1 输入: [0,1,3] 输出: 2 示例2 …

uniapp 返回上一页并刷新

如要刷新的是mine页面 在/pages/mine/improveInfo页面修改信息&#xff0c;点击保存后跳转到个人中心&#xff08;/pages/mine/index&#xff09;页面并刷新更新数据 点击保存按钮时执行以下代码&#xff1a; wx.switchTab({url: /pages/mine/index }) // 页面重载 let pages …

在线文本转语音播放 (TTS)

具体请前往&#xff1a;在线文本转语音播放(TTS)

彩虹云商城搭建完整教程 完整的学习资料

彩虹云商城搭建完整教程 完整的学习资料提供给大家学习 随着电子商务的快速发展&#xff0c;越来越多的企业开始意识到开设一个自己的电子商城对于销售和品牌推广的重要性。然而&#xff0c;选择一家合适的网站搭建平台和正确地构建一个商城网站并不是一件容易的事情。本文将为…

Python操作MySQL将数据库表中的数据导出到excel

Author: liukai 2810248865qq.com Date: 2022-08-18 04:28:52 LastEditors: liukai 2810248865qq.com LastEditTime: 2023-06-29 09:35:25 FilePath: \PythonProject01\Python操作MySQL数据库及excel将数据库表中的数据导出到excel中.py Description: 这是默认设置,请设置custo…

华夏ERP信息泄露

声明 本文仅用于技术交流&#xff0c;请勿用于非法用途 由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;文章作者不为此承担任何责任。 文章作者拥有对此文章的修改和解释权。如欲转载或传播此文章&#xff0c…

14-4_Qt 5.9 C++开发指南_QUdpSocket实现 UDP 通信_UDP组播

文章目录 1. UDP组播的特性2. UDP 组播实例程序的功能3. 组播功能的程序实现4. 源码4.1 可视化UI设计4.2 mainwindow.h4.3 mainwindow.cpp 1. UDP组播的特性 下图简单表示了组播的原理。UDP 组播是主机之间“一对一组”的通信模式&#xff0c;当多个客户端加入由一个组播地址定…

智慧工地云平台源码,基于微服务+Java+Spring Cloud +UniApp +MySql开发

智慧工地可视化系统利用物联网、人工智能、云计算、大数据、移动互联网等新一代信息技术&#xff0c;通过工地中台、三维建模服务、视频AI分析服务等技术支撑&#xff0c;实现智慧工地高精度动态仿真&#xff0c;趋势分析、预测、模拟&#xff0c;建设智能化、标准化的智慧工地…

uni-app:实现列表单选功能

效果图&#xff1a; 核心解析&#xff1a; 一、 <view class"item_all" v-for"(item, index) in info" :key"index"><view classposition parameter-info text-over :classitem.checked?"checked_parameter":""…

ubuntu 暂时不能解析域名 解决办法

需要修改系统DNS 打开终端&#xff1a;输入 sudo vi /etc/resolv.conf 回车 在打开的配置文件中添加DNS信息 nameserver 114.114.114.114 nameserver 8.8.8.8 保存退出&#xff0c;重启系统即可。

【Nacos篇】Nacos基本操作及配置

官方文档&#xff1a;https://nacos.io/zh-cn/docs/v2/ecology/use-nacos-with-spring-cloud.html 前置条件&#xff1a;SpringCloud脚手架 单机模式下的Nacos控制台&#xff1a; <dependencies><!-- Registry 注册中心相关 --><dependency><groupId>…