Vue基础明晰

embedded/2024/9/19 12:12:32/ 标签: vue.js, javascript, ecmascript
Vue基础明晰

​ Vue长期处于会写而不去理解,此文简单梳理一下。

​ 一个Vue页面基本分为两部分:1.搜索、按钮等为主的表单域 2.展示数据库信息的表格域

  1. Form表单:

    请添加图片描述

    • 一个Form表单其下为多个form-item,各搜索输入框都包裹在form-item里。
    • 通常form通过v-model绑定值如queryParams,其下的form-item的label为各搜索框的前面文字值,包裹其内的输入框通过v-model绑定form绑定的对象的种种属性。 例如queryParams.month。绑定的各属性需要声明于数据域,通常以对象的方式存在如queryParams:{month:‘’,name:‘’}
  2. Table表格:

    • 一个Table表格的子元素为table-column,每一项为一个表格的一列,table通过:data来绑定某一对象的集合。

    • table-column的label为每一列表头文字,key为绑定对象的属性,prop为传值子组件,二者统一即可。

    • 要在Table展示中修改某一对象属性,即在表格中加入输入框,选择框等,需要在此列table-column的包裹中,创建一个template域,以v-slot来绑定。请添加图片描述

      输入框/选择框等通过v-model绑定scope.row.xmqk即可获知该元素在哪一行的哪个属性,从而与具体元素绑定,@change传此行-集合中的单个对象 相关值即可更改。

      无论是在主组件中亦或dialog里,都经常存在form或者table,究其本质即可-form为表单,作数据的提交(提交搜索条件、要更改的对象属性值等等),table为表格,作信息展示。


http://www.ppmy.cn/embedded/113028.html

相关文章

HarmonyOS开发之使用Picker(从相册选择图片),并且通过Swiper组件实现图片预览

一:效果图: 二:添加依赖 import picker from ohos.file.picker; 三:创建showDialog showDialog() {AlertDialog.show({message: 从相册选择,alignment: DialogAlignment.Bottom,offset: { dx: 0, dy: -12 },primaryButton: {val…

pip安装包、卸载包、更新包命令

pip安装包、卸载包、更新包命令 pip命令具体说明备注pip list列出当前环境下已安装的包pip install [安装包名]安装指定包pip install SomePackage1.0.4安装指定版本pip uninstall [卸载包名]卸载指定包pip install --upgrade [要升级的包名称]升级指定包pip install -U [要升…

C++笔记---继承(下)

1. 无法被继承的类 要实现无法被继承的类有两种方式: C98及其之前:将父类的构造函数设置为private成员。 C11及其之后:使用final关键字修饰父类。 将构造函数设置为private是因为:子类的构成必须调用父类的构造函数,但…

C++学习笔记(26)

七 、显示字符串中的字符 从界面上输入一个字符串(C 风格),把字符串中的每个字符显示出来,如果输入的是"abc",要求: 1)正序显示:a b c 2)逆序显示:…

NC 矩阵最长递增路径

系列文章目录 文章目录 系列文章目录前言 前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。 描述 给定一个 n 行…

【SQL】百题计划:SQL最基本的判断和查询。

[SQL]百题计划 Select product_id from Products where low_fats "Y" and recyclable "Y";

车辆重识别(关于卷积神经网络一些资料)2024/9/11

关于卷积神经网络的介绍 一,全连接神经网络 1,全连接神经网络的整体结构 X代表左边输入的数据(向量或者矩阵等等),Y代表模型对数据处理之后的结果,中间的节点都可以算作为隐藏层。 2,全连接神经…

【Linux】进程调度与切换

【Linux】进程调度与切换 1. 基本概念2. 进程切换3. 进程调度3.1运行队列实现优先级设计3.2 处理效率问题3.3 活动队列与过期队列3.4 如何解决饥饿问题3.5 active指针和expired指针 1. 基本概念 竞争性: 系统进程数目众多,而CPU资源只有少量,甚至1个&am…

【乐吾乐大屏可视化组态编辑器】API接口文档(pgsql)

API接口文档(pgsql) 在线使用:https://v.le5le.com/ 采用前后端分离架构,乐吾乐后端服务提供一整套完整的web组态编辑器的所有数据接口,包含2D/3D图纸接口服务、文件接口服务和用户接口服务等,安装包版本…

通信工程学习:什么是GPON吉比特无源光网络

GPON:吉比特无源光网络 GPON(Gigabit-Capable Passive Optical Network,吉比特无源光网络)是一种基于ITU-T G.984.x标准的最新一代宽带无源光综合接入技术。该技术以其高带宽、高效率、大覆盖范围和用户接口丰富等特点&#xff0c…

tcp线程进程多并发

tcp线程多并发 #include<myhead.h> #define SERPORT 8888 #define SERIP "192.168.0.118" #define BACKLOG 20 typedef struct { int newfd; struct sockaddr_in cin; }BMH; void *fun1(void *sss) { int newfdaccept((BMH *)sss)->newfd; …

Java 枚举 新特性

Java 枚举&#xff08;enum&#xff09;自JDK 1.5引入以来&#xff0c;随着版本的升级不断增强。本文将回顾枚举的演进&#xff0c;尤其是结合switch语句的应用&#xff0c;展示枚举如何在现代Java中变得更加灵活。 1. JDK 1.5&#xff1a;Java 枚举的诞生 在JDK 1.5之前&…

新手教学系列——用Nginx将页面请求分发到不同后端模块

在当今的Web开发中,前后端分离架构已经成为主流,尤其是大型应用项目。前端可以通过Vue这样的框架来统一管理页面和用户交互,而后端则通常会拆分成多个微服务模块,以便应对不同业务需求和功能扩展。在这样的架构下,Nginx作为一个高效、灵活的Web服务器,能够帮助我们将前端…

探索pytorch数据集中Mnist数据集的数据格式

1 问题 1.1安装pytorch时&#xff0c;由于使用的vscode编译器&#xff0c;所以采用pip进行安装&#xff0c;但是遇到pytorch版本与python版本不对应的问题。 1.2探索pytorch数据集中Mnist数据集的数据格式。 2 方法 2.1 首先查看自己电脑能够适应的pytorch版本2.2 打开pytorch的…

Windows与Linux下 SDL2的第一个窗口程序

Windows效果和Linux效果如下&#xff1a; 下面是代码&#xff1a; #include <stdio.h> #include "SDL.h"int main(int argc, char* argv[]) { // 初始化SDL视频子系统if (SDL_Init(SDL_INIT_VIDEO) ! 0){// 如果初始化失败&#xff0c;打印错误信息printf(&…

python植物大战僵尸项目源码【免费】

植物大战僵尸是一款经典的塔防游戏&#xff0c;玩家通过种植各种植物来抵御僵尸的进攻。 源码下载地址&#xff1a; 植物大战僵尸项目源码 提取码: 8muq

raksmart的G口大流量服务器怎么样?

RAKsmart的G口大流量服务器以其高性能、高可用性、灵活配置和全球覆盖等特点&#xff0c;成为许多企业和个人用户的理想选择。以下是对raksmart G口大流量服务器的具体介绍&#xff1a; 1. 服务特点&#xff1a; RAKsmart提供多种类型的G口大流量服务器&#xff0c;包括流媒体专…

阿里云人工智能ACP错题整理.txt

1、TextRank是一种关键词抽取和文档摘要的排序算法&#xff0c;由谷歌的网页重要性排序算法PageRank算法改进而来&#xff0c;利用文本内部的词语间的语义便可以抽取关键词&#xff0c;它能够从一个给定的文本中抽取出该文本的关键词、关键词组&#xff0c;并使用抽取式的自动文…

Spring 源码解读:手动实现Spring事件机制

引言 事件驱动的编程模式是现代软件架构中的一个重要概念&#xff0c;它允许不同组件之间通过发布事件和监听事件来实现松耦合。在Spring框架中&#xff0c;事件机制基于ApplicationEvent和ApplicationListener&#xff0c;为开发者提供了一种简洁而强大的事件发布和监听方式。…

MySQL中的别名

使用列别名 SELECT 列名 AS 列别名 FROM 表名 WHERE 条件; 示例&#xff1a;查询employees表将雇员last_name列定义别名为name。 select last_name as name from employees; select last_name name from employees; 使用表别名 SELECT 表别名.列名 FROM 表名 as 表别名 WH…