Vue2-黑马(五)

news2024/9/29 15:32:40

目录:

(1)vue2-组件重用

(2)vue2-element ui安装

(3)vue2-ElementUI-table

(4)Element-ui-分页pagination


(1)vue2-组件重用

页面上有很多的html和js代码,具备一定的重用性,我们可以把这些代码集中起来,形成一个可重用的组件

可重用的组件放到这个里面:components

定义子组件: 

 在父组件使用子组件:

引入子组件,并多一个components属性

 并在模板中,使用,标签名字为引入的小写单词之间-

 在父组件中写入名字,子组件并不会使用

 如果想要子组件用到父组件提供的名字,需要使用slot插槽标签,起到占位作用:

子组件的样式时写死了,我们想要自己控制样式

需要在options里面加props是一个数组包含自定义属性的名字和类型 

 

 

(2)vue2-element ui安装

我们自己创建组件,比较麻烦,成本太高啦,我们采用组件库别人写好的组件 ,大大减少开发成本

 

 

 

下载后在package.json自动加上这个依赖 

 使用的话也需要引入:在入口js中引入:mian.js

我们自己去使用组件的时候,我们需要子在option对象里加这个组件,但是element ui的组件太多啦,一个一个去加太麻烦了我们使用Use方法把Element对象传给他,内部会把element-ui的所有组件都给他加进去,将来页面就可以使用element-ui的标签啦

 

 创建组件页面:在main.js中引入Example9View.vue

 element ui的按钮组件:

 

(3)vue2-ElementUI-table

 进入官方网站:选择版本:

选择使用的组件:

打开显示代码:进行复制

 复制到页面:

往下滑,列出了按钮可用的属性:

mounted方法作为对象的属性,可以简写省略 

 data方法也可以简写:

 使用表格组件el-table:

ea-table-column:列

prop:绑定遍历出来对象的属性

(4)Element-ui-分页pagination

 分页组件:el-pagination   

     属性total:总条数  

    page-size:每页记录数

    current-page:当前页

 

     layout:分页条外观,可以控制组件外观哪些显示哪些不显示 :prev:向上按钮, pager:页码部分,next:向下按钮,jumper:跳转的输入框,total:总页数,->:总条数向右对齐

sizes:每页显示几条记录

page-size=“【】”:自己设置每页显示条数的大小

 我们学到的上面的组件,发现有些属性需要加:,而有些不需要加,那么什么时候需要加和不需要加呢?

加了:就是v-bind简写,底层要执行数据绑定,数据绑定意味着等号后面这个值,来自JavaScript,需要来js中找属性名相同的值,没加冒号的,等号右面就是它最终的结果啦不会到js中找啦  

 分压中的加了:,在js中没有找到,会把=后面的当成表达式来解析

加:就是做数据绑定,不加:就是当成普通的值来处理

 后端使用对象接收:

 在前端也需要定义一个对象:

对象的属性跟分页插件的属性进行绑定:

分页组件中的变化不会双向绑定给js,我们以前学过v-model,但是它只适用于表单的标签

但是分页组件不能使用v-model,就需要使用分页的事件啦

 当当前页改变后,会触发currnentChange事件,我们能不能在currentChange函数里把页面的数据同步给javaScript

sizeChange事件:当每页条数改变后,可以把数据同步给js

然后进行同步:同步给js

 

这样事件加完啦,分页组件里,当前页改变和每页条数的改变同步给js,这样就完成双向绑定,

这样就可以发送请求给服务器啦,第一个情况是组件第一次加载的时候,需要向服务器要一次数据把第一页的数据获取回来,然后是在切换页面或(页码改变)的时候,又需要向服务器发送请求要新的数据 

这样我们可以写一个方法发送请求:

 发送get请求

 

发送请求成功,只是数据没有正常显示 ,需要修改前端的显示

请求发送成功 处理响应:

分页组件绑定真正的total

 

 

改变每页显示: 

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

PyTorch中的符号索引和函数索引用法

Pytorch中很多函数都采用的是函数式索引的思路,而且使用函数式索引对代码可读性会有很大提升。 张量的符号索引 张量也是有序序列,我们可以根据每个元素在系统内的顺序位置,来找出特定的元素,也就是索引。 一维张量的索引 一维…

离线安装JumpServer

官网操作手册: https://docs.jumpserver.org/zh/v3/installation/setup_linux_standalone/offline_install/ 环境要求:(内存最小需要4G) 架构图 安装部署 1、下载 JumpServer官网下载: https://community.fit2cloud…

定点数的二进制表示形式

定点数的二进制表示形式 文章目录定点数的二进制表示形式什么是定点数表示格式数值范围与分辨率转换python 转换定点数C 双精度浮点数转换为8位和16位定点数C 将定点数转回浮点数测试什么是定点数 在嵌入式系统中,为了降低运算复杂度,通常还会使用定点数…

有趣的数学之回文数

“回文”是指正读反读都能读通的句子,它是古今中外都有的一种修辞方式和文字游戏,如“我为人人,人人为我”等,最有名的莫过于“上海自来水来自海上,人过大佛寺佛大过人 ”。你们知道吗,在数学中也有这样一类…

30多份软件测试报告模板,如何写一份优秀测试报告模板流程

相信很多做软件测试的小伙伴在软件测试后期,都为软件测试报告总结花费了很多的精力,那么如何做好软件测试报告呢?一份优秀的测试报告又包含哪些内容呢? 测试报告的核心要素 一、测试结论 从测试工程师的专业角度分析&#xff0…

pytorch进阶学习(四):使用不同分类模型进行数据训练(alexnet、resnet、vgg等)

课程资源:5、帮各位写好了十多个分类模型,直接运行即可【小学生都会的Pytorch】_哔哩哔哩_bilibili 目录 一、项目介绍 1. 数据集准备 2. 运行CreateDataset.py 3. 运行TrainModal.py 4. 如何切换显卡型号 二、代码 1. CreateDataset.py 2.Train…

如何基于ChatGPT+Avatar搭建24小时无人直播间

0 前言 最近朋友圈以及身边很多朋友都在研究GPT开发,做了各种各样的小工具小Demo,AI工具用起来是真的香!在他们的影响下,我也继续捣鼓GPT Demo,希望更多的开发者加入一起多多交流。 上一篇结合即时通 IM SDK捣鼓了一个…

因为这三个面试题,我与字节offer失之交臂

我一个朋友挑战3个月入职字节,一路过关斩将直到终面,着实把我惊了一把,可惜的是,他倒在了最后三个面试题上。 我很讶异,前面不是打得很好吗?怎么会在最后几题上犯错误呢? 朋友说:别…

电瓶隔离器工作原理与发展简史

电瓶隔离器(Battery Isolators)工作原理与发展简史 电池隔离器(英文:Battery Isolators),又叫双电池隔离器、双电瓶隔离器、双电瓶保护器,还有叫双电池分离器的。 电瓶隔离器其实并没有真正的隔离,负极是始终连在一起的。房车、…

拓展系统命令

文章目录拓展系统命令使用方式拓展系统命令快速运行方法命令 - ZFASTRUN安全运行方法命令 - ZFASTSAFERUN快速运行Query方法命令 - ZFASTQUERY安全运行Query方法 命令 - ZSAFEQUARY防止调试时误将数据提交命令 - ZTRN在Terminal执行SQL语句命令 - ZSQL安全Global命令 - ZSAFEKI…

动态内存管理【上篇】

文章目录⚙️1.为什么存在动态内存分配⚙️2.动态内存函数的介绍📬2.1. malloc函数📬2.2. free函数📬2.3. calloc函数📬2.4. realloc函数⚙️3.常见的动态内存错误🔒3.1.对NULL指针的解引用操作🔒3.2.对动态…

二叉树(OJ)

单值二叉树(力扣) ---------------------------------------------------哆啦A梦的任意门------------------------------------------------------- 我们来看一下题目的具体要求: 既然我们都学了二叉树了,我们就应该学会如何去…

笔记:Java关于轻量级锁与重量级锁之间的问答

问题:如果在轻量级锁状态下出现锁竞争,不一定会直接升级为重量级锁,而是会先尝试自旋获取锁,那么有a b两个线程竞争锁,a成功获取锁了,b就一定失败,那么轻量级锁就一定升级为重量级锁&#xff0c…

基于Bazel + SQLFluff实现SQL lint

背景SQL进行版本化控制后,我们希望为SQL加入lint步骤。这样做的好处是我们可以在真正执行SQL前发现问题。本文中,我们通过Bazel执行SQLFluff[1]以实现SQL的lint。SQLFluff是一款使用Python语言使用的,支持SQL多方言的SQL lint工具。它的特点是…

设计模式-创建型模式之单例模式

6.单例模式6.1. 模式动机对于系统中的某些类来说,只有一个实例很重要,例如,一个系统中可以存在多个打印任务,但是只能有一个正在工作的任务;一个系统只能有一个窗口管理器或文件系统;一个系统只能有一个计时…

360安全卫士退出企业安全云模式

360安全卫士退出企业安全云模式前言360企业安全云关闭企业安全云提醒退出企业安全云模式前言 360安全卫士推出了企业安全云,并会给个人版用户进行推送,虽然可以关闭,但有可能会不小心升级为企业安全云,用户可能并不不习惯&#x…

2023铜鼓半马5月14日开跑,4月18日启动报名!

长寿铜鼓,康养胜地!众翼电气2023铜鼓半程马拉松暨英雄马系列赛(铜鼓站)新闻发布会今日召开,铜鼓县委常委、宣传部部长熊涛,铜鼓县教育体育局党委书记、局长孙桃基,铜鼓县文广新旅局党组书记、局…

SpringBoot API 接口防刷

SpringBoot API 接口防刷接口防刷接口防刷原理代码实现RequestLimit 注解RequestLimitIntercept 拦截器WebMvcConfig配置类Controller控制层验证接口防刷 接口防刷: 顾名思义,想让某个接口某个人在某段时间内只能请求N次。 在项目中比较常见的问题也有,…

【Python】Python程序中使用request库连接外国网站的方法

确认你的socks端口: 然后程序可以这么写: import requests import socks import socket# 创建 SOCKS5 代理连接 socks.set_default_proxy(socks.SOCKS5, "127.0.0.1", 10808) socket.socket socks.socksocket# 发送请求 response request…

Java高级特性 - 多线程基础(2)常用函数【第1关:线程的状态与调度 第2关:常用函数(一)第3关:常用函数(二)】

目录 第1关:线程的状态与调度 第2关:常用函数(一) 第3关:常用函数(二) 第1关:线程的状态与调度 相关知识 为了完成本关你需要掌握: 1.线程的状态与调度&#xff1b…