当前位置: 首页 > news >正文

Vue入门示例

今天滴学习目标!!!

  • 示例简介
    • HTML内容
      • 主体区域
      • 输入框
      • 列表区域
      • 统计和清空
    • JS
      • 引入Vue.js库
      • 定义Vue实例
      • el选项
      • data选项
      • methods选项

示例简介

HTML内容

本次实例讲解的是v-for、v-on、v-model来写这小小的实例,下面是实例的效果图,想要代码在最后面的结尾处:
在这里插入图片描述

主体区域

<section id="todoapp">这是整个记事本应用的容器

输入框

<header class="header">

  • 包含一个标题 (<h1>记事本</h1>) 和一个输入框 (<input>) 用于添加新的任务。
  • 输入框使用了Vue的v-model指令来双向绑定inputValue数据属性,这意味着输入框的值会自动更新到inputValue,同时如果inputValue改变,输入框的值也会更新。
  • @keyup.enter="add"是一个事件监听器,当用户在输入框中按下Enter键时,会调用add方法添加新任务。
  • autofocus="autofocus"确保输入框在页面加载时自动获得焦点。
  • autocomplete="off"禁用浏览器的自动完成功能。
  • placeholder="请输入任务"为输入框提供了一个占位符文本。

列表区域

<section class="main">

  • 包含一个无序列表 (<ul class="todo-list">),用于显示所有任务。
  • 列表项 (<li class="todo">) 通过Vue的v-for="(item,index) in list"指令循环生成,其中list是一个包含所有任务项的数组,item是当前循环到的任务项,index是当前项的索引。
  • 每个列表项内有一个.view的div,包含任务的序号({{ index+1 }})、任务描述({{ item }})和一个删除按钮(<button class="destroy">),点击删除按钮会调用remove(index)方法删除对应的任务。

统计和清空

<footer class="footer">

  • 当任务列表不为空时(v-show=“list.length!=0”),显示统计信息和清空按钮。
  • 统计信息(<span class="todo-count">)显示当前任务的数量({{ list.length }})。
  • 清空按钮(<button class="clear-completed">)点击时调用clear方法清除所有任务。

JS

在这里插入图片描述

引入Vue.js库

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

这行代码从jsdelivr CDN加载Vue.js的完整版本(包含编译器和运行时)。这是为了让Vue能够解析模板中的指令和组件。

定义Vue实例

var app = new Vue({  // 选项  
});

这里创建了一个新的Vue实例,并将其赋值给变量app。这个实例将管理之前HTML模板中id="todoapp"的元素及其子元素。

el选项

el: "#todoapp",

这指定了Vue实例将要挂载的DOM元素。在这个例子中,它挂载到id="todoapp"的元素上。

data选项

data: {  list: [],  inputValue: ""  
},

这里定义了Vue实例的数据对象。list是一个数组,用于存储任务项;inputValue是一个字符串,用于绑定到输入框的值。

methods选项

methods: {  add: function () {  this.list.push(this.inputValue);  },  remove: function (index) {  console.log("删除");  console.log(index);  this.list.splice(index, 1);  },  clear: function () {  this.list = [];  }  
},

这里定义了Vue实例的方法。

  • add方法将inputValue的值添加到list数组的末尾,然后输入框的值会被清空(因为v-model会自动更新)。
  • remove方法接受一个索引index作为参数,并从list数组中移除对应位置的任务项。这里还包含了两个console.log语句用于调试,它们会在控制台打印出"删除"和要删除的索引。
  • clear方法将list数组重置为一个空数组,从而清空所有任务项。

  现在,当用户在输入框中输入文本并按Enter键时,add方法会被调用,将文本添加到任务列表中。用户可以通过点击列表项旁边的删除按钮来调用remove方法删除任务,按钮的@click事件监听器会传递当前项的索引作为参数。最后,用户可以通过点击清除按钮来调用clear方法清空所有任务。

请注意:这段脚本应该放在HTML文档的底部,紧接在包含Vue模板的元素的后面,或者在一个确保DOM元素已经加载完毕的事件监听器中(例如DOMContentLoaded事件)。这样可以确保当Vue实例被创建时,它要挂载的DOM元素已经存在。

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" href="/favicon.ico" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>记事本</title><meta http-equiv="content-type" content="text/html; charset=UTF-8" /><meta name="robots" content="noindex, nofollow" /><meta name="googlebot" content="noindex, nofollow" /><meta name="viewport" content="width=device-width, initial-scale=1" /><!-- <script src="https://cdn.staticfile.net/vue/3.2.31/vue.global.min.js"></script><script src="https://cdn.staticfile.net/vue-router/4.2.4/vue-router.global.min.js"></script> --><link rel="stylesheet" type="text/css" href="../Vue/src/css/index.css" /><!-- 	<script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script> --></head><body><!-- 主体区域 --><section id="todoapp"><!-- 输入框 --><header class="header"><h1>记事本</h1><input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务"class="new-todo" /></header><!-- 列表区域 --><section class="main"><ul class="todo-list"><li class="todo" v-for="(item,index) in list"><div class="view"><span class="index">{{ index+1 }}.</span><label>{{ item }}</label><button class="destroy" @click="remove(index)"></button></div></li></ul></section><!-- 统计和清空 --><footer class="footer" v-show="list.length!=0"><span class="todo-count" v-if="list.length!=0"><strong>{{ list.length }}</strong>条数据</span><button v-show="list.length!=0" class="clear-completed" @click="clear">清除</button></footer></section><!-- 底部 --><!-- 开发环境版本,包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: "#todoapp",data: {list: [],inputValue: ""},methods: {add: function () {this.list.push(this.inputValue);},remove: function (index) {console.log("删除");console.log(index);this.list.splice(index, 1);},clear: function () {this.list = [];}},})</script><!-- <div id="app"></div> --><!-- <script type="module" src="/src/main.js"></script> --></body>
</html>

CSS

html,
body {margin: 0;padding: 0;
}
body {background: #fff;
}
button {margin: 0;padding: 0;border: 0;background: none;font-size: 100%;vertical-align: baseline;font-family: inherit;font-weight: inherit;color: inherit;-webkit-appearance: none;appearance: none;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}body {font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;line-height: 1.4em;background: #f5f5f5;color: #4d4d4d;min-width: 230px;max-width: 550px;margin: 0 auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-weight: 300;
}:focus {outline: 0;
}.hidden {display: none;
}#todoapp {background: #fff;margin: 180px 0 40px 0;position: relative;box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}#todoapp input::-webkit-input-placeholder {font-style: italic;font-weight: 300;color: #e6e6e6;
}#todoapp input::-moz-placeholder {font-style: italic;font-weight: 300;color: #e6e6e6;
}#todoapp input::input-placeholder {font-style: italic;font-weight: 300;color: gray;
}#todoapp h1 {position: absolute;top: -160px;width: 100%;font-size: 60px;font-weight: 100;text-align: center;color: rgba(175, 47, 47, .8);-webkit-text-rendering: optimizeLegibility;-moz-text-rendering: optimizeLegibility;text-rendering: optimizeLegibility;
}.new-todo,
.edit {position: relative;margin: 0;width: 100%;font-size: 24px;font-family: inherit;font-weight: inherit;line-height: 1.4em;border: 0;color: inherit;padding: 6px;border: 1px solid #999;box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);box-sizing: border-box;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.new-todo {padding: 16px;border: none;background: rgba(0, 0, 0, 0.003);box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
}.main {position: relative;z-index: 2;border-top: 1px solid #e6e6e6;
}.toggle-all {width: 1px;height: 1px;border: none; /* Mobile Safari */opacity: 0;position: absolute;right: 100%;bottom: 100%;
}.toggle-all + label {width: 60px;height: 34px;font-size: 0;position: absolute;top: -52px;left: -13px;-webkit-transform: rotate(90deg);transform: rotate(90deg);
}.toggle-all + label:before {content: "❯";font-size: 22px;color: #e6e6e6;padding: 10px 27px 10px 27px;
}.toggle-all:checked + label:before {color: #737373;
}.todo-list {margin: 0;padding: 0;list-style: none;max-height: 420px;overflow: auto;
}.todo-list li {position: relative;font-size: 24px;border-bottom: 1px solid #ededed;height: 60px;box-sizing: border-box;
}.todo-list li:last-child {border-bottom: none;
}.todo-list .view .index {position: absolute;color: gray;left: 10px;top: 20px;font-size: 16px;
}.todo-list li .toggle {text-align: center;width: 40px;/* auto, since non-WebKit browsers doesn't support input styling */height: auto;position: absolute;top: 0;bottom: 0;margin: auto 0;border: none; /* Mobile Safari */-webkit-appearance: none;appearance: none;
}.todo-list li .toggle {opacity: 0;
}.todo-list li .toggle + label {/*Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/*/background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E");background-repeat: no-repeat;background-position: center left;
}.todo-list li .toggle:checked + label {background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E");
}.todo-list li label {word-break: break-all;padding: 15px 15px 15px 60px;display: block;line-height: 1.2;transition: color 0.4s;
}.todo-list li.completed label {color: #d9d9d9;text-decoration: line-through;
}.todo-list li .destroy {display: none;position: absolute;top: 0;right: 10px;bottom: 0;width: 40px;height: 40px;margin: auto 0;font-size: 30px;color: #cc9a9a;margin-bottom: 11px;transition: color 0.2s ease-out;
}.todo-list li .destroy:hover {color: #af5b5e;
}.todo-list li .destroy:after {content: "×";
}.todo-list li:hover .destroy {display: block;
}.todo-list li .edit {display: none;
}.todo-list li.editing:last-child {margin-bottom: -1px;
}.footer {color: #777;padding: 10px 15px;height: 20px;text-align: center;border-top: 1px solid #e6e6e6;
}.footer:before {content: "";position: absolute;right: 0;bottom: 0;left: 0;height: 50px;overflow: hidden;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6,0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6,0 17px 2px -6px rgba(0, 0, 0, 0.2);
}.todo-count {float: left;text-align: left;
}.todo-count strong {font-weight: 300;
}.filters {margin: 0;padding: 0;list-style: none;position: absolute;right: 0;left: 0;
}.filters li {display: inline;
}.filters li a {color: inherit;margin: 3px;padding: 3px 7px;text-decoration: none;border: 1px solid transparent;border-radius: 3px;
}.filters li a:hover {border-color: rgba(175, 47, 47, 0.1);
}.filters li a.selected {border-color: rgba(175, 47, 47, 0.2);
}.clear-completed,
html .clear-completed:active {float: right;position: relative;line-height: 20px;text-decoration: none;cursor: pointer;
}.clear-completed:hover {text-decoration: underline;
}.info {margin: 50px auto 0;color: #bfbfbf;font-size: 15px;text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);text-align: center;
}.info p {line-height: 1;
}.info a {color: inherit;text-decoration: none;font-weight: 400;
}.info a:hover {text-decoration: underline;
}/*Hack to remove background from Mobile Safari.Can't use it globally since it destroys checkboxes in Firefox
*/
@media screen and (-webkit-min-device-pixel-ratio: 0) {.toggle-all,.todo-list li .toggle {background: none;}.todo-list li .toggle {height: 40px;}
}@media (max-width: 430px) {.footer {height: 50px;}.filters {bottom: 10px;}
}

相关文章:

Vue入门示例

今天滴学习目标&#xff01;&#xff01;&#xff01; 示例简介HTML内容主体区域输入框列表区域统计和清空 JS引入Vue.js库定义Vue实例el选项data选项methods选项 示例简介 HTML内容 本次实例讲解的是v-for、v-on、v-model来写这小小的实例&#xff0c;下面是实例的效果图&am…...

鸿蒙开发:实现全局异常捕获和异常查看

前言 开发中的异常信息&#xff0c;我们很容易排查&#xff0c;直接可以在控制台中就可以查看&#xff0c;但是&#xff0c;提交给测试同学或者上线后的异常信息&#xff0c;我们如何获取呢&#xff1f;这里我们很容易想起&#xff0c;三方sdk&#xff0c;比如常见的腾讯Bugly…...

Git和GitHub Desktop(Git客户端工具)下载安装教程

不说废话&#xff0c;直接开始。下载网址&#xff1a;https://git-scm.com/ 一.GIT下载 1.点击downloads 2.自己选择自己需要配置的版本 我是windows&#xff0c;所以选择的windows版本的安装 3.根据自己电脑的系统下载软件 我的是64位&#xff0c;选择64位安装 ps :下载很慢…...

Linux经常使用命令汇总和总结

Linux经常使用命令汇总和总结 文章目录 Linux经常使用命令汇总和总结一、基本命令二、目录操作命令三、文件操作命令四、压缩文件操作五、查找命令六、su、sudo七、系统服务八、网络管理九、定时任务指令crontab 配置十、其他命令 一、基本命令 1.1 关机和重启 关机 shutdown …...

three.js 灯光

环境光探针&#xff08;AmbientLightProbe&#xff09; 光照探针是一种在3D场景中添加光源的另一种方法。 AmbientLightProbe 是场景中单个环境光的光照估算数据。 有关光照探针的更多信息&#xff0c;请转到 LightProbe 。 构造函数 AmbientLightProbe( color : Color, int…...

ELK日志收集

目前&#xff0c;各个微服务系统的日志都保存在各自指定的目录中&#xff0c;如果这些微服务部署在不同的服务器上&#xff0c;那么日志文件也是分散在各自的服务器上。分散的日志不利于我们快速通过日志定位问题&#xff0c;我们可以借助ELK来收集各个微服务系统的日志并集中展…...

常见docker命令

1、查询已安装docker中某个image依赖包 docker run -it --rm --name my-python-container 【python37:v001】 /bin/bash 【】改成自己环境名字 docker run -it --name lane python37_test:v006 /bin/bash lane是容器名字&#xff0c;python37_test:v006 是镜像名 开启容器 do…...

测试新人刚入行,该如何规划以后的发展路径?

作为一个刚入行的测试新人&#xff0c;应该如何规划自己的职业发展路径&#xff1f;如何规划自己的技术路线&#xff1f;软件测试的段位都有哪些&#xff1f;他们之间的薪资差异如何&#xff1f; 听说这些问题&#xff0c;是目前想要入行软件测试的同学们最关心的。那么我们今…...

Boosting Object Detection with Zero-Shot Day-Night Domain Adaptation

摘要&#xff1a;低亮度场景检测是一个小众且重要的方向&#xff0c;首先在于数据集和过往的研究都集中在光照充足的环境下&#xff0c;其次如果使用传统的训练方法的话由于训练难度大&#xff0c;模型效果也不会很好&#xff0c;有幸的是&#xff0c;现在关于低亮度的研究已经…...

Chromium html<lable>c++接口定义

HTML <label> 元素&#xff08;标签&#xff09;表示用户界面中某个元素的说明。 1、<label> 在html_tag_names.json5中接口定义&#xff1a; &#xff08;third_party\blink\renderer\core\html\html_tag_names.json5&#xff09; {name: "label",inte…...

QT中中文显示乱码问题

在VS2013中用QT开发GUI应用程序&#xff0c;Qt中显示中文乱码 一&#xff1a; //解决QT中中文显示乱码问题 #pragma execution_character_set("utf-8") 二&#xff1a;在main函数中添加以下代码&#xff1a; #include <QTextCodec>void main() {QTextCod…...

[面试常见]Javascript基础知识

#1024程序员节|征文# Object.assign 和对象扩展运算符有什么区别?是深拷贝还是浅拷贝? 都进行浅拷贝&#xff0c;只赋值对象的第一层属性&#xff0c;而不会递归复制整个对象结构 **const mergedObj Object.assign({},obj1,obj2) JavaScript 中 Map 和 Object 的区别是什么?…...

使用注解@ExcelIgnoreUnannotated实现了在导出 Excel 时忽略没有被标注的字段

ExcelIgnoreUnannotated 注解用于在使用 Apache POI 或其他 Excel 处理库时&#xff0c;指示在导出 Excel 时忽略没有被标注的字段。这意味着只有被特定注解&#xff08;如 ExcelProperty&#xff09;标注的字段会被处理和导出。 作用 简化导出过程&#xff1a;只导出需要的字…...

线程的同步

目录 引入 认识条件变量 快速认识接口​编辑 认识条件变量​编辑 测试代码​编辑 生产消费模型 为何要使用生产者消费者模型 理解 编写生产消费模型 BlockingQueue 单生产单消费 多生产多消费 引入 同步&#xff1a;在保证数据安全的前提下&#xff0c;让线程…...

【启明智显分享】ZX7981PG/ZX7981PM融入官方OpenWrt,启明智显SDK/官方OpenWrt任由选择!

好消息&#xff01;好消息&#xff01;启明智显ZX7981PG和ZX7981PM正式融入官方 OpenWrt 的大家庭啦&#xff01;现在开发者不仅可以基于启明智显的SDK进行二次开发&#xff0c;还可以直接应用官方OpenWrt以及我们的开源资料进行开发&#xff01; 借助OpenWrt的强大生态&…...

如何用java发送包含表格形式的邮件

问题&#xff1a; 如何用java发送包含表格形式的邮件&#xff1f; 方法&#xff1a; 发用freemaker工具来替换html的表格变量&#xff0c;从而动态生成了html。然后再发送这个html格式&#xff08;不能用纯文本&#xff09;文本即可。 优化流程&#xff1a; 1、准备模板&#x…...

讲个故事:关于一次接口性能优化的心里路程

这是一个程序猿写的第一个故事&#xff0c;请各位懂行的客官静下心来&#xff0c;慢慢品读。就知道我为什么要单独写一个文章来记录这次过程了&#xff0c;因为实在是太坎坷了...... 背景介绍 近期项目投产时遇到一个问题&#xff0c;投产后在验证时发现大部分用户系统登…...

Centos7升级到openssh9.9

openssh9.9 是2024.9.20出的最新版ssh。因为客户扫描出一大堆centos7的漏洞&#xff0c;全是这个openssh的&#xff0c;好多补丁&#xff0c;所以索性升级到最新版。 需要自己制作rpm包&#xff0c;这个我是不懂&#xff0c;照这个来&#xff1a; Linux服务器升级openssh9.9最…...

使用 STM32F407 串口实现 485 通信

准备工作 了解485通信基本概念与原理&#xff1a;RS485通信详解_485通讯de接什么口-CSDN博客 安装编译软件&#xff1a;keil uVision 5.6 软件资料&#xff1a;STM32CubeF4 固件包&#xff0c;正点原子RS485通信例程 ​​​​​​​参考视频&#xff1a;第26讲 基础篇-新建H…...

基于NERF技术重建学习笔记

NeRF&#xff08;Neural Radiance Fields&#xff09;是一种用于3D场景重建的神经网络模型&#xff0c;能够从2D图像生成逼真的3D渲染效果。它将场景表征为一个连续的5D函数&#xff0c;利用了体积渲染和神经网络的结合&#xff0c;通过学习光线穿过空间时的颜色和密度来重建场…...

webView 支持全屏播放

webView 支持全屏播放 直接上代码 public class CustomFullScreenWebViewClient extends WebChromeClient {WebView webView;Context context;/*** 视频全屏参数*/protected static final FrameLayout.LayoutParams COVER_SCREEN_PARAMS new FrameLayout.LayoutParams(ViewG…...

QGIS之三十二DEM地形导出三维模型gltf

效果 1、准备数据 (1)dem.tif (2)dom.tif 2、qgis加载dem和dom数据 3、安装插件 插件步骤可以参考这篇文章 QGIS之二十四安装插件 安装了Qgis2threejs插件,结果...

【python爬虫】携程旅行景点游客数据分析与可视化

一.选题背景 随着旅游业的快速发展&#xff0c;越来越多的人选择通过互联网平台预订旅行产品&#xff0c;其中携程网作为国内领先的在线旅行服务提供商&#xff0c;拥有大量的旅游产品和用户数据。利用爬虫技术可以获取携程网上各个景点的游客数据&#xff0c;包括游客数量、游…...

python实现onvif协议下控制摄像头变焦,以及融合人形识别与跟踪控制

#1024程序员节 | 征文# 这两天才因为项目需要&#xff0c;对网络摄像头的视频采集以及实现人形识别与跟踪技术。对于onvif协议自然起先也没有任何的了解。但是购买的摄像头是SONY网络头是用在其他地方的。因为前期支持探究项目解决方案&#xff0c;就直接拿来做demo测试使用。 …...

【Vue】Vue3.0(十四)接口,泛型和自定义类型的概念及使用

上篇文章&#xff1a; 【Vue】Vue3.0&#xff08;十三&#xff09;中标签属性ref&#xff08;加在普通标签上、加在组件标签上&#xff09;、局部样式 &#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;Vue专栏&#xff1a;点击&#xff01; ⏰️创作时间&…...

【C++】红黑树万字详解(一文彻底搞懂红黑树的底层逻辑)

目录 00.引入 01.红黑树的性质 02.红黑树的定义 03.红黑树的插入 1.按照二叉搜索树的规则插入新节点 2.检测新节点插入后&#xff0c;是否满足红黑树的性质 1.uncle节点存在且为红色 2.uncle节点不存在 3.uncle节点存在且为黑色 04.验证红黑树 00.引入 和AVL树一样&am…...

开源FluentFTP实操,操控FTP文件

概述&#xff1a;通过FluentFTP库&#xff0c;轻松在.NET中实现FTP功能。支持判断、创建、删除文件夹&#xff0c;判断文件是否存在&#xff0c;实现上传、下载和删除文件。简便而强大的FTP操作&#xff0c;提升文件传输效率。 在.NET中&#xff0c;使用FluentFTP库可以方便地…...

论文解读 | ECCV2024 AutoEval-Video:一个用于评估大型视觉-语言模型在开放式视频问答中的自动基准测试...

点击蓝字 关注我们 AI TIME欢迎每一位AI爱好者的加入&#xff01; 点击 阅读原文 观看作者讲解回放&#xff01; 作者简介 陈修元&#xff0c;上海交通大学清源研究院硕士生 概述 总结来说&#xff0c;我们提出了一个新颖且具有挑战性的基准测试AutoEvalVideo&#xff0c;用于全…...

postgresql14主从同步流复制搭建

1. 如果使用docker搭建请移步 Docker 启动 PostgreSQL 主从架构&#xff1a;实现数据同步的高效部署指南_docker安装postgresql主从同步-CSDN博客 2. 背景 pgsql版本&#xff1a;PostgreSQL 14.13 on x86_64-pc-linux-gnu, compiled by gcc (GCC) 4.8.5 20150623 (Red Hat 4…...

企业信息化管理中的数据集成方案:销售出库单对接

企业信息化管理中的数据集成方案&#xff1a;销售出库单对接 销售出库单旺店通→金蝶&#xff1a;高效数据集成案例分享 在企业信息化管理中&#xff0c;数据的高效流动和准确对接是实现业务流程自动化的关键。本文将聚焦于一个具体的系统对接集成案例&#xff1a;如何将旺店通…...

简述程序开发的流程/专业seo排名优化费用

ceph是一种开源的分布式的存储系统&#xff0c;包含以下几种存储类型&#xff1a; 块存储&#xff08;rbd&#xff09;对象存储(RADOS Fateway)文件系统&#xff08;cephfs&#xff09;块存储&#xff08;rbd&#xff09; 块是一个字节序列&#xff08;例如&#xff0c;512字节…...

中国建设银行投诉网站/品牌维护

目录前言场景防抖核心解释修复场景例子节流核心解释修复场景例子尾言前言 防抖和节流&#xff0c;这是前端防止用户频繁调用同一个接口的方法&#xff0c;比如短时间重复点击上传同一个文件&#xff0c;短时间重复点击提交同一个评论&#xff0c;异步的操作还没给你带来反馈&a…...

满亦工作室 网站建设/推广方案应该有哪些方面

个人是跑业务的上班族&#xff0c;平时加班累成狗就不说了&#xff0c;主要是跑外勤的时间比较多&#xff0c;在外面接电话真的是太不方便了。为此&#xff0c;曾经花大价钱买过AirPods pro&#xff0c;但是在非常嘈杂的环境中&#xff0c;通话降噪效果真的一般般。后来一次搞定…...

wordpress商城 注册/抖音seo搜索引擎优化

很多时候&#xff0c;我们会遇到这种情况&#xff0c;组件加载需要请求后台数据&#xff0c;然后填充组件。那么我们一般会这样处理&#xff1a;如【使用异步请求的方式】代码&#xff1b; 加载组价的时候&#xff0c;未获得数据&#xff0c;render一个空的div&#xff1b;然后…...

商标查询官方入口/免费优化网站

1、打 开 新 标 签 页启动 Vim 时用 "vim -p filename ...":tabe[dit]:tabnew 在当前标签页之后打开带空窗口的新标签页。:tabe[dit] [opt] [cmd]:tabnew [opt] [cmd]打开新标签页并编辑 &#xff0c;其余和 |:edit| 类同。:tabf[ind] [opt] [cmd]打开新标签…...

给客户做网站图片侵权/seo代码优化步骤

它是一个替代变量-sql * plus功能-不能这样工作.您必须调用undefine& slno或接受slno …使其接受其他输入,但是这些也是sqlplus,而不是pl / sql命令,因此您将无法在循环中调用它们,您可能在这里唯一能做的就是INSERT INTO TEST_TABLE VALUES(&slno1,SYSDATE);INSERT IN…...