后端人眼中的Vue（五）

news2024/10/5 13:52:32

七、Vue生命周期

在这里插入图片描述

​ Vue的生命周期指的是Vue实例在页面中创建到销毁整个过程。Vue提供了在各个生命周期的钩子，钩子也叫Vue生命周期函数。这些生命周期函数是伴随着Vue实例创建、销毁的过程中自动触发的（不需要人为手动触发）。Vue实例生命周期有三个阶段：

  1. 初始化阶段
  2. 运行阶段
  3. 销毁阶段
<template>
  <div>
    <p id="op" ref="myp">{{num}}</p>
    <button id="obtn" @click="btnClick">按钮</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num:20
    };
  },
  methods:{
      fn(){
          return 999
      },
      btnClick(){
          this.num++
      }
  },
  beforeCreate() {
    console.log("1.1---------------beforeCreate");
    console.log(1.1, this.num, this.fn, document.getElementById("op"));
  },
  created() {
    console.log("1.2-------------created");
    console.log(1.2, this.num, this.fn, document.getElementById("op"));
  },
  beforeMount() {
    console.log("2.1---------------beforeMount");
    console.log(2.1, this.num, this.fn, document.getElementById("op"));
  },
  mounted() {
    console.log("2.2-------------mounted");
    console.log(2.2, this.num, this.fn, document.getElementById("op"));
  },
  beforeUpdate(){  //视图跟新之前
    console.log("3.1-------------beforeUpdate");
    console.log(3.1, this.num, this.$refs.myp.innerHTML);
  },
  updated(){  //视图跟新之后
    console.log("3.2-------------updated");
    console.log(3.2, this.num, this.$refs.myp.innerHTML);
  },
  beforeDestory(){  
    
  },
  destoryed(){
     
  }
};
</script>

7.1、初始

在初始化阶段有两个生命周期函数：

  1. **beforeCreate()：**实例刚刚在内存中被创建出来，此时还没有初始化 data 和 methods 属性。这个函数执行时，仅仅完成自身内部事件的生命周期函数的注入。

  2. **created()：**实例已经在内存中创建好，此时 data和methods 已经创建好，此时还没有开始编译模板，这个函数执行时，完成自身内部事件和生命周期函数的注入，包括自定义的data、methods、computed等属性注入和校验工作。

7.2、挂载

  1. **beforeMount：**此时已经完成了模板编译，但是还没有挂载到页面中。这个函数执行时，el执行html还是一个原始模板，并没有完成数据渲染工作。 data 的数据可以访问和修改，而且此时的模板已经编译好了，还没有更新到页面中

  2. **mounted：**这个时候已经把编译好的模板挂载到页面指定的容器里。此时编译的模板更新到页面中了。

7.3、更新

  1. **beforeUpdate：**状态更新之前执行此函数，此时的 data 中的数据是最新，但是界面上显示的还是旧的，因为此时还没有开始重新渲染DOM节点。 此时修改输入框的内容，data中的数据已经更新了，但是页面上显示的还是旧数据。

  2. **updated：**实例更新完毕之后调用此函数，此时data 中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了。此时 data 的内容已经更新，页面显示的也是最新的数据。

7.4、销毁

  1. **beforeDestroy：**实例销毁之前调用，在这一步，实例让然完全可用。

  2. **destroyed：**实例销毁后调用，调用后，Vue实例指向的所以东西会被解绑，所有的事件监听器会被移除，所有的子实力也会被销毁。

八、ES6语法

EcmaScript 6.x简称ES6。

8.1、变量声明

在ES5之前，我们都是使用var生命变量，在ES6中，提供了两个新的关键字，推荐使用这两个关键字来声明变量：

  1. let：用来声明局部变量，好处是可以作用域从代码声明出开始到代码块结束为止
  2. const：用来声明常量，常量一旦被赋值，就不可以被修改。const在定义对象时，指的是对象的地址不变，但是对象中的属性是可以改变的。定义数组同理，地址不可以改变，但是数组中的元素是可以改变的。

使用var声明的变量中存在作用范围混淆的问题。

8.2、使用箭头函数

在使用匿名函数时，可以使用ES6中的箭头函数(参数)=>{函数体}，一般用于匿名函数作为参数的时候使用。

注意：

  1. 当箭头函数没有参数或者是参数大于1个时，必须加入()。
  2. 当箭头函数只有一个参数时，()可以省略不写。
  3. 当函数体只有一行代码时，函数体的{}可以省略不写。
  4. 箭头函数和原来的普通函数（匿名函数）除了写法上有区别，还有一个很明显的区别，即箭头函数没有自己的this，匿名函数有自己的this。

8.3、模板字符串

新增了模板字符串——反引号**``**，用来拼接html字符串。

8.4、定义对象

在ES5中定义对象，无论对象的属性名和变量名是否一致，都需要写两遍。

let id = 21;
let name = "XiaoLin";
let age = 23;
const emp = {id:id,name:name,age:age}

在ES6中，如果对象属性名和变量名一致的话，写一个即可。

let id = 21;
let name = "XiaoLin";
let age = 23;
const emp = {id,name,age}

九、Vue标准开发方式

9.1、SPA

Vue推荐的开发方式是SPA(Single Page Application)，单页面应用。单页面应用指的是项目只有一张页面。

Vue推荐的开发方式是一应用中只能存在一个Vue实例。

9.2、存在的问题

使用现有手段严格遵循SPA会存在的问题？

  1. 现有开发方式会导致唯一的一个页面中的代码会越来越多，不利于后续维护，
  2. 所有的业务功能都在同一个页面中，会导致当前页面每次加载速度非常慢。

为了严格遵循SPA开发方式，Vue提供了Vue组件Compoent。日后你可以为你的每个业务功能去划分一个个组件，抽取出来，变成一个个组件，当你需要使用到哪个组件，直接加载哪个组件即可。使用组件的好处：

  1. 组件可以减少Vue实例代码量
  2. 一个组件负责完成项目中一个功能或者是一组功能，实现业务功能隔离。
  3. 组件还可以在Vue中实现复用。

9.3、组件化开发

9.3.1、什么是组件化开发

面对复杂问题的处理方式，把问题拆解成很多个能处理的小问题，再将其放在整体中，会发现大的问题也会迎刃而解。而组件化的思想也类似：

  1. 如果我们实现一个页面结构和逻辑非常复杂的页面时，如果全部一起实现会变得非常复杂，而且也不利于后续的维护和迭代功能。
  2. 但如果我们这时候把页面分成一个个小的功能块，每个功能块能完成属于自己这部分独立的功能，那么整个页面之后的维护和迭代也会变得非常容易。

组件化开发的优势：

  1. 可维护性高。
  2. 可复用性高。

9.3.2、Vue组件化思想

组件化是Vue重要的思想

  1. 它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。
  2. 任何的应用都会被抽象成一颗组件树。

1568877913978

组件化思想的应用开发：

  1. 有了组件化的思想，我们在之后的开发中就要充分的利用它。
  2. 尽可能的将页面拆分成一个个小的、可复用的组件。
  3. 这样让我们的代码更加方便组织和管理，并且扩展性也更强。

9.3.3、全局组件

通过Vue.component('组件名称', {})，通过这个方法注册的都是全局组件，也就是他们再注册之后可以用在任何新创建的Vue 实例挂载的区域内。他有两个参数：

  1. 组件名称。
  2. 组件配置对象。

使用组件时，直接使用组件名来用即可。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">

        <!--登录-->
        <login></login>
        <!--注册-->
        <register></register>
    </div>
</body>

</html>
<script>


    //1.定义一个全局组件 参数1:组件名称  参数2: 组件的配置对象
    Vue.component('login', {
        template: `<div><h2>用户登录</h2> <form action=""></form></div>`,//用来书写该组件的html代码
    });

    Vue.component('register', {
        template: `<div><h2>用户注册</h2>  <form action=""></form></div>`
    });


    const app = new Vue({
        el: "#app",
        data: {
            msg: "Vue 中组件使用"
        },
        methods: {},
        computed: {},
    });
</script>

在<div id="app">...</div> 外的组件 my-con 没有替换成组件真正的页面结构，是因为 new Vue() 挂载在 id=app 的节点上，不在这个节点上标签，不会受到Vue的影响。

9.3.4、局部组件

通过 Vue.component 方式注册的组件，称之为全局组件。任何地方都可以使用。全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

于是就有了局部组件。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!--用户添加-->
        <add></add>
    </div>
</body>

</html>
<script>


    const app = new Vue({
        el: "#app",
        data: {
            msg: "Vue 中组件使用"
        },
        methods: {},
        computed: {},
        components: { //注册局部组件
            add: {    //添加局部组件
                template: `<div><h2>用户添加</h2> <form action=""></form></div>`
            }
        }
    });
</script>

9.3.5、组件细化

我们可以把组件抽取出来，在外部定义配置对象。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!--用户添加-->
        <add></add>
    </div>
</body>

</html>
<script>

const login = { //把login组件抽出来
    template:`<div id="aa"><h2>用户登录</h2></div>`
}

const app = new Vue({
        el:"#app",
        data:{
            msg:"Vue的组件中定义组件 Data  methods Computed等"
        },
        methods:{},
        computed:{},
        components:{ //用来定义局部组件
            login, // 在ES6中如果变量名等于属性名的话，可以只写一遍，这里也等于  login:login,
        }
    });
</script>

我们还可以给当前组件定义属于组件自己的数据。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <login></login>
    </div>
</body>

</html>
<script>

const login = { //把login组件抽出来
    template:`<div id="aa"><h2>用户登录</h2></div>`,
        data:{

        }
}

const app = new Vue({
        el:"#app",
        data:{
            msg:"Vue的组件中定义组件 Data  methods Computed等"
        },
        methods:{},
        computed:{},
        components:{ //用来定义局部组件
            login, // 在ES6中如果变量名等于属性名的话，可以只写一遍，这里也等于  login:login,
        }
    });
</script>

image-20230103175118421

data必须是一个函数，且是一个有返回值的函数。要是改为这样，依然会报错，因为我没有返回一个object对象。

const login = { //把login组件抽出来
    template:`<div id="aa"><h2>用户登录</h2></div>`,
        data(){

        }
}

image-20230103175312480

所以要添加返回值对象即可。

const login = { //把login组件抽出来
    template:`<div id="aa"><h2>用户登录</h2></div>`,
    data(){
            return{

            }
        }
}

在这里插入图片描述

image-20230103180126867

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <login></login>
            <login></login>
        </div>
    </body>

</html>
<script>

const login = { //把login组件抽出来
    template:`<div id="aa"><h2>用户登录{{counter}}</h2></div>`,
    data(){
            return{
                counter:0,
            }
        }
}

const app = new Vue({
        el:"#app",
        data:{
            msg:"Vue的组件中定义组件 Data  methods Computed等"
        },
        methods:{},
        computed:{},
        components:{ //用来定义局部组件
            login, // 在ES6中如果变量名等于属性名的话，可以只写一遍，这里也等于  login:login,
        }
    });
</script>

在组件中还有msg这个属性，如果在外面Vue实例中也有msg这个属性，那么在组件中会优先使用组件中的msg。

image-20230103180730091

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <login></login>
            <login></login>
        </div>
    </body>

</html>
<script>

const login = { //把login组件抽出来
    template:`<div id="aa"><h2>用户登录{{counter}}----{{msg}}</h2></div>`,
    data(){
            return{
                counter:0,
                msg:"我是组件中的msg",
            }

        }
}

const app = new Vue({
        el:"#app",
        data:{
            msg:"Vue的组件中定义组件 Data  methods Computed等"
        },
        methods:{},
        computed:{},
        components:{ //用来定义局部组件
            login, // 在ES6中如果变量名等于属性名的话，可以只写一遍，这里也等于  login:login,
        }
    });
</script>

为了给组件自己定义一些列的方法，比如便于实现点击事件，组件中还有methods属性，用来定义一系列方法。

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <login></login>
        </div>
    </body>

</html>
<script>

const login = { //把login组件抽出来
    template:`<div id="aa"><h2>用户登录{{counter}}----{{msg}}</h2>
                <button @click="test(10)">点我counter++</button>
              </div>`,
    data(){
            return{
                counter:0,
                msg:"我是组件中的msg",
            }

        },
        methods:{ //用来给组件自己定义一些列方法
            test(count){
                this.counter+=count;
            }
        },
}

const app = new Vue({
        el:"#app",
        data:{
            msg:"Vue的组件中定义组件 Data  methods Computed等"
        },
        methods:{},
        computed:{},
        components:{ //用来定义局部组件
            login, // 在ES6中如果变量名等于属性名的话，可以只写一遍，这里也等于  login:login,
        }
    });
</script>

当然，如果多处地方都需要调用计算结果，我们还可以使用computed这个属性。

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <login></login>
        </div>
    </body>

</html>
<script>

const login = { //把login组件抽出来
    template:`<div id="aa"><h2>用户登录{{counter}}----{{msg}}-------{{counterSqrt}}</h2>
                <button @click="test(10)">点我counter++</button>
              </div>`,
    data(){
            return{
                counter:0,
                msg:"我是组件中的msg",
            }

        },
        methods:{ //用来给组件自己定义一些列方法
            test(count){
                this.counter+=count;
            }
        },
        computed:{ //用来给组件自己定义一些列计算方法
            counterSqrt(){
                return this.counter*this.counter;
            }
        },
}

const app = new Vue({
        el:"#app",
        data:{
            msg:"Vue的组件中定义组件 Data  methods Computed等"
        },
        methods:{},
        computed:{},
        components:{ //用来定义局部组件
            login, // 在ES6中如果变量名等于属性名的话，可以只写一遍，这里也等于  login:login,
        }
    });
</script>

组件中也有生命周期的各种函数，组件也有生命周期。

image-20230103182526036

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <login></login>
        </div>
    </body>

</html>
<script>

const login = { //把login组件抽出来
    template:`<div id="aa"><h2>用户登录{{counter}}----{{msg}}-------{{counterSqrt}}</h2>
                <button @click="test(10)">点我counter++</button>
              </div>`,
    data(){
            return{
                counter:0,
                msg:"我是组件中的msg",
            }

        },
        methods:{ //用来给组件自己定义一些列方法
            test(count){
                this.counter+=count;
            }
        },
        computed:{ //用来给组件自己定义一些列计算方法
            counterSqrt(){
                return this.counter*this.counter;
            }
        },
        //初始化阶段
        beforeCreate(){
            console.log("beforeCreate:",this.msg);},
        created(){
            console.log("created:",this.msg);
        },
        beforeMount(){ //此时组件中template还是模板还没有渲染
            console.log(this);
            //console.log("beforeMount:",this.$el.innerHTML);
        },
        mounted(){  // 此时组件中页面的数据已经和data中数据一致
            console.log("mounted:",document.getElementById("aa").innerHTML);
        },
        //运行阶段
        beforeUpdate(){// 此时data中数据变化了  页面数据还是原始数据
            console.log("beforeUpdate:",this.counter);
            console.log("beforeUpdate:",document.getElementById("aa").innerHTML);
        },
        updated(){  //此时data 页面数据一致
            console.log("updated:",this.counter);
            console.log("updated:",document.getElementById("aa").innerHTML);
        },
        //销毁阶段
        beforeDestroy(){},
        destroyed(){},
}

const app = new Vue({
        el:"#app",
        data:{
            msg:"Vue的组件中定义组件 Data  methods Computed等"
        },
        methods:{},
        computed:{},
        components:{ //用来定义局部组件
            login, // 在ES6中如果变量名等于属性名的话，可以只写一遍，这里也等于  login:login,
        }
    });
</script>

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

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

相关文章

产业互联网：补齐互联网的「短板」，重启互联网的「进化」

产业互联网：补齐互联网的「短板」，重启互联网的「进化」

尽管在互联网时代出现了诸多的乱象&#xff0c;但是&#xff0c;我们依然无法否认互联网时代给人们的生产和生活带来的影响和改变。即使如此&#xff0c;我们依然无法否认互联网本身其实是存在着诸多的问题和弊病的&#xff0c;这些问题和弊病所导致的一个最为直接的结果&#…
阅读更多...
【opencv】二维面找角点/关键点 实现

【opencv】二维面找角点/关键点 实现

every blog every motto: You can do more than you think. 0. 前言 二维面找角点/关键点 实现 1. 正文 1.1 前提 1.1.1 显示函数 def show(arr):plt.imshow(arr)plt.show()def cvshow(arr):cv2.namedWindow(a, 0)cv2.imshow(a, arr)cv2.waitKey(0)cv2.destroyAllWindows…
阅读更多...
通关算法题之 ⌈链表⌋

通关算法题之 ⌈链表⌋

链表 删除元素 203. 移除链表元素 给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节点 。 示例&#xff1a; 输入&#xff1a;head [1,2,6,3,4,5,6], val 6 输出&#xff1a;[1,2,3,4,5]c…
阅读更多...
2022 IoTDB Summit：宝武智维徐少锋《Apache IoTDB 在宝武装备远程智能运维平台中的使用案例》...

2022 IoTDB Summit：宝武智维徐少锋《Apache IoTDB 在宝武装备远程智能运维平台中的使用案例》...

12 月 3 日、4日&#xff0c;2022 Apache IoTDB 物联网生态大会在线上圆满落幕。大会上发布 Apache IoTDB 的分布式 1.0 版本&#xff0c;并分享 Apache IoTDB 实现的数据管理技术与物联网场景实践案例&#xff0c;深入探讨了 Apache IoTDB 与物联网企业如何共建活跃生态&#…
阅读更多...
01【Vector CP】- 详解PN局部网络管理

01【Vector CP】- 详解PN局部网络管理

Partial Networking概述 Partial Networking适用的ECU类型： 总线上依然有通信ECU关闭通信堆栈ECU要求降低功耗 Note：Partial Networking功能及其所有子功能是可选的，必须进行配置。为了控制此类ECU的关断和唤醒，CAN NM提供了一种额外的算法： NM PDU 消息中的用户数据部分…
阅读更多...
java命名规范

java命名规范

Java总体命名规范1、项目名全部小写2、包名全部小写3、类名首字母大写&#xff0c;其余组成词首字母依次大写&#xff0c;驼峰命名4、变量名&#xff0c;方法名首字母小写&#xff0c;如果名称由多个单词组成&#xff0c;除首字母外的每个单词的首字母都要大写&#xff0c;保证…
阅读更多...
企业数字化转型的关键一步，建立数据意识

企业数字化转型的关键一步，建立数据意识

数字化给社会带来的巨大的科技革命和产业革命&#xff0c;让数字经济成为新的高速增长的国民经济支柱&#xff0c;让数据变为第五大生产要素&#xff0c;发挥巨大价值&#xff0c;成为企业重要资产。不仅如此&#xff0c;在数字化的影响下&#xff0c;数字化转型成为了个人、机…
阅读更多...
ue4.27空项目打包不卡ue5.1空项目打包运行卡的要命研究测试

ue4.27空项目打包不卡ue5.1空项目打包运行卡的要命研究测试

知乎上有人提问 lumen是如何做到不卡顿的,我却不以为然,我的显卡虽然算不上好显卡,但是也不至于独立显卡一个空项目都玩不起吧,打个cf,玩腾讯模拟器和平精英吃鸡肯定还是会很流畅的. 一个空项目都卡,怎么能说是我电脑配置问题呢??? 再来看提示 image.pngimage.png反射设置的…
阅读更多...
2023 过春年，烟花依然了无缘；这能难倒程序猿？一键三连过大年！

2023 过春年，烟花依然了无缘；这能难倒程序猿？一键三连过大年！

效果图镇楼 序 不知道是在什么时候&#xff0c;济南就开始都在传&#xff1a;“今年不再限制放烟花啦&#xff01;”。一些集市上也开始有了售卖烟花的摊子 大家都很兴奋&#xff0c;很多小伙伴开始购买烟花。特别是今年特别火的 “加特林 &#x1f631;” 但是大家兴奋劲还没…
阅读更多...
＜C++＞红黑树

＜C++＞红黑树

文章目录1. 红黑树的概念2. 红黑树的性质3. 红黑树节点定义4. 红黑树的插入操作5. 红黑树的验证6. 红黑树与AVL树的比较7. 红黑树模拟实现STL中的map与set1. 红黑树的概念 红黑树&#xff0c;是一种二叉搜索树&#xff0c;但在每个结点上增加一个存储位表示结点的颜色&#xf…
阅读更多...
小程序管理还能这样做，让小程序管理更高效

小程序管理还能这样做，让小程序管理更高效

说起小程序&#xff0c;作为开发者或者企业用户不得不面临一个问题就是&#xff0c;需要小程序承载的业务越来越多的时候&#xff0c;小程序的数量也呈现增长&#xff0c;随之而来的就是小程序开发、维护等一系列管理中会出现的问题。 包括到小程序的代码包管理、小程序上下架…
阅读更多...
Toolwtech Graphics3D.NET 2.0.x专业版Crack

Toolwtech Graphics3D.NET 2.0.x专业版Crack

您是否正在寻找一种易于使用、功能强大且 100% 托管的 .NET 组件来快速开发 3D 图形或 3D 数据可视化应用程序&#xff1f;请尝试 Graphics3D.NET。使用 Graphics3D.NET&#xff0c;您可以在几分钟内开发出专业的 3D 可视化应用程序。 Graphics3D.NET 特点&#xff1a; * 100% …
阅读更多...
点亮 LED

点亮 LED

1.在 Linux 系统下&#xff0c;一切皆文件&#xff01;应用层如何操控底层硬件&#xff0c;同样也是通过文件 I/O 的方式来实现。设备文件通常在/dev/目录下&#xff0c;我们也把/dev 目录下的文件称为设备节点。设备节点并不是操控硬件设备的唯一途径&#xff0c;除此之外&…
阅读更多...
Vue模板语法（二）

Vue模板语法（二）

Vue条件语句 1、v-if、v-else、v-else-if v-if、v-else、v-else-if用于根据条件来渲染某一块的内容&#xff1a; 这些内容只有在条件为true时&#xff0c;才会被渲染出来&#xff1b;这三个指令与JavaScript的条件语句if、else、else if类似&#xff1b; v-if的渲染原理&a…
阅读更多...
单片机开发---ESP32-S3模块上手

单片机开发---ESP32-S3模块上手

背景介绍 想起来之前做的半成品单片机游戏机&#xff0c;又想继续做一个&#xff0c;不过之前那个单片机驱动屏幕速率太低&#xff0c;已经无法改进了。所以这次斥巨资购买了一款顶配的ESP32S开发板&#xff0c;做个简单的游戏机&#xff0c;没问题。 完整介绍链接 这花花绿绿…
阅读更多...
通过logstash将Redis数据写入ElasticSearch

通过logstash将Redis数据写入ElasticSearch

点击上方蓝字关注我使用logstash将Redis中数据自动同步至ES中1. 部署Redis上传编译好的Redis二级制安装包&#xff0c;使用redis用户启动redis即可具体编译安装过程可参考https://mp.weixin.qq.com/s/RaWy0sqRxcAti1qbv-GbZQ2. 部署logstash下载二进制安装包wget https://ar…
阅读更多...
HTTP FLV交互流程及实例解析

HTTP FLV交互流程及实例解析

HTTP FLV交互流程及实例解析 文章目录HTTP FLV交互流程及实例解析HTTP FLV传输方式HTTP FLV 抓包分析结束语HTTP FLV传输方式 前文已经介绍过&#xff0c;HTTP FLV利用了一个HTTP的协议约定&#xff0c;http 的content-length头字段如果不存在&#xff0c;则客户端就会一直接收…
阅读更多...
ESP32-Camera性能(简单)测试评估

ESP32-Camera性能(简单)测试评估

TOC 1. ESP32-Camera简介 最近因为接触了ESP32摄像头相关的资料和信息&#xff0c;稍微简单整理下&#xff0c;希望对该方案有兴趣的朋友可以有所帮助。 1.1 资料&信息 The Internet of Things wit ESP32ESP32-S Series开发模组Github: ESP32-Camera 1.2 ESP-EYE摄像头…
阅读更多...
别忘记我：通过局部-全局内容建模进行文本擦除方法

别忘记我：通过局部-全局内容建模进行文本擦除方法

本文简要介绍了发表于ECCV 2022的论文“Don’t Forget Me: Accurate Background Recovery for Text Removal via Modeling Local-Global Context”的相关工作。该论文针对文本擦除中存在的复杂背景修复的问题&#xff0c;提出了CTRNet&#xff0c;它利用局部和全局的语义建模提…
阅读更多...
一个 go-sql-driver 的离奇 bug

一个 go-sql-driver 的离奇 bug

文&#xff5c;郝洪范京东技术专家Seata-go 项目共同发起人微服务底层技术的探索与研究。本文 3482 字 阅读 7 分钟对于 Go CURD Boy 来说&#xff0c;相信 github.com/go-sql-driver/mysql 这个库都不会陌生。基本上 Go 的 CURD 都离不开这个特别重要的库。我们在开发 Seata-g…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023