前端学习——vue学习

文章目录

  • 1. < el-form> 属性 model、prop、rules
  • 2. v-bind 与 v-model
  • 3. v-if 与 v-show
  • 4. v-for 循环语句
  • 5. 计算属性 computed
  • 6. 监视属性 watch
  • 7. 下拉框 el-select、el-option
  • 8. 自定义事件
  • 9. async与await实现异步调用

1. < el-form> 属性 model、prop、rules

我们大致了解的el-form 中 model的作用:目前看来主要是为了配合表单验证。里面的逻辑大概是,在el-form-item上写一个prop,这个prop左手对应着数据源(即用model.prop找到对应的数据源),右手对应着验证规则(即用rules.prop找到对应的规则),然后才能快乐的验证。

<el-form ref="form" :model="form" :rules="rules" label-width="100px"><el-form-item label="用户名" prop="name"><el-input v-model="form.name"></el-input></el-form-item>
</el-form>
// 在data/return中定义规则form: {name: '',//这里是空的但截图有值 因为该项目需要拿取后端传来的用户信息 但不影响阅读},ru
les: {name: [{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }],
}

在这里插入图片描述
1. 把model去掉后,看看效果

无论你输入什么,都是显示 “请输入用户名”,看来model的作用是为rules校验传递一个能提供被检测内容的源数据。
在这里插入图片描述

2. 把prop去掉后,看看效果

把prop去掉后直接失去验证效果
在这里插入图片描述

3. prop改为address,rules改为address,看看会发生什么

效果和第一种情况一样。
在这里插入图片描述

2. v-bind 与 v-model

  • v-bind是一个单向数据绑定,映射关系:Model->View,我们不需要进行额外的DOM操作,只需要进行Model的操作就可以实现视图的联动更新。
  • v-model是一个双向数据绑定,映射关系:View接受的数据,传给model,model的数据再传给view。把Model绑定到View的同时也将View绑定到Model上,这样就既可以通过更新Model来实现View的自动更新,也可以通过更新View来实现Model数据的更新。所以,当我们用JavaScript代码更新Model时,View就会自动更新,反之,如果用户更新了View,Model的数据也自动被更新了。

3. v-if 与 v-show

语法

<标签 v-if="true/false"></标签><标签 v-show="true/false"></标签><!--true:显示   false:隐藏-->

原理

  • v-if:通过 创建、销毁 dom元素的方式达到显示、隐藏效果(销毁后有一个占位符 )。
  • v-show:通过css控制样式style达成显示、隐藏效果。

使用

  • v-if 有更高的切换消耗 ,如果运行条件不大可能改变,则v-if 较合适。
  • v-show有更高的渲染消耗,如果需要频繁切换,则v-show 较合适。

4. v-for 循环语句

遍历数组元素

需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。

<div id="app"><ol><li v-for="site in sites">{{ site.name }}</li></ol>
</div><script>
new Vue({el: '#app',data: {sites: [{ name: 'Runoob' },{ name: 'Google' },{ name: 'Taobao' }]}
})
</script>

遍历对象属性

可以通过一个对象的属性来迭代数据:

<div id="app"><ul><li v-for="(value, key, index) in object">{{ index }}. {{ key }} : {{ value }}</li></ul>
</div><script>
new Vue({el: '#app',data: {object: {name: '菜鸟教程',url: 'http://www.runoob.com',slogan: '学的不仅是技术,更是梦想!'}}
})
</script>

5. 计算属性 computed

声明了一个计算属性 reversedMessage 。供的函数将用作属性 vm.reversedMessage 的 getter 。vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时vm.reversedMessage 也会更新。

<div id="app"><p>原始字符串: {{ message }}</p><p>计算后反转字符串: {{ reversedMessage }}</p>
</div><script>
var vm = new Vue({el: '#app',data: {message: 'Runoob!'},computed: {// 计算属性的 getterreversedMessage: function () {// `this` 指向 vm 实例return this.message.split('').reverse().join('')}}
})
</script>

在这里插入图片描述

6. 监视属性 watch

watch:{tipShow(newVal, oldVal){console.log("原始数值为", oldVal);console.log("修改数值为", newVal);} 
}

7. 下拉框 el-select、el-option

el-option的属性说明

  • label:这是给用户看的,当点击下拉菜单时,会出来选项,用户看到的选项就是这个
  • value:这是你点击某个label(option)之后,将对应的值给v-model绑定的值model
  • key:这个呢相当于身份令牌,唯一的,防止出错,虽然没有也行,但是官网推荐还是加上为好。
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px"><el-form-item label="用户姓名" prop="userId"><el-select v-model='queryParams.userId' style="" class="selectClass"><el-option v-for='item in userList' :key='item.userId':label="item.nickName" :value="item.userId">{{ item.nickName }}</el-option></el-select></el-form-item></el-form>

8. 自定义事件

这里的 pushData 就是自定义事件了
在这里插入图片描述

实现父子组件双向传递

  • 方法一:
    在这里插入图片描述
  • 方法二:
    在这里插入图片描述

9. async与await实现异步调用

// 获取待处理事件总数async getTotalCount() {let taskCount = await this.getTaskList();let maintenanceCount = await this.getMaintenanceList();let insuranceCount = await this.getInsuranceList();this.totalCount = taskCount + maintenanceCount + insuranceCount;},// 获取待审批任务列表async getTaskList() {// 构造参数let obj = {state: 0,};let data = {...this.page,...obj,};// 访问后端,获取待审批任务列表return new Promise((resolve, reject) => {taskList(data).then((res) => {if (res && res.data) {resolve(res.data.total);}}).catch();});},// 获取保养设备列表async getMaintenanceList() {let data = {...this.page,};return new Promise((resolve, reject) => {searchMaintenance(data).then((res) => {if (res && res.data) {resolve(res.data.total);}}).catch();});},// 获取过期设备列表async getInsuranceList() {let data = {...this.page,};return new Promise((resolve, reject) => {searchInsurance(data).then((res) => {if (res && res.data) {resolve(res.data.total);}}).catch();});},

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

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

相关文章

vue3的elementPlus中使用el-input控制用户输入正确金额,el-input-number遇到的一系列问题

今天在做项目的时候&#xff0c;本来顺顺利利就能上线&#xff0c;但是突然上面给了个任务&#xff0c;在输入框输入金额时&#xff0c;小数点后面位数超过三位就不能在输入了。当时我天真的以为这很好解决&#xff0c;接下来发生的事情让我措不及防。 首先&#xff0c;我原先使…

javaScript前端文件一致性校验-md5方法

需求背景&#xff1a;在处理文件上传时使用了第三方平台存储&#xff0c;后端在下载时需要校验与文件与上传时是否一致&#xff0c;已校验文件是否丢失的问题。如我们公司业务场景使用了分段上传&#xff0c;分段上传如果没有校验合并后的文件是否完整&#xff0c;可能会存在部…

Elasticsearch:基于 Langchain 的 Elasticsearch Agent 对文档的搜索

在今天的文章中&#xff0c;我们将重点介绍如何使用 LangChain 提供的基础设施在 Python 中构建 Elasticsearch agent。 该 agent 应允许用户以自然语言询问有关 Elasticsearch 集群中数据的问题。 Elasticsearch 是一个强大的搜索引擎&#xff0c;支持词法和向量搜索。 Elast…

121 Linux C++ 通讯架构实战 nginx源码学习目的,学习源码前期准备

零 nginx 源码学习的目的 把nginx中重要的&#xff0c;有用的&#xff0c;代码提取出来作为我们自己知识库的一部分&#xff0c;以备将来使用 一&#xff0c;nginx 源码在windows 上也可以下载下来。 我们下载下来&#xff0c;注意下载的是nginx 的 linux源码&#xff0c; 只…

项目管理:如何成功完成一个项目

项目管理是一项重要的技能&#xff0c;它可以帮助你成功地完成一个项目。以下是一些关键的步骤&#xff0c;可以帮助你实现这一目标&#xff1a; 1. 明确项目目标&#xff1a;在开始项目之前&#xff0c;你需要明确项目的目标。这将有助于你制定一个明确的计划&#xff0c;并确…

HDFS 之 Topology(Rack) Awareness - 机架感知

1、 简介 机架感知在大型分布式存储系统中非常实用,可以有效保证数据的高可用,同时提升集群稳定性。在HDFS中,也实现了类似Topology Awareness的机制,只不过是采用软件的方式模拟。 2、机架感知存在的意义 分布式存储系统的一个特殊之处在于其通常包含非常多的机器。Clie…

【目标航迹管理(1)】基于d-s证据理论信息融合的多核目标跟踪方法

1 引言&#xff1a;从航机起始方法开始 我们为什么会有这个议题&#xff1f;因为航机起始方法。 处理目标航迹起始的方法主要分为两大类&#xff1a;批处理和序贯。 在杂波密度比较高的环境下&#xff0c;比如有红外卫星或地面雷达监视区域&#xff0c;则选用批处理方法&…

【Spring】SpringBoot 单元测试

目 录 一.什么是单元测试&#xff1f;二.单元测试有哪些好处&#xff1f;三.Spring Boot 单元测试使用单元测试的实现步骤 一.什么是单元测试&#xff1f; 单元测试&#xff08;unit testing&#xff09;&#xff0c;是指对软件中的最小可测试单元进行检查和验证的过程就叫单元…

Java基本面试问题(一)

上篇文章Java面试10个问题的一些标准回答&#xff1a; Java中的基本数据类型有哪些&#xff1f; 标准回答&#xff1a;Java中的基本数据类型包括整型&#xff08;int, long, short, byte&#xff09;、浮点型&#xff08;float, double&#xff09;、字符型&#xff08;char&am…

chat GPT第一讲

计算机的语言奇迹&#xff1a;探秘ChatGPT的智能回答和写作能力 目前我们这个行业&#xff0c;最火的话题无疑是AI人工智能&#xff0c;类似ChatGPT这样的智能Ai,今天剩下的时间不多&#xff0c;每天一个主题&#xff0c;我给大家讲一下计算机回答问题和写作的能力&#xff0c;…

模型量化--int8量化

文章目录 一、什么是模型量化&#xff1f;二、常见的模型量化方法1.权重量化&#xff08;Weight Quantization&#xff09;2.激活量化&#xff08;Activation Quantization&#xff09;3.混合精度量化&#xff08;Mixed Precision Quantization&#xff09;4. 剪枝和量化&#…

Vue监听器(上)之组合式watch

1. 定义监听器 //要监视的属性被改变时触发 watch(要监视的属性, (更改后的心值, 更改前的旧值) > {具体操作}, );//监视对象为getter的时候 //表达式内任意响应式属性被改变时触发 watch(() > return表达式, (表达式的新值, 表达式的旧值) > {具体操作} );//数组中任…

【MySQL】多表操作、事务、索引

MySQL MYSQL 多表设计 一对多插入测试数据外键约束(物理外键)使用逻辑外键 MYSQL 多表设计 一对一表结构 MYSQL 多表设计 多对多 MYSQL 多表设计 一对多 建表语句 员工表 CREATE TABLE tb_emp (id INT UNSIGNED PRIMARY KEY AUTO_INCREMENT COMMENT ID,username VARCHAR(20) N…

图片大了怎么缩小上传?30秒解决图片大小问题

在上传图片到网站、社交媒体、电子邮件或其他在线平台时&#xff0c;压缩图片可以减小文件大小&#xff0c;加快上传速度&#xff0c;并节省带宽和存储空间&#xff0c;许多网站和应用程序都有对上传图片大小的限制&#xff0c;因此利用在线图片压缩工具&#xff08;https://ww…

WordPres Bricks Builder 前台RCE漏洞

免责声明&#xff1a;文章来源互联网收集整理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该…

Jetpack Compose 架构层

点击查看&#xff1a;Jetpack Compose 架构层 官网 本页面简要介绍了组成 Jetpack Compose 的架构层&#xff0c;以及这种设计所依据的核心原则。 Jetpack Compose 不是一个单体式项目&#xff1b;它由一些模块构建而成&#xff0c;这些模块组合在一起&#xff0c;构成了一个完…

VSCODE include错误 找不到 stdio.h

解决办法&#xff1a; Ctrl Shift P 打开命令面板&#xff0c; 键入 “Select Intellisense Configuration”&#xff08;下图是因为我在写文章之前已经用过这个命令&#xff0c;所以这个历史记录出现在了第一行&#xff09; 再选择“Use gcc.exe ”&#xff08;后面的Foun…

【OpenAI官方课程】第六课:ChatGPT文本扩展Expending

欢迎来到ChatGPT 开发人员提示工程课程&#xff08;ChatGPT Prompt Engineering for Developers&#xff09;&#xff01;本课程将教您如何通过OpenAI API有效地利用大型语言模型&#xff08;LLM&#xff09;来创建强大的应用程序。 本课程由OpenAI 的Isa Fulford和 DeepLearn…

C语言-数组指针与指针数组

一、简介 对于使用C语言开发的人来说&#xff0c;指针&#xff0c;大家都是非常熟悉的。数组&#xff0c;大家也同样熟悉。但是这两个组合到一起的话&#xff0c;很多人就开始蒙圈了。这篇文章&#xff0c;就详细的介绍一下这两个概念。 指针数组和数组指针&#xff0c;听起来非…

PyTorch概述(二)---MNIST

NIST Special Database3 具体指的是一个更大的特殊数据库3&#xff1b;该数据库的内容为手写数字黑白图片&#xff1b;该数据库由美国人口普查局的雇员手写 NIST Special Database1 特殊数据库1&#xff1b;该数据库的内容为手写数字黑白图片&#xff1b;该数据库的图片由高…