Vue基础7

news2025/2/4 19:00:14

Vue基础7

  • 生命周期
    • 引出生命周期
      • 用css animation实现
      • 用定时器实现
      • 错误：用methods实现
      • 使用生命周期函数mounted实现
      • 生命周期定义
    • 分析生命周期
      • 挂载流程
        • beforeCreate()
        • created()
        • beforeMount()
        • mounted()
        • template的作用
      • 更新流程
        • beforeUpdate()
        • updated()
      • 销毁流程
        • beforeDestroy()
    • 生命周期总结

生命周期

引出生命周期

请添加图片描述

用css animation实现

<!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>生命周期</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <style>
    .normal{
      animation: use 2s linear infinite;
    }
    @keyframes use{
      to{
        opacity: 0;
      }
    }
  </style>
</head>
<body>
  <div id="app">
    <h2 class="normal">欢迎学习Vue</h2>
  </div>
</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>生命周期</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h2 :style="{opacity}">欢迎学习Vue</h2>
  </div>
</body>
<script>
    const vm=new Vue({
      el:"#app",
      data:{
        opacity:1
      }
    });

    //通过外部的定时器实现（不推荐）
    setInterval(()=>{
      vm.opacity-=0.01
      if(vm.opacity<=0) vm.opacity=1
    },16)
  </script>
</html>

错误：用methods实现

<!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>生命周期</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h2 :style="{opacity}">欢迎学习Vue</h2>
    {{change()}}
  </div>
</body>
<script>
    const vm=new Vue({
      el:"#app",
      data:{
        opacity:1
      },
      methods:{
        change(){
          setInterval(()=>{
            this.opacity-=0.1
            if(this.opacity<=0) this.opacity=1
          })
        }
      }
    })
  </script>
</html>

请添加图片描述
原因：
请添加图片描述
所以上述方法不可行

使用生命周期函数mounted实现

<!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>生命周期</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h2 :style="{opacity}">欢迎学习Vue</h2>
    <h2 v-if="test">测试在Vue二次解析模板时，是不会调用mounted的</h2>
    <button @click="test=!test">测试是否重复调用mounted</button>
  </div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{
      opacity:1,
      test:false
    },
    //Vue完成模板的解析并把初始的真实的DOM元素放入页面后(挂载完毕)调用mounted
    mounted(){
      console.log("mounted被调用，其中this是：",this);
      setInterval(()=>{
        this.opacity-=0.1
        if(this.opacity<=0) this.opacity=1
      },200)
    }
  })
</script>
</html>

请添加图片描述

生命周期定义

生命周期：

  1. 又名：生命周期回调函数、生命周期函数、生命周期钩子。
  2. 是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
  3. 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
  4. 生命周期函数中的this指向是 vm 或 组件实例对象。

分析生命周期

请添加图片描述

挂载流程

beforeCreate()

<!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>生命周期</title>
  <script src="Vuejs/vue.js"></script>
</head>
<body>
  <div id="app">
    <div id="number">当前的n值是：{{n}}</div>
    <button @click="add">点我+1</button>
  </div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{
      n:1
    },
    methods: {
      add(){
        this.n++
      }
    },
    beforeCreate() {
      console.log("beforeCreate，this._data：",this._data);
      debugger
    },
    // created() {
    //   console.log("created，this._data：",this._data);
    //   debugger
    // },
    // beforeMount() {
    //   console.log("beforeMount");
    //   document.querySelector("#number").innerHTML="beforeMount修改数据不能停留，因为真实dom还没插入页面"
    //   // debugger
    // },
    // mounted() {
    //   console.log("mounted");
    //   document.querySelector("#number").innerHTML="mounted修改数据可以停留在页面上，因为Vue已经解析完成了"
    //   debugger
    // },
  })
</script>
</html>

请添加图片描述

created()

<!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>生命周期</title>
  <script src="Vuejs/vue.js"></script>
</head>
<body>
  <div id="app">
    <div id="number">当前的n值是：{{n}}</div>
    <button @click="add">点我+1</button>
  </div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{
      n:1
    },
    methods: {
      add(){
        this.n++
      }
    },
    beforeCreate() {
      console.log("beforeCreate，this._data：",this._data);
      // debugger
    },
    created() {
      console.log("created，this._data：",this._data);
      debugger
    },
    // beforeMount() {
    //   console.log("beforeMount");
    //   document.querySelector("#number").innerHTML="beforeMount修改数据不能停留，因为真实dom还没插入页面"
    //   // debugger
    // },
    // mounted() {
    //   console.log("mounted");
    //   document.querySelector("#number").innerHTML="mounted修改数据可以停留在页面上，因为Vue已经解析完成了"
    //   debugger
    // },
  })
</script>
</html>

请添加图片描述

beforeMount()

<!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>生命周期</title>
  <script src="Vuejs/vue.js"></script>
</head>
<body>
  <div id="app">
    <div id="number">当前的n值是：{{n}}</div>
    <button @click="add">点我+1</button>
  </div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{
      n:1
    },
    methods: {
      add(){
        this.n++
      }
    },
    beforeCreate() {
      console.log("beforeCreate，this._data：",this._data);
      // debugger
    },
    created() {
      console.log("created，this._data：",this._data);
      // debugger
    },
    beforeMount() {
      console.log("beforeMount");
      document.querySelector("#number").innerHTML="beforeMount修改数据不能停留，因为真实dom还没插入页面"
      debugger
    },
    // mounted() {
    //   console.log("mounted");
    //   document.querySelector("#number").innerHTML="mounted修改数据可以停留在页面上，因为Vue已经解析完成了"
    //   debugger
    // },
  })
</script>
</html>

请添加图片描述

mounted()

<!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>生命周期</title>
  <script src="Vuejs/vue.js"></script>
</head>
<body>
  <div id="app">
    <div id="number">当前的n值是：{{n}}</div>
    <button @click="add">点我+1</button>
  </div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{
      n:1
    },
    methods: {
      add(){
        this.n++
      }
    },
    beforeCreate() {
      console.log("beforeCreate，this._data：",this._data);
      // debugger
    },
    created() {
      console.log("created，this._data：",this._data);
      // debugger
    },
    beforeMount() {
      console.log("beforeMount");
      document.querySelector("#number").innerHTML="beforeMount修改数据不能停留，因为真实dom还没插入页面"
      // debugger
    },
    mounted() {
      console.log("mounted");
      document.querySelector("#number").innerHTML="mounted修改数据可以停留在页面上，因为Vue已经解析完成了"
      debugger
    },
  })
</script>
</html>

请添加图片描述

template的作用

没有加template时的效果：

<!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>生命周期</title>
  <script src="Vuejs/vue.js"></script>
</head>
<body>
  <div id="app" :x="n">
    <div id="number">当前的n值是：{{n}}</div>
    <button @click="add">点我+1</button>
  </div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{
      n:1
    },
    methods: {
      add(){
        this.n++
      }
    },
    beforeCreate() {
      console.log("beforeCreate，this._data：",this._data);
      // debugger
    },
    created() {
      console.log("created，this._data：",this._data);
      // debugger
    },
    beforeMount() {
      console.log("beforeMount");
      // document.querySelector("#number").innerHTML="beforeMount修改数据不能停留，因为真实dom还没插入页面"
      // debugger
    },
    mounted() {
      console.log("mounted");
      // document.querySelector("#number").innerHTML="mounted修改数据可以停留在页面上，因为Vue已经解析完成了"
      // debugger
    },
  })
</script>
</html>

请添加图片描述
使用template时候的效果：

<!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>生命周期</title>
  <script src="Vuejs/vue.js"></script>
</head>
<body>
  <div id="app" :x="n">
    <div id="number">当前的n值是：{{n}}</div>
    <button @click="add">点我+1</button>
  </div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{
      n:1
    },
    template:"<div></button><div id='number'>当前的n值是：{{n}}</div><button @click='add'>点我+1</button></button></div>",
    methods: {
      add(){
        this.n++
      }
    },
    beforeCreate() {
      console.log("beforeCreate，this._data：",this._data);
      // debugger
    },
    created() {
      console.log("created，this._data：",this._data);
      // debugger
    },
    beforeMount() {
      console.log("beforeMount");
      // document.querySelector("#number").innerHTML="beforeMount修改数据不能停留，因为真实dom还没插入页面"
      // debugger
    },
    mounted() {
      console.log("mounted");
      // document.querySelector("#number").innerHTML="mounted修改数据可以停留在页面上，因为Vue已经解析完成了"
      // debugger
    },
  })
</script>
</html>

请添加图片描述
请添加图片描述

更新流程

beforeUpdate()

<!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>更新流程</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h2>当前的n值是：{{n}}</h2>
    <button @click="add">点我n+1</button>
  </div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{
      n:1
    },
    methods: {
      add(){
        this.n++
      }
    },
    beforeCreate() {
      console.log("beforeCreate");
    },
    created() {
      console.log("created");
    },
    beforeMount() {
      console.log("beforeMount");
    },
    mounted() {
      console.log("mounted");
    },
    beforeUpdate() {
      console.log("beforeUpdated");
      console.log("this.n：",this.n);
      debugger
    },
  })
</script>
</html>

请添加图片描述

updated()

<!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>更新流程</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h2>当前的n值是：{{n}}</h2>
    <button @click="add">点我n+1</button>
  </div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{
      n:1
    },
    methods: {
      add(){
        this.n++
      }
    },
    beforeCreate() {
      console.log("beforeCreate");
    },
    created() {
      console.log("created");
    },
    beforeMount() {
      console.log("beforeMount");
    },
    mounted() {
      console.log("mounted");
    },
    beforeUpdate() {
      console.log("beforeUpdated");
      // console.log("this.n：",this.n);
      // debugger
    },
    updated() {
      console.log("updated");
      console.log("this.n：",this.n);
      debugger
    },
  })
</script>
</html>

请添加图片描述

销毁流程

beforeDestroy()

<!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>example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h2>当前的n值是：{{n}}</h2>
    <button @click="add">点我n+1</button>
    <button @click="bye">点我销毁vm</button>
  </div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{
      n:1
    },
    methods: {
      add(){
        console.log("add");
        this.n++
      },
      bye(){
        console.log("bye");
        this.$destroy()
      }
    },
    beforeDestroy() {
      console.log("beforeDestroy");
      this.add()
    },
    destroyed() {
      console.log("destroyed");
    },
    
  })
</script>

请添加图片描述

生命周期总结

<!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>透明度案例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h2 :style="{opacity}">欢迎学习Vue</h2>
    <button @click="stopS">点我停止变换</button>
  </div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{
      opacity:1
    },
    methods: {
      stopS(){
        this.$destroy()
      }
    },
    mounted() {
      console.log("mounted");
      this.timer=setInterval(() => {
        console.log("setInterval");
        this.opacity-=0.01
        if(this.opacity<=0)  this.opacity=1
      },16)
    },
    beforeDestroy() {
      clearInterval(this.timer)
      console.log("vm即将驾鹤西去了");
    },
  })
</script>
</html>

请添加图片描述
常用的生命周期钩子：

  1. mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
  2. beforeDestroy：清除定时器、绑定自定义事件、取消订阅消息等【收尾工作】。

关于销毁Vue实例：

  1. 销毁后借助用Vue开发者工具看不到任何信息。
  2. 销毁后自定义事件会失效，但原生DOM事件依然有效。
  3. 一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

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

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

相关文章

【数据库】二阶段锁

【数据库】二阶段锁

Two-phase locking (2PL) is a concurrency controlprotocol that determines whether a txn can access an object in the database on the fly. The protocol does not need to know all the queriesthat a txn will execute ahead of time. 分为两个阶段&#xff1a; 一阶…
阅读更多...
颅内EEG记录揭示人类DMN网络的电生理基础

颅内EEG记录揭示人类DMN网络的电生理基础

使用无创功能磁共振成像&#xff08;fMRI&#xff09;的研究为人类默认模式网络&#xff08;DMN&#xff09;的独特功能组织和深远重要性提供了重要的见解&#xff0c;但这些方法在跨多个时间尺度上解决网络动力学的能力有限。电生理技术对于应对这些挑战至关重要&#xff0c;但…
阅读更多...
RAID 0 添加新磁盘

RAID 0 添加新磁盘

1&#xff1a;查看当前可用挂载磁盘 lsblk 2&#xff1a;可见 sda 与 sdb 已被挂载&#xff0c;需要挂载 sdc 和 sdd 由于硬盘的默认分区格式是MBR&#xff0c;这种格式的硬盘支持的最大挂载容量为2T&#xff0c;为了满足我们的要求&#xff0c;需要将硬盘格式转化为MBR&…
阅读更多...
Node.js 编写接口入门学习（GET、POST）

Node.js 编写接口入门学习（GET、POST）

一、简介 nvm 安装、卸载与使用&#xff08;详细步骤&#xff09;&#xff0c;用于管理/切换 Node 多版本环境。 node 是否安装成功 $ node -v安装完成之后&#xff0c;通过 node 直接运行 test.js。 // test.js console.log(Hello Node)# 命令行执行 $ node test.js二、简单的…
阅读更多...
[ 数据结构 -- 手撕排序算法第七篇 ] 归并排序

[ 数据结构 -- 手撕排序算法第七篇 ] 归并排序

文章目录前言一、常见的排序算法二、归并排序的基本思想三、归并排序3.1 归并排序的递归版本3.2 归并排序的非递归版本四、归并排序的特性总结前言 手撕排序算法第七篇&#xff1a;归并排序&#xff01; 从本篇文章开始&#xff0c;我会介绍并分析常见的几种排序&#xff0c;例…
阅读更多...
深度学习秘籍

深度学习秘籍

显式构造 隐式构造 loss通常是一个标量 batchsize越小其实越好 回归 预测的是一个连续 softmax回归是一个多分类问题 分类 预测是一个离散值 Huber RoBust Loss, 也就是通常所说SmoothL1损失 常用命令 import torch import torchvision from torchvision import transformsso…
阅读更多...
ContentProvider的介绍和使用

ContentProvider的介绍和使用

文章目录ContentProviderContentProvider简介运行时权限Android权限机制详解在程序运行时申请权限访问其他程序当中数据ContentResolver的基本用法读取系统联系人信息创建自己的ContentProvider创建ContentProvider的步骤实现跨程序数据共享ContentProvider 如果我们想要实现跨…
阅读更多...
浅拷贝深拷贝递归

浅拷贝深拷贝递归

常见的基本数据类型&#xff1a;Number、String 、Boolean、Null和Undefined 引用数据类型&#xff1a;Object、Array、Function 1&#xff09;基本数据类型&#xff1a;存储在栈内存中,可以直接访问到该变量的值。 2&#xff09;引用数据类型&#xff1a;存储在堆内存中,每…
阅读更多...
有哪些数据统计软件适合初学者使用？

有哪些数据统计软件适合初学者使用？

前段时间写过一篇“数据分析工具”的内容&#xff0c;周末有伙伴私信问我有没有什么适合初学者、业务人员的&#xff0c;更简单一点的数据可视化软件。 所以今天来分享下我在做数据分析时用过的几个简单易上手的数据可视化软件。 先放上目录&#xff1a; 数据统计收集类——简…
阅读更多...
谷粒学院——Day12【整合阿里云短信服务、首页登录和注册】

谷粒学院——Day12【整合阿里云短信服务、首页登录和注册】

用户登录业务介绍 一、单一服务器模式 早期单一服务器&#xff0c;用户认证。 缺点&#xff1a;单点性能压力&#xff0c;无法扩展。 二、SSO(single sign on)模式 分布式&#xff0c;SSO(single sign on)模式 优点&#xff1a; 用户身份信息独立管理&#xff0c;更好的…
阅读更多...
关于安科瑞电气安全产品在医药工业洁净厂房的电气工程设计与应用

关于安科瑞电气安全产品在医药工业洁净厂房的电气工程设计与应用

摘要&#xff1a; 近年来&#xff0c;医药工业洁净厂房的电气工程设计得到了快速发展和广泛关注&#xff0c;研究其相关课题有着重要意义。首先介绍了供电系统与配电设备的设置&#xff0c;分析了洁净厂房的电气照明设计&#xff0c;并结合相关实践经验&#xff0c;从探测器选…
阅读更多...
智能无障碍轮椅——ESP8266总体介绍及ESP-01S入门调试

智能无障碍轮椅——ESP8266总体介绍及ESP-01S入门调试

文章目录ESP8266 介绍ESP8266的多种型号1. DT-062. ESP-01和ESP-01S【左边ESP-01S&#xff0c;右边ESP-01】3. ESP-12F两种开发方式1. AT指令开发方式2. SDK开发方式固件烧录方法1. 硬件烧录工具2. 软件烧录工具WiFi模块工作模式&#xff1a;1. AP模式2. STA模式3. STAAP共存ES…
阅读更多...
宏、条件编译（#ifdef）、#include（头文件包含）、#error和 #pragma的区别、#和##的含义和应用

宏、条件编译（#ifdef）、#include（头文件包含）、#error和 #pragma的区别、#和##的含义和应用

1、在C语言预处理阶段&#xff0c;编译器首先对代码的处理时&#xff1a;先去注释&#xff0c;再宏替换。 2、在源文件的任何地方&#xff0c;宏都是可以定义的&#xff0c;与是否在函数内外无关。 3、宏的作用范围是&#xff1a;从定义处开始&#xff0c;往后的直到程序结束…
阅读更多...
C++(老百科)

C++(老百科)

学了这么久的c,你们有没有想过一个问题:什么是c?(这还用问么,不大街上随便抓一个陌生人都知道)(那你现在给我抓个看看) C简介 C是一种计算机高级程序设计语言&#xff0c;由C语言扩展升级而产生 &#xff0c;最早于1979年由本贾尼斯特劳斯特卢普在AT&T贝尔工作室研发。––…
阅读更多...
easyexcel读取excel将数据存到mysql【一个简单的例子】

easyexcel读取excel将数据存到mysql【一个简单的例子】

读取excel 1 xml里面增加maven <!-- https://mvnrepository.com/artifact/com.alibaba/easyexcel --> <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>3.1.1</version> </depen…
阅读更多...
项目管理软件适用于初创公司吗

项目管理软件适用于初创公司吗

我注意到关于小型团队的一件事是&#xff0c;在这种热情的背后隐藏着一家需要帮助的公司。他们通常缺乏职责结构&#xff0c;但这可能不是他们的主要需求。太多的结构会扼杀那些在较小的初创型公司中经营节目的企业家精神的努力&#xff0c;但他们几乎总是需要更有效的流程和一…
阅读更多...
分布式理论之CAP定理

分布式理论之CAP定理

CAP定理介绍 CAP定理&#xff08;CAP theorem&#xff09;&#xff0c;又被称作布鲁尔定理&#xff08;Brewers theorem&#xff09;&#xff0c;它指出对于一个分布式计算系统来说&#xff0c;不可能同时满足以下三点 选项具体意义一致性&#xff08;Consistency&#xff09…
阅读更多...
linux TxBytes RxBytes 探究

linux TxBytes RxBytes 探究

测试平台 &#xff1a;NXP LS1043A ARM64 内核版本&#xff1a; 两台设备通过网口eth2 对接。设备1发包&#xff0c;设备2收包&#xff0c;观察两设备 TX RX 包数、字节数。 1、准备数据包 流量仪设置包长1024, 抓取从流量仪发包&#xff0c;wireshark显示length 1020字…
阅读更多...
即时通讯音视频开发之音频编解码技术的学习

即时通讯音视频开发之音频编解码技术的学习

总是有人问我研究音频编解码要看什么书&#xff0c;其实这是一个很难回答的问题&#xff0c;原因有很多&#xff1a; 做工程首先一个问题就是和课本学习不同&#xff0c;不是看书能解决的。 音频编解码技术在国内研究的人很少&#xff0c;包括总体的音频技术国外也研究不多…
阅读更多...
攻防世界ics-06

攻防世界ics-06

攻防世界ics-06 题目描述&#xff1a;云平台报表中心收集了设备管理基础服务的数据&#xff0c;但是数据被删除了&#xff0c;只有一处留下了入侵者的痕迹。 打开场景&#xff0c;查看页面。 但凡有超链接的都点一遍&#xff0c;发现只有“报表中心可以打开”。 选择日期范围&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023