前端学习——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: {
    // 计算属性的 getter
    reversedMessage: 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();
      });
    },

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

[深度学习]yolov9+bytetrack+pyqt5实现目标追踪

【简介】 目标追踪简介 目标追踪是计算机视觉领域中的一个热门研究方向&#xff0c;它涉及到从视频序列中实时地、准确地跟踪目标对象的位置和运动轨迹。随着深度学习技术的快速发展&#xff0c;基于深度学习的目标追踪方法逐渐展现出强大的性能。其中&#xff0c;YOLOv9&…

STM32F103x 的时钟源

AHB (Advanced High-performance Bus) 高速总线&#xff0c;用来接高速外设的。 APB (Advanced Peripheral Bus) 低速总线&#xff0c;用来接低速外设的&#xff0c;包含APB1 和 APB2。 APB1&#xff1a;上面连接的是低速外设&#xff0c;包括电源接口、备份接口、 CAN 、 US…

【MySQL 探索之旅】初始MySQL数据库

&#x1f4da;博客主页&#xff1a;爱敲代码的小杨. ✨专栏&#xff1a;《Java SE语法》 | 《数据结构与算法》 | 《C生万物》 ❤️感谢大家点赞&#x1f44d;&#x1f3fb;收藏⭐评论✍&#x1f3fb;&#xff0c;您的三连就是我持续更新的动力❤️ &#x1f64f;小杨水平有…

three.js第一个3D案例

在正式学习Three.js之前&#xff0c;先做一些必要的准备工作&#xff0c;具体说就是下载threejs官方文件包&#xff0c;threejs官方文件包提供了很多有用的学习资源。 threejs官方文件包所有版本&#xff1a;https://github.com/mrdoob/three.js/releases threejs文件资源目录…

python递归算法

递归算法 一、嵌套调用的过程二、递归的基本原则1、递归的基本原则2、无限递归调用3、正常递归调用4、阶乘问题5、力扣&#xff1a;231. 2 的幂6、力扣面试题 08.05. 递归乘法7、力扣、326. 3 的幂8、力扣342. 4的幂 一、嵌套调用的过程 def show1():print("show 1 run s…

IDEA生成Java Doc帮助文档

使用场景 使用IDEA&#xff08;本次使用2020.3版&#xff09;将自己写的常用的工具类打成jar包&#xff0c;安装到maven本地仓库&#xff0c;最后生成对应的doc参考文档。 操作流程 方法一 选中项目 右键 show in Explor&#xff0c;如下图&#xff1a; 选中地址栏 cmd 输入…

C++基础知识(六:继承)

首先我们应该知道C的三大特性就是封装、继承和多态。 此篇文章将详细的讲解继承的作用和使用方法。 继承 一个类&#xff0c;继承另一个已有的类&#xff0c;创建的过程 父类(基类)派生出子类(派生类)的过程 继承提高了代码的复用性 【1】继承的格式 class 类名:父类名 {}; 【…

【Leetcode】2583. 二叉树中的第 K 大层和

文章目录 题目思路代码结果 题目 题目链接 给你一棵二叉树的根节点 root 和一个正整数 k 。 树中的 层和 是指 同一层 上节点值的总和。 返回树中第 k 大的层和&#xff08;不一定不同&#xff09;。如果树少于 k 层&#xff0c;则返回 -1 。 注意&#xff0c;如果两个节点与根…

Houdini_RBD_刚体约束

仍然是看视频的笔记&#xff0c;摸着大佬们过河。有点杂有点乱&#xff0c;如有错误&#xff0c;多多指教。原视频链接&#xff1a;rbd_CONSTRAINT01_哔哩哔哩_bilibili 文章/笔记个人推荐&#xff1a; 1、知乎刘鹏云_RBD 2、感谢R姐的无偿pdf笔记分享——哔哩哔哩Rosarita_Art…

C++入门学习(三十六)函数的声明

程序是自上而下运行的&#xff0c;比如我下面的代码&#xff1a; #include <iostream> #include<string> using namespace std;int main() { int a1; int b2;int sumaddNumbers(a,b); cout<<sum;return 0; }int addNumbers(int a, int b) { int sum …

ONLYOFFICE桌⾯应⽤程序v8.0:功能丰富,⽀持多平台

文章目录 可填写的 PDF 表单RTL支持电子表格中的新增功能其他改进和新增功能与 Moodle 集成用密码保护 PDF 文件快速创建文档本地界面主题总结 继 ONLYOFFICE 文档 v8.0 的发布后&#xff0c;很高兴&#xff0c;因为适用于 Linux、Windows 和 macOS 的 ONLYOFFICE 桌面应用程序…

Android studio 安装以及第一个程序

一、配置 1、下载JDK&#xff08;JDK&#xff1a;Java Development Kit Java开发工具包&#xff09; 打开Java Downloads | Oracle下载地址下载相应的JDK版本即可&#xff0c;需要注意的是请下载JDK11以上的版本&#xff0c;并且是64位版 2、安装JDK 双击打开已经下载好的安装…

复刻大模型 Sora 有多难?一张图带你读懂 Sora 的技术路径

近日&#xff0c;OpenAI 发布了视频生成模型Sora&#xff0c;最大的Sora模型能够生成一分钟的高保真视频。同时OpenAI称&#xff0c;可扩展的视频生成模型&#xff0c;是构建物理世界通用模拟器的一条可能的路径。 Sora 能够生成横屏1920*1080视频&#xff0c;竖屏1080*1920视…

MATLAB练习题:估计离开家之前能拿到报纸的概率

​讲解视频&#xff1a;可以在bilibili搜索《MATLAB教程新手入门篇——数学建模清风主讲》。​ MATLAB教程新手入门篇&#xff08;数学建模清风主讲&#xff0c;适合零基础同学观看&#xff09;_哔哩哔哩_bilibili 清风订了一份报纸&#xff0c;送报人可能在早上6&#xff1a;…

【论文精读】OS-Copilot: Towards Generalist Computer Agents with Self-Improvement

OS-Copilot: Towards Generalist Computer Agents with Self-Improvement 前言ABSTRACT1 INTRODUCTION2 THE OS-COPILOT FRAMEWORK2.1 PLANNER2.2 CONFIGURATOR2.2.1 DECLARATIVE MEMORY2.2.2 PROCEDURAL MEMORY2.2.3 WORKING MEMORY 2.3 ACTOR 3 THE FRIDAY AGENT3.1 A RUNNIN…

JavaScript原型继承与面向对象编程思想

原型继承与面向对象编程思想 在JavaScript中&#xff0c;原型(prototype)、构造函数(constructor)和实例对象(instance)是面向对象编程中的重要概念&#xff0c;并且它们之间存在着紧密的关系。 原型(prototype)&#xff1a;原型是JavaScript中对象之间关联的一种机制。每个Ja…

Clickhouse系列之连接工具连接、数据类型和数据库

基本操作 一、使用连接工具连接二、数据类型1、数字类型IntFloatDecimal 2、字符串类型StringFixedStringUUID 3、时间类型DateTimeDateTime64Date 4、复合类型ArrayEnum 5、特殊类型Nullable 三、数据库 一、使用连接工具连接 上一篇介绍了clickhouse的命令行登录&#xff0c…

mysql 事务详解一

前言 提到事务&#xff0c;大家肯定不陌生。在我们现实生活中也是存在的&#xff0c;比如我们去超市购物&#xff0c;然后去支付。虽然是两个步骤&#xff0c;必须保证同时成功&#xff0c;这个交易才可以完成。 如果这个场景&#xff0c;拿到我们购物系统&#xff0c;就是几…

【kubernetes】kubeadm部署k8s集群(3主3从+keepalived/nginx负载均衡高可用)

目录 一、完成系统初始化 步骤一&#xff1a;常规环境初始化 步骤二&#xff1a;内核版本升级以及内核限制文件参数修改 步骤三&#xff1a;提前准备好负载均衡器和keepalived(接着之前的二进制部署修改的) 二、所有节点部署docker&#xff0c;以及指定版本的kubeadm 步骤…

大厂面试-美团高频考察算法之重排链表

本文学习目标或巩固的知识点 学习如何处理链表重排类题目 巩固反转链表巩固快慢指针巩固合并链表 提前说明&#xff1a;算法题目来自力扣、牛客等等途径 &#x1f7e2;表示简单 &#x1f7e1;表示中等 &#x1f534;表示困难 &#x1f92e;表示恶心 博主真实经历&#xff0c;…