Vue的表单处理全解

news2024/9/24 3:26:41

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

  • 表单处理
  • 知识点
    • 基本用法
    • 文本
    • 多行文本
    • 单选按钮
    • 复选框
    • 多个复选框
    • 选择框
    • 值绑定
    • 单选按钮
    • 复选框
    • 选择框
    • 修饰符
    • .number
    • .trim
    • 综合小练习

表单处理

在日常的开发中，表单随处都被使用到，如：登录，问题反馈功能等。对表单的数据收集和绑定也是很常规的工作。在一般开发中处理表单，需要通过操作 DOM 来实现，是一个相对繁琐且低效率的工作。然而在 Vue 项目中你可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。轻松地实现表单数据收集或绑定，提高了开发效率。它会根据控件类型自动选取正确的方法来更新元素。负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。接下来带领大家看看其基础用法。

知识点

  • v-model 指令
  • 基础用法
  • 值绑定
  • 修饰符

基本用法

常用表单元素
在这里插入图片描述
注意

注意一：v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。直接给元素 value 赋值不会生效的，你应该通过 JavaScript 在组件的 data 选项中声明初始值。

注意二：v-model 在内部使用不同的属性为不同的输入元素并抛出不同的事件，具体体现我们在表单 修饰符小节，给大家说明：

  • text 和 textarea 元素使用 value 属性和 input 事件（内部监听 input 事件）；
  • checkbox 和 radio 使用 checked 属性和 change 事件（内部监听 change 事件）；
  • select 字段将 value 作为 prop 并将 change 作为事件（内部监听 change 事件）。

说明： change 和 input 区别就是，input 实时更新数据，change 不是实时更新。

input 监听
change 监听

带着注意事项，进入 Vue 表单处理学习。

文本

直接为文本绑定 v-model 指令，在 data 数据项中声明绑定数据项，可以轻松完成双向数据绑定。让我们来看看神奇的 v-model 指令。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>syl-vue-test</title>
    <!-- 引入 vue.js -->
    <script src="vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <input v-model="msg" placeholder="请输入..." />
      <p>输入的是: {{ msg }}</p>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          msg: "",
        },
      });
    </script>
  </body>
</html>

多行文本

多行文本和文本用法相同，使用 v-model 指令，在实例 data 中声明绑定的 message 数据项，即可完成多行文本数据双向绑定。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>vue</title>
    <script src="vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <span>Multiline message is:</span>
      <p style="white-space: pre-line;">{{ message }}</p>
      <br />
      <textarea v-model="message" placeholder="add multiple lines"></textarea>
    </div>
    <script>
      var vue = new Vue({
        el: "#app",
        data() {
          return {
            message: "",
          };
        },
      });
    </script>
  </body>
</html>

在这里插入图片描述

单选按钮

将单选按钮绑定到同一个 picked，即可完成数据绑定，当第一个单选被选中 picked 的值为第一个单选按钮的 value，同样当第二个单选被选中 picked 的值为第二个单选按钮的 value。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>vue</title>
    <script src="vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 将单选按钮绑定到同一个 picked -->
      <input type="radio" id="one" value="One" v-model="picked" />
      <label for="one">One</label>
      <br />
      <input type="radio" id="two" value="Two" v-model="picked" />
      <label for="two">Two</label>
      <br />
      <span>Picked: {{ picked }}</span>
    </div>
    <script>
      var vue = new Vue({
        el: "#app",
        data() {
          return {
            picked: "",
          };
        },
      });
    </script>
  </body>
</html>

在这里插入图片描述

复选框

复选框绑定的是一个布尔值（true or false），同样在复选框元素上使用 v-model 指令，在实例 data 中声明 checked，即可完成复选框数据的双向绑定。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>vue</title>
    <script src="vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <input type="checkbox" id="checkbox" v-model="checked" />
      <label for="checkbox">{{ checked }}</label>
    </div>
    <script>
      // 绑定布尔值
      var vue = new Vue({
        el: "#app",
        data() {
          return {
            checked: false,
          };
        },
      });
    </script>
  </body>
</html>

多个复选框

通常开发中，会用到多个复选框，那么我们就需要把复选框，绑定到同一个数组，方便数据收集。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>vue</title>
    <script src="vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <input type="checkbox" id="syl1" value="syl1" v-model="checkedNames" />
      <label for="syl1">syl1</label>
      <input type="checkbox" id="syl2" value="syl2" v-model="checkedNames" />
      <label for="syl2">syl2</label>
      <input type="checkbox" id="syl3" value="syl3" v-model="checkedNames" />
      <label for="syl3">syl3</label>
      <br />
      <span>Checked names: {{ checkedNames }}</span>
    </div>
    <script>
      var vue = new Vue({
        el: "#app",
        data() {
          return {
            checkedNames: [],
          };
        },
      });
    </script>
  </body>
</html>

选择框

在 select 元素上使用 v-model 指令，可以绑定当前选中的 option。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>vue</title>
    <script src="vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- select 标签是绑定  数据项 selected -->
      <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <span>Selected: {{ selected }}</span>
    </div>
    <script>
      var vue = new Vue({
        el: "#app",
        data() {
          return {
            selected: "",
          };
        },
      });
    </script>
  </body>
</html>

在这里插入图片描述

值绑定

文本和多行文本值绑定

直接在标签上指定 value 是不能成功的，会被 Vue 忽略。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>syl-vue-test</title>
    <!-- 引入 vue.js -->
    <script src="vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 直接给 value 不会生效 -->
      <input v-model="msg" value="hello" />
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          msg: "",
        },
      });
    </script>
  </body>
</html>

在这里插入图片描述

正确模式，通过 JavaScript 在组件的 data 选项中声明初始值：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>syl-vue-test</title>
    <!-- 引入 vue.js -->
    <script src="vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 直接给 value 不会生效 -->
      <input v-model="msg" />
      <br />
      <br />
      <br />
      <textarea v-model="msg"></textarea>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          msg: "hello",
        },
      });
    </script>
  </body>
</html>

在这里插入图片描述

单选按钮

checkbox 和 radio 使用 checked 属性，所以直接给元素 value 值，当选中时 data 中声明的绑定项的值就为元素 value。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>vue</title>
    <script src="vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 当选中时，`picked` 为字符串 "a" -->
      <input type="radio" v-model="picked" value="a" />
      {{picked}}
    </div>
    <script>
      var vue = new Vue({
        el: "#app",
        data() {
          return {
            picked: "",
          };
        },
      });
    </script>
  </body>
</html>

在这里插入图片描述

复选框

复选框可以是布尔值，toggle 为 true 或 false，当选中时，toggle 为 true，未选中时，toggle 为 false。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>vue</title>
    <script src="vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 当复选框选中时，toggle 的值为 true，未选中为 false -->
      <input type="checkbox" v-model="toggle" />
      {{toggle}}
    </div>
    <script>
      var vue = new Vue({
        el: "#app",
        data() {
          return {
            toggle: false,
          };
        },
      });
    </script>
  </body>
</html>

在日常开发中，复选框的值很多情况是特定的值，那么我们可以这样做，在标签中声明 true-value=“yes” 和 false-value=“no” 这两个属性，当选中时就是 true-value 属性指定的值，当未选中时就是 false-value 属性值。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>vue</title>
    <script src="vue.min.js"></script>
  </head>

  <body>
    <div id="app">
      <input
        type="checkbox"
        v-model="toggle"
        true-value="yes"
        false-value="no"
      />
      <p>toggle:{{toggle}}</p>
    </div>
    <script>
      // 通过 true-value="yes" false-value="no" 属性控制，选中时 toggle 值为 yes，未选中时为 no
      var vue = new Vue({
        el: "#app",
        data() {
          return {
            toggle: "",
          };
        },
      });
    </script>
  </body>
</html>

如果你只想要选中有值，你可以这样做，true-value 属性指定值，false-value 属性设为空值。

<input type="checkbox" v-model="toggle" true-value="name" false-value="" />

选择框

选择框的值绑定，直接指定每个 option 的 value，可以是固定的，也可以是使用 v-bind:value 动态绑定的：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>vue</title>
    <script src="vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 当选中第一个选项时，selected 为字符串 "abc" -->
      <select v-model="selected">
        <!-- 固定赋值value -->
        <option value="abc">ABC</option>
        <!-- 使用 v-bind 绑定值 -->
        <option v-bind:value="optionValue">DEF</option>
      </select>
      <p>{{selected}}</p>
    </div>
    <script>
      var vue = new Vue({
        el: "#app",
        data() {
          return {
            selected: "",
            // 第二个 option 的值
            optionValue: "efg",
          };
        },
      });
    </script>
  </body>
</html>

在这里插入图片描述

修饰符

Vue 总结了日常开发中经常进行的表单处理业务，进行了封装，使用表单修饰符轻松解决一些表单处理的业务逻辑。

.lazy

开始介绍表单处理时，我们说了几点注意，不同的元素，使用的值不同，抛出的事件也不同。可能开发中，我们不需要数据实时更新，那么，我们怎么将 input 事件与 change 事件替换，可以使用 .lazy 修饰符，可以将抛出事件由 input 改为 change，使表单元素惰性更新，不实时更新。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>vue</title>
    <script src="vue.min.js"></script>
  </head>

  <body>
    <div id="app">
      <!--使用 .lazy 修饰符将文本框 抛出的事件改为 change 事件，不再实时更新，只有文本框失去焦点才更新数据 惰性更新 -->
      <input v-model.lazy="msg" />
      <p>{{msg}}</p>
    </div>
    <script>
      var vue = new Vue({
        el: "#app",
        data: {
          msg: "hello",
        },
      });
    </script>
  </body>
</html>

在这里插入图片描述

.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

这通常很有用，因为即使在 type=“number” 时，HTML 输入元素的值返回字符串（默认），需要自己进行类型转换。如果这个值无法被 parseFloat() 解析，则会返回原始的值。 给 v-model 添加 number 修饰符，用户即使输入的是非数值类型，也会进行转换，无法转换时，会返回原始的。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>vue</title>
    <script src="vue.min.js"></script>
  </head>

  <body>
    <div id="app">
      <p>没有使用 .number 修饰符</p>
      <input v-model="number1" type="number" />
      <!-- 使用 typeof 对值类型检测 -->
      <p>{{typeof(number1)}}</p>
      <p>使用 .number 修饰符</p>
      <input v-model.number="number2" type="number" />
      <!-- 使用 typeof 对值类型检测 -->
      <p>{{typeof(number2)}}</p>
    </div>
    <script>
      var vue = new Vue({
        el: "#app",
        data: {
          number1: "",
          number2: "",
        },
      });
    </script>
  </body>
</html>

在这里插入图片描述

.trim

表单元素值首尾空格，自动过滤。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>vue</title>
    <script src="vue.min.js"></script>
  </head>

  <body>
    <div id="app">
      <input v-model.trim="msg" type="text" />
      <p>首尾空格被过滤了：{{msg}}</p>
    </div>
    <script>
      var vue = new Vue({
        el: "#app",
        data: {
          msg: "",
        },
      });
    </script>
  </body>
</html>

在这里插入图片描述

综合小练习

表单数据收集与绑定。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>vue</title>
    <script src="vue.min.js"></script>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      html,
      body {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      #app {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        width: 400px;
        height: 400px;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <form class="app-form">
        <span>name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <input type="text" v-model="username" />
        <br />
        <span>password:</span><input type="password" v-model="password" />
        <br />
        <span
          >sex:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
        >
        <input type="radio" id="man" value="man" v-model="sex" />
        <label for="man">man</label>
        <input type="radio" id="woman" value="woman" v-model="sex" />
        <label for="woman">women</label>
        <br />
        <span>hobby:</span>
        <input type="checkbox" id="game" value="game" v-model="hobby" />
        <label for="game">game</label>
        <input
          type="checkbox"
          id="basketball"
          value="basketball"
          v-model="hobby"
        />
        <label for="basketball">basketball</label>
        <input type="checkbox" id="study" value="study" v-model="hobby" />
        <label for="study">study</label>
        <br />
        <br />
        <p>名字：{{username}}</p>
        <p>密码：{{password}}</p>
        <p>性别:{{sex}}</p>
        <p>爱好：{{hobby}}</p>
      </form>
    </div>
    <script>
      var vue = new Vue({
        el: "#app",
        data() {
          return {
            username: "",
            password: "",
            sex: "man", // 性别单选默认勾选男
            hobby: [],
          };
        },
      });
    </script>
  </body>
</html>

在这里插入图片描述

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

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

相关文章

urllib之urlopen和urlretrieve的headers传入以及parse、urlparse、urlsplit的使用

urllib之urlopen和urlretrieve的headers传入以及parse、urlparse、urlsplit的使用

urllib库是什么?urllib库python的一个最基本的网络请求库&#xff0c;不需要安装任何依赖库就可以导入使用。它可以模拟浏览器想目标服务器发起请求&#xff0c;并可以保存服务器返回的数据。urllib库的使用&#xff1a;1、request.urlopen(1)只能传入url的方式from http.clie…
阅读更多...
有状态登录和无状态登录详解

有状态登录和无状态登录详解

有状态登录和无状态登录详解一 有状态登录二 无状态登陆无状态登陆介绍&#xff1a;无状态token生成方式一 Jwt方式二 RSA256非对称加密方式三 区别与差异四 参考连接一 有状态登录 有状态登录(Session)&#xff1a; 传统上&#xff0c;我们会使用 Session 和 Cookie 来保存用…
阅读更多...
云计算介绍

云计算介绍

云计算介绍概述云分类服务模式应用起源传统 IT 技术存在的问题云计算的产生云计算的发展趋势主要特点关键技术关键技术一览表虚拟化桌面显示协议用户个性化配置海量数据并行计算云安全相关技术相关技术一览表分布式计算网格计算效用计算概述 云计算&#xff08;Cloud Computin…
阅读更多...
rest和rpc的区别

rest和rpc的区别

一、rest&#xff1a; REST 不是一种协议&#xff0c;它是一种架构。大部分REST的实现中使用了RPC的机制&#xff0c;大致由三部分组成&#xff1a; 1、method&#xff1a;动词&#xff08;get、post之类的&#xff09; 2、Host&#xff1a;URI&#xff08;统一资源标识&…
阅读更多...
华为OD机试题，用 Java 解【静态扫描最优成本】问题

华为OD机试题，用 Java 解【静态扫描最优成本】问题

最近更新的博客 华为OD机试题，用 Java 解【停车场车辆统计】问题华为OD机试题，用 Java 解【字符串变换最小字符串】问题华为OD机试题，用 Java 解【计算最大乘积】问题华为OD机试题，用 Java 解【DNA 序列】问题华为OD机试 - 组成最大数（Java） | 机试题算法思路 【2023】使…
阅读更多...
2023-02-28 mmap的原理及使用-思考

2023-02-28 mmap的原理及使用-思考

摘要: 最近在使用mmap解决数据库内存占用损耗过高导致OOM的问题, 不得不说在有些场景下mmap是非常有用. 本文主要涉及一些对mmap的思考. mmap本身的思考: mmap和文件系统的交互规则是什么mmap中给进程虚拟内存映射的文件上的部分,是什么? 为什么是页缓存? 有没有文件缓存?…
阅读更多...
Vscode快速配置(1)之基础工具

Vscode快速配置(1)之基础工具

VScode快速配置(1)之基础工具(v1.0) Author&#xff1a;Once Day Date&#xff1a;2023年2月19日 漫漫长路&#xff0c;才刚刚开始… &#xff08;嵌入式程序员开发环境&#xff09; 1. 概述 下面是一些基础插件&#xff0c;基本上嵌入式程序员都会用到。 首先是远程连接…
阅读更多...
力扣-销售分析III

力扣-销售分析III

大家好&#xff0c;我是空空star&#xff0c;本篇带大家了解一道简单的力扣sql练习题。 文章目录前言一、题目&#xff1a;1084. 销售分析III二、解题1.正确示范①提交SQL运行结果2.正确示范②提交SQL运行结果3.正确示范③提交SQL运行结果4.正确示范④提交SQL运行结果5.其他总结…
阅读更多...
Apache Hive入门

Apache Hive入门

文章目录一、Apache Hive概述1.1、什么是Hive1.2、使用Hive原因1.3、Hive和Hadoop关系二、Hive功能思想2.1、映射信息记录2.2、SQL语法解析、编译三、Hive架构、组件3.1、Hive架构图3.2Hive组件四、Hive常用操作4.1、数据类型4.1.1、基本数据类型4.1.2、集合数据类型4.2、数据库…
阅读更多...
动态网页的核心——JSP

动态网页的核心——JSP

文章目录1&#xff0c;JSP 概述2&#xff0c;JSP 小案例2.1 搭建环境2.2 导入 JSP 依赖2.3 创建 jsp 页面2.4 编写代码2.5 测试3&#xff0c;JSP 原理4&#xff0c;JSP 总结4.1 JSP的 缺点4.2技术的发展历程4.3JSP的必要性最后说一句1&#xff0c;JSP 概述 JSP&#xff08;全称…
阅读更多...
IB数学/生物/化学/物理所需的教材有哪些

IB数学/生物/化学/物理所需的教材有哪些

高中阶段的学习是迈向大学的重要步骤&#xff0c;涉及到的课程分为许多结构&#xff0c;其中最为常见的则是通过IB, AP和A-Level的学习&#xff0c;实现迈入国外大学的目的。 IB课程即国际文凭组织IBO&#xff08;International Baccalaureate Organization&#xff09;&#x…
阅读更多...
「TCG 规范解读」规范结构

「TCG 规范解读」规范结构

可信计算组织&#xff08;Ttrusted Computing Group,TCG&#xff09;是一个非盈利的工业标准组织&#xff0c;它的宗旨是加强在相异计算机平台上的计算环境的安全性。TCG于2003年春成立&#xff0c;并采纳了由可信计算平台联盟&#xff08;the Trusted Computing Platform Alli…
阅读更多...
「TCG 规范解读」TCG 主规范-命令

「TCG 规范解读」TCG 主规范-命令

可信计算组织（Ttrusted Computing Group,TCG）是一个非盈利的工业标准组织，它的宗旨是加强在相异计算机平台上的计算环境的安全性。TCG于2003年春成立，并采纳了由可信计算平台联盟（the Trusted Computing Platform Alliance,TCPA）所开发的规范。现在的规范都不是最终稿，都…
阅读更多...
为什么需要学习shell、shell的作用

为什么需要学习shell、shell的作用

课程基于B站于超课程笔记 03 Shebang的正确玩法_哔哩哔哩_bilibili P1 shell的作用 P2 shell执行命令的流程 P3 Shebang的正确玩法 什么是shell及组成 shell概念 shelll组成 Shebang概念 /bin/sh /bin/bash一样&#xff0c;都是指向一个bash解释器 [rootlocalhost ~]#…
阅读更多...
JVM篇之类加载与字节码技术

JVM篇之类加载与字节码技术

一.类文件结构 首先获得.class字节码文件 方法&#xff1a; 在文本文档里写入java代码&#xff08;文件名与类名一致&#xff09;&#xff0c;将文件类型改为.javajava终端中&#xff0c;执行javac X:…\XXX.java // HelloWorld 示例 public class HelloWorld {public stat…
阅读更多...
IB课程体系及计分方式

IB课程体系及计分方式

IB课程体系及计分方式 在全球将近150个国家&#xff0c;超过4000个学校&#xff0c;有100万的IB学生。学生在IB体系中修读相同的教材&#xff0c;学生毕业时参加全球统一考试&#xff0c;试卷的命题及批阅均由IB总部直接统筹规划&#xff0c;全世界的IB学生学术水平因此得以统一…
阅读更多...
面试了一个32岁的程序员，一个细节就看出来是培训班的····

面试了一个32岁的程序员，一个细节就看出来是培训班的····

首先&#xff0c;我说一句&#xff1a;培训出来的&#xff0c;优秀学员大有人在&#xff0c;我不希望因为带着培训的标签而无法达到用人单位和候选人的双向匹配&#xff0c;是非常遗憾的事情。 最近&#xff0c;在网上看到这样一个留言&#xff0c;引发了程序员这个圈子不少的…
阅读更多...
利用逻辑分析仪解析串口通讯数据

利用逻辑分析仪解析串口通讯数据

利用逻辑分析仪解析串口通讯数据&#x1f527;采用的是市面上最为广泛使用的USB逻辑分析仪: &#x1f4da;资料下载&#xff1a; 链接: https://pan.baidu.com/s/1c9lwWDbtJxaJED-kzSbiJg 提取码: 5vnr&#x1f528;测试工具为&#xff1a;Logic 2.4.6&#xff0c;也可以使用Pu…
阅读更多...
华为OD机试题，用 Java 解【开放日活动】问题

华为OD机试题，用 Java 解【开放日活动】问题

最近更新的博客 华为OD机试题，用 Java 解【停车场车辆统计】问题华为OD机试题，用 Java 解【字符串变换最小字符串】问题华为OD机试题，用 Java 解【计算最大乘积】问题华为OD机试题，用 Java 解【DNA 序列】问题华为OD机试 - 组成最大数（Java） | 机试题算法思路 【2023】使…
阅读更多...
华为OD机试题，用 Java 解【求字符串中所有整数的最小和】问题

华为OD机试题，用 Java 解【求字符串中所有整数的最小和】问题

最近更新的博客 华为OD机试题，用 Java 解【停车场车辆统计】问题华为OD机试题，用 Java 解【字符串变换最小字符串】问题华为OD机试题，用 Java 解【计算最大乘积】问题华为OD机试题，用 Java 解【DNA 序列】问题华为OD机试 - 组成最大数（Java） | 机试题算法思路 【2023】使…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023