组件之间的通信方式

news2024/10/5 13:32:19

【 0 】前言

Vue 是一个渐进式的 JavaScript 框架，通过组件化的方式构建应用。在 Vue 中，组件通信指的是不同组件之间传递数据、共享数据或调用方法等行为。在前端开发中，子组件和父组件之间的通信是非常常见和重要的。

【 1 】父子组件通信的常用方法：

  1. Props 属性传递：父组件通过 props 将数据或方法传递给子组件，子组件通过 props 接收并使用传递过来的数据或方法。

  2. Emit 事件触发：子组件通过 $emit 方法触发一个自定义事件，并将数据传递给父组件，父组件通过监听这个事件来接收数据。

【 2 】父传子组件

【 2.1 】HTML 结构

  • <div id="app">：Vue 应用的根元素。

  • <child-component :message="url"></child-component>：在父组件中使用子组件 child-component，通过 message 属性将父组件的 url 数据传递给子组件。

【 2.2 】Vue 组件定义

【 2.2.1 】子组件 child-component

  • props: ['message']：声明子组件需要从父组件接收的属性 message。

  • template

    ：子组件的模板，展示了一个带有图片的简单组件界面。

    • @click="handleBack" 和 @click="handleChange"：绑定了两个点击事件，分别对应后退和切换操作。

    • :src="yun"：动态绑定 img 标签的 src 属性，显示图片。

子组件的 data 和 methods

  • data 函数返回组件的内部数据。

    • title：子组件标题的数据。

    • yun：子组件中图片的 URL 数据。

  • methods 包含组件的方法。

    • handleBack 方法：当点击后退时触发的方法，弹出一个提示框。

    • handleChange 方法：当点击切换时触发的方法，将父组件传递的 url 数据赋值给子组件的 yun 数据，并在控制台打印出 message（父组件传递的 URL）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Props Example</title>
    <!--  bootstrap  -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!--  Vue  -->
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <!--  axios  -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
​
</head>
<body>
​
<div id="app">
    <h1>组件的使用-父传子</h1>
<!--  这里的URL就是父组件的  -->
    <child-component :message="url"></child-component>
​
</div>
​
<script>
​
    // 子组件定义
    Vue.component('child-component', {
​
        // 子组件接收父组件传递过来的数据
        props: ['message'],
        template: `<div>
          <div style="width: 300px;display: flex;justify-content:space-between;border: aquamarine solid 1px">
            <span @click="handleBack">后退</span>
            <span @click="handleChange">{{ title }}</span>
            <span>前进</span>
            <br>
          </div>
          <div>
<!--    子组件        -->
            <img :src="yun" alt="" height="300px" width="250px">
          </div>
        </div>`,
​
        data(){
            return {
                title:"子组件传值",
                yun:'https://wx1.sinaimg.cn/mw690/003yHo7Nly1hp5bg9itehj60u00u0qdo02.jpg',
​
​
            }
        },
        methods: {
            handleBack() {
                alert('后退了')
            },
            handleChange() {
                // 使用this.message获取父组件传递的url
                console.log('1111')
​
                this.yun = this.message
                console.log(this.message)
            }
        },
    });
​
    // 父组件的定义
    new Vue({
        el:'#app',
        data:{
            //父组件的图片
            url: 'https://pic.netbian.com/uploads/allimg/180826/113958-1535254798fc1c.jpg',
        },
​
    })
​
</script>
​
</body>
</html>

【 2.3 】示例二

父组件和子组件之间传值的关键是使用props（属性）和事件。这是Vue.js中实现组件通信的两种主要方式：

  1. Props（属性）：

    • 父组件通过props向子组件传递数据。

    • 子组件通过props选项声明需要接收的属性。

    • 父组件可以在使用子组件的地方通过属性绑定的方式将数据传递给子组件。

    示例：

    <!-- 父组件中使用子组件并传递数据 -->
<child-component :message="parentMessage"></child-component>
    // 子组件中声明需要接收的props
Vue.component('child-component', {
    props: ['message'],
    template: `<div>{{ message }}</div>`
});

  2. 事件：

    • 子组件可以通过$emit方法触发自定义事件，向父组件发送数据。

    • 父组件可以在子组件标签上监听这些自定义事件，并在触发事件时执行相应的方法来处理数据。

    示例：

    // 子组件中通过$emit触发事件
this.$emit('childEvent', eventData);
​
// 父组件中监听子组件的事件并执行相应逻辑
<child-component @childEvent="handleChildEvent"></child-component>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Props Example with Dynamic Message</title>
    <!--  Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!--  Vue -->
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
​
<div id="app">
    <h1>父传子组件动态通信示例</h1>
    <!-- 父组件包含输入框和按钮，用于动态更改子组件中的消息 -->
    <parent-component></parent-component>
</div>
​
<script>
    // 子组件定义
    Vue.component('child-component', {
        // 子组件接收父组件传递过来的数据
        props: ['message'],
        template: `
          <div>
            <p>来自父组件的消息: {{ message }}</p>
          </div>`
    });
​
    // 父组件定义
    Vue.component('parent-component', {
        template: `
          <div>
            <!--  指定输入框的占位符文本 -->
            <input type="text" v-model="newmessage" placeholder="输入新的消息" class="form-control"/>
            <button @click="sendhand" class="btn btn-primary mt-2">发送消息</button>
            <!--  使用动态消息更新子组件      -->
            <child-component :message="parentMessage"></child-component>
          </div>
        `,
        data() {
            return {
                //在父组件定义的消息，初始值
                parentMessage: 'hello from parent！！',
                newmessage: ''
            };
        },
        methods: {
            sendhand() {
                //更新父组件中的消息
                this.parentMessage = this.newmessage;
            }
        }
    });
​
    new Vue({
        el: '#app',
    });
</script>
​
</body>
</html>

image-20240429154755045

【 3 】子传父

# https://element.eleme.cn/#/zh-CN/component/drawer

image-20240429144502992

当子组件向父组件传递数据时，有几个重要的注意事项和步骤：

  1. 使用自定义事件： 子组件需要通过 Vue.js 的 $emit 方法来触发一个自定义事件，并在事件中传递数据。

  2. 在父组件中监听事件： 父组件需要在模板中使用 v-on 或简写 @ 来监听子组件触发的自定义事件，并在相应的方法中处理数据。

  3. 传递数据： 子组件在触发自定义事件时，需要将要传递的数据作为参数传入 $emit 方法中。

  4. 在父组件中接收数据： 父组件在监听到子组件触发的自定义事件后，会执行相应的方法。这个方法的参数就是子组件传递过来的数据。

  5. 绑定数据到子组件： 父组件可以通过向子组件传递 props 的方式，将数据传递给子组件。

具体步骤如下：

  • 子组件：

    • 创建一个需要触发事件的交互，比如点击按钮。

    • 在需要传递数据的交互中，使用 $emit 方法触发一个自定义事件，并将要传递的数据作为参数传入。

  • 父组件：

    • 在模板中使用子组件，并使用 v-on 或 @ 监听子组件触发的自定义事件。

    • 在监听到事件后，执行相应的方法来处理传递过来的数据。

这样就完成了子组件向父组件传递数据的过程。

关键步骤包括：

  1. 子组件触发自定义事件并传递数据：

    • 在子组件中使用$emit方法触发一个自定义事件，并在需要时传递数据。

    示例：

    this.$emit('childEvent', eventData);

  2. 父组件监听子组件的事件：

    • 在父组件中使用子组件标签上的@事件名来监听子组件触发的事件，并在触发事件时执行相应的方法。

    示例：

    <!-- 父组件中监听子组件的事件 -->
<child-component @childEvent="handleChildEvent"></child-component>

  3. 父组件处理接收到的数据：

    • 在父组件中定义一个方法来处理接收到的子组件传递的数据，这个方法会在子组件触发相应的事件时被调用。

    示例：

    methods: {
    handleChildEvent(data) {
        // 处理接收到的子组件传递的数据
        console.log('Received data from child component:', data);
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Props Example</title>
    <!--  bootstrap  -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!--  Vue  -->
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <!--  axios  -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
​
</head>
<body>
​
<div id="app">
    <h1>组件的使用-子传父</h1>
    <!--  这里的URL就是父组件的  -->
    <parent-component></parent-component>
​
</div>
​
<script>
​
    // 子组件定义
    Vue.component('child-component', {
​
        // 子组件接收父组件传递过来的数据
        props: ['message'],
        template: `<div>
          <button @click="sendparent">像父组件传值</button>
          <hr>
        </div>`,
​
​
        methods: {
            sendparent() {
                this.$emit('child-event',"我是子组件发来的数据！！！");
            },
​
        },
    });
    Vue.component('parent-component',{
        data(){
            return{
                // 初始化为空值
                text:'',
            }
        },
        template: `
        <div>
            <input type="text" v-model="text" placeholder="从子组件接收的消息">
​
<!--    注意要跟子组件的  @child-event="handleChildEvent"要跟自定义事件名字保持一致    -->
​
            <child-component @child-event="recep_chlid"></child-component>
            <p>来自子组件的消息: {{ text }}</p>
        </div>
        `,
        methods: {
            recep_chlid(message){
                // 接收子组件传递的数据，并将其保存在父组件的数据中
​
                this.text=message;
            }
        }
    })
​
    new Vue({
        el:'#app',
​
    })
​
</script>
​
</body>
</html>

image-20240429155309805

【 4 】ref 之间的通信

# 1 ref 是个属性，可以放在
    -普通标签上：拿到dom对象
    -组件上：拿到组件对象--》直接调用组件对象的属性或方法

  • 基本的使用

    • 我用ref设置了两个标签 this.$refs就会想一个字典一样出现两个对象。

    • <img src="https://pic.netbian.com/uploads/allimg/240503/010122-1714669282ef4c.jpg"
     alt="" height="300px" width="250px" ref="photo">
<input type="text" ref="TextInput">
    • methods:{
           handleClik(){
               // this 是当前的vue实例
               console.log(this.$refs)
           }
       }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
​
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <title>Title</title>
</head>
<body>
​
<div id="one">
    <h1>组件 ref属性-放在普通标签上</h1>
    <img src="https://pic.netbian.com/uploads/allimg/240503/010122-1714669282ef4c.jpg"
         alt="" height="300px" width="250px" ref="photo">
    <input type="text" ref="TextInput">
​
    <button @click="handleClik">点我 me</button>
​
</div>
​
</body>
</html>
​
​
<script>
    Vue.component("all_parent",{
        template:`
        <div>
        <span style="text-align: left; font-family: 'Arial Black'" >我是全局组件</span>
</div>`
        }
​
    )
​
    var vm = new Vue({
        el:'#one',
        data:{
​
        },
        methods:{
            handleClik(){
                // this 是当前的vue实例
                console.log(this.$refs)
            }
        }
    })
​
​
​
</script>

image-20240505210801980

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>组件使用-ref属性-放在组件上</h1>
    <Child1 ref="mychild"></Child1>
​
    <button @click="handleShow">点我看控制台</button>
​
​
​
</div>
</body>
<script>
​
​
    // 1 定义全局组件
    Vue.component('Child1', {
        template: `
          <div>
            <div style="width: 300px;display: flex;justify-content:space-between;border: aquamarine solid 1px">
              <span @click="handleBack">后退</span>
              <span @click="handleChange">{{ title }}</span>
              <span>前进</span>
              <br>
            </div>
            <div>
              <img :src="url" alt="" height="300px" width="250px">
            </div>
          </div>`,
        data() {
            return {
                title: 'Child1',
                url: 'https://wx1.sinaimg.cn/mw690/003yHo7Nly1hp5bg9itehj60u00u0qdo02.jpg'
            }
        },
        methods: {
            handleBack() {
                alert('后退了')
            },
            handleChange(url){
                this.url=url
            }
        },
    })
​
​
    // 2 定义局部组件---》定义在组件内部的---》
    var vm = new Vue({
        el: '#app',
        data: {
        },
        methods:{
            handleShow(){
                // this 是当前vue实例
                // this.$refs 是在组件中所有标签设置了ref属性的 字典 {mychild:组件对象}
                console.log(this.$refs)
                // this.$refs.mychild  拿到组件对象---》组件对象.属性   组件对象.方法
                //1 拿到组件对象的属性--》在父中，拿到了子的变量--》子传父
                console.log(this.$refs.mychild.title)
                //2 修改组件对象的属性--》在父中，修改子的属性--》父传子
                this.$refs.mychild.title='首页'
​
                // 3 调用子组件中的函数
                this.$refs.mychild.handleChange('https://pic.netbian.com/uploads/allimg/240325/201846-171136912696d8.jpg')
​
​
​
​
            }
        }
​
​
    })
​
​
</script>
</html>
​
小结

  1. 在父组件中使用ref属性将子组件实例引用到父组件中。

<Child1 ref="mychild"></Child1>

  1. 在父组件的方法中，通过this.$refs访问ref引用的子组件实例。

handleShow() {
    console.log(this.$refs);
}

  1. 通过this.$refs访问子组件的属性和方法，实现父子组件之间的通信。

// 访问子组件的属性
console.log(this.$refs.mychild.title);
​
// 修改子组件的属性
this.$refs.mychild.title = '首页';
​
// 调用子组件的方法
this.$refs.mychild.handleChange('https://pic.netbian.com/uploads/allimg/240325/201846-171136912696d8
【 1 】动态组件

image-20240505223059355

  1. 定义组件：首先，定义了三个组件 goods、ke 和 yun。

  2. 在模板中使用动态组件：通过 <component :is="Chilkand"></component> 来使用动态组件。Chilkand 是一个变量，它的值决定了显示哪个组件。

  3. 切换组件：通过点击不同的按钮来改变 Chilkand 变量的值，从而切换显示不同的组件。

  4. 组件的初始值：在 Vue 实例的 data 中初始化了 Chilkand 变量，它的初始值为 "goods"，因此页面加载时会显示 goods 组件。

  • 不使用动态组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
​
    <style>
        .shang{
            display: flex;
            justify-content: center;
        }
​
        .jia{
            width: 150px;
            height: 50px;
            background-color: pink;
            font-size: 25px;
            margin: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
<div id="one">
    <h1>动态组件的使用方法</h1>
    <div class="shang">
        <div class="jia" @click="Chilkand='goods'">
            <span>课程</span>
        </div>
​
        <div class="jia" @click="Chilkand='ke'">
            <span>语文</span>
        </div>
​
        <div class="jia" @click="Chilkand='yun'">
            <span>王老师</span>
        </div>
    </div>
​
​
    <div>
<!--                不使用动态组件 -->
                <goods v-if="Chilkand=='goods'"></goods>
                <ke v-else-if="Chilkand=='ke'"></ke>
                <yun v-else></yun>
​
​
​
    </div>
</div>
</body>
<script>
​
    //定义三个组件
    Vue.component('goods',{
        template:`<div>
                    <h2>课程列表</h2>
​
                    <br>
                    Endlsh
​
</div>`,
    })
    Vue.component('ke',{
        template:`<div>
                    <h2>语文</h2>
​
                    <br>
                    yuwen
​
</div>`,
    })
    Vue.component('yun',{
        template:`<div>
                    <h2>sir 刘</h2>
​
                    <br>
                    tian
​
</div>`,
    })
​
​
​
    var vm = new Vue({
        el:'#one',
        data:{
            Chilkand:"goods"
        }
    })
​
​
​
</script>
</html>

image-20240505222407833

  • 使用动态组件

        <!--   使用动态组件     -->
        <keep-alive>
            <component :is="Chilkand"></component>
        </keep-alive>

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

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

相关文章

SMT智能车间MES系统的实施方案

SMT智能车间MES系统的实施方案

SMT行业中MES系统实施的关键特征&#xff1a; SMT包括上下板设备&#xff0c;印刷设备&#xff0c;贴片设备&#xff0c;回流焊炉&#xff0c;AOI。AOI的全称是自动光学检查&#xff0c;它基于光学原理来检测焊接生产中遇到的常见缺陷。测试设备&#xff0c;测试设备等MES解决…
阅读更多...
如何用多媒体沙盘实现智能交互体验？

如何用多媒体沙盘实现智能交互体验？

随着多媒体技术在内容展示领域的迅猛进步&#xff0c;智能化信息交互方式已然跃升为公众瞩目的焦点&#xff0c;而展厅作为信息传递与产品展示的核心阵地&#xff0c;正面临着提升交互体验、强化信息传递效果的迫切需求。因此&#xff0c;以多媒体沙盘、LED屏幕等创新装置为媒介…
阅读更多...
AIGC实践｜用AI制作视频短片创作全流程

AIGC实践｜用AI制作视频短片创作全流程

前言&#xff1a; 在深入探讨了AI在动态有声绘本和小游戏开发的应用之后&#xff0c;本次我们将聚焦于视频创作领域。本篇文章将详细展示如何使用AI工具从概念构思到画面生成再到最终成片的全过程&#xff0c;涵盖剧本创作、分镜头设计、视觉效果生成及音乐配制等各个阶段。让…
阅读更多...
无人机的发展

无人机的发展

朋友们&#xff0c;你们知道吗&#xff1f;无人机的发展之路可谓是科技界的一股清流&#xff0c;风头正劲啊&#xff01;从最初简单的遥控飞机到现在各种智能功能的加持&#xff0c;无人机真是越来越神奇了&#xff01; 首先&#xff0c;无人机在航拍领域大放异彩&#xff01;无…
阅读更多...
Redis 持久化的奥秘：主线程、子进程与后台线程的区别及潜在阻塞风险

Redis 持久化的奥秘：主线程、子进程与后台线程的区别及潜在阻塞风险

1. 主线程、子进程和后台线程的联系与区别 Redis 是一个高性能的键值数据库，以其快速的响应速度和丰富的功能集，广泛应用于各种应用场景。理解 Redis 的线程和进程模型有助于更好地优化其性能。下面，我们将详细探讨 Redis 中的主线程、子进程和后台线程的联系与区别。 进程…
阅读更多...
一文详解：信息化/数字化以及数智化的区别与联系

一文详解：信息化/数字化以及数智化的区别与联系

数字化转型是现代企业在竞争激烈的市场环境中保持竞争力的关键策略。数字化转型通常被分为三个阶段&#xff1a;信息化、数字化和数智化。 每个阶段都有其独特的特点和挑战&#xff0c;下面将详细阐述这三个阶段&#xff0c;并通过实际案例来说明其应用的区别和效果。 低成本起…
阅读更多...
U盘无法格式化怎么办?

U盘无法格式化怎么办?

U盘是我们日常工作和生活中经常使用的便携数据存储设备&#xff0c;它可以轻松地存储和传输文件&#xff0c;是工作和学习的好帮手。然而&#xff0c;有时候我们会遇到U盘无法格式化的情况&#xff0c;很多人可能会对此问题感到手足无措。本期内容将为大家详细解析U盘无法格式化…
阅读更多...
0601 模拟集成电路中的直流偏置技术

0601 模拟集成电路中的直流偏置技术

模拟集成电路中的直流偏置技术 6.1.1 BJT 电流源6.1.2 FET电流源6.1.3电流源做作有源负载![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/c5381fff64bd48a1b28ba9bee179b18f.png) 6.1.1 BJT 电流源 6.1.2 FET电流源 6.1.3电流源做作有源负载
阅读更多...
「实战应用」如何用图表控件LightningChart JS创建SQL仪表板应用（二）

「实战应用」如何用图表控件LightningChart JS创建SQL仪表板应用（二）

LightningChart JS是Web上性能特高的图表库&#xff0c;具有出色的执行性能 - 使用高数据速率同时监控数十个数据源。 GPU加速和WebGL渲染确保您的设备的图形处理器得到有效利用&#xff0c;从而实现高刷新率和流畅的动画&#xff0c;常用于贸易&#xff0c;工程&#xff0c;航…
阅读更多...
CorelDRAW2024永久破解版下载安装全教程！

CorelDRAW2024永久破解版下载安装全教程！

在设计领域&#xff0c;精准和专业是至关重要的要素。随着技术的飞速发展&#xff0c;设计师们对软件的选择也越发严苛。CorelDRAW 2024中文版及其2024终身永久版、破解版&#xff0c;因其强大的功能和便捷的使用体验&#xff0c;成为了设计师们的首选之一。本文将深入探讨这一…
阅读更多...
Blender 学习笔记（四）修改器

Blender 学习笔记（四）修改器

1. 概述 1.1 修改器是什么 如下图所示&#xff0c;我们可以给物体添加修改器。 修改器提供了很多操作&#xff0c;都是物体编辑模式所具有的&#xff0c;例如倒角、增加厚度、列阵等等&#xff0c;我们在添加修改器后&#xff0c;可以通过 ctrla 将这些修改应用。 1.2 为什…
阅读更多...
微信小程序请求request封装

微信小程序请求request封装

公共基础路径封装 // config.js module.exports {// 测试BASE_URL: https://cloud.chejj.cn,// 正式// BASE_URL: https://cloud.mycjj.com };请求封装 // request.js import config from ../config/baseUrl// 请求未返回时的loading const showLoading () > wx.showLoadi…
阅读更多...
18_Vue3路由机制

18_Vue3路由机制

Vue3路由机制router 1 路由简介 &#xff1a;路由就是根据不同的 URL 地址展示不同的内容或页面。 通俗理解&#xff1a;路由就像是一个地图&#xff0c;我们要去不同的地方&#xff0c;需要通过不同的路线进行导航。 2 路由的作用 单页应用程序&#xff08;SPA&#xff09;中…
阅读更多...
GlusterFS企业分布式存储

GlusterFS企业分布式存储

GlusterFS 分布式文件系统代表-nfs常见分布式存储Gluster存储基础梳理GlusterFS 适合大文件还是小文件存储&#xff1f; 应用场景术语Trusted Storage PoolBrickVolumes Glusterfs整体工作流程-数据访问流程GlusterFS客户端访问流程 GlusterFS常用命令部署 GlusterFS 群集准备环…
阅读更多...
设计模式——建造者模式(生成器模式)

设计模式——建造者模式(生成器模式)

建造者模式(生成器模式) 将一个复杂对象的构建与它的表示分离&#xff0c;使得同样的构建过程可以创建不同的表示的意图 用了建造者模式&#xff0c;那么用户就只需要指定需要构建的类型就可以得到它们&#xff0c;而具体构造的细节和过程不需要知道 概括地说&#xff0c;Bu…
阅读更多...
【复旦邱锡鹏教授《神经网络与深度学习公开课》笔记】神经元和人工神经网络

【复旦邱锡鹏教授《神经网络与深度学习公开课》笔记】神经元和人工神经网络

神经元 生物神经元&#xff1a; 平时处于抑制状态&#xff0c;当接受信息量达到一定程度后进入兴奋状态。 人工神经元&#xff1a; 一个人工神经元大致有两个步骤&#xff1a; 一是收集信息&#xff0c;如上图中 x 1 , ⋯ , x d x_1,\cdots,x_d x1​,⋯,xd​表示神经元可…
阅读更多...
49.Python-web框架-Django解决多语言redirect时把post改为get的问题

49.Python-web框架-Django解决多语言redirect时把post改为get的问题

目录 1.背景 2.思路 3.寻找 Find and Replace 4.再次运行程序&#xff0c;POST来了 5.小结 1.背景 昨天在练习一个Django功能时&#xff0c;把form的method设置为POST&#xff0c;但是实际提交时&#xff0c;一直是GET方法。最后发现这是与多语言相关&#xff0c;django前面…
阅读更多...
一文详解：Git与SVN的对比与选择

一文详解：Git与SVN的对比与选择

多人协同开的时候面临着代码版本管理和同步问题&#xff0c;这个时候git和svn就就大显神威了&#xff0c;个别小伙伴对这俩不是很熟悉&#xff0c;贝格前端工场为大家解读下。 一、什么是git和svn 分布式版本控制和集中式版本控制是两种不同的版本控制系统架构。 Git 分布式…
阅读更多...
【配置教程】Linux在企业端为何如此重要

【配置教程】Linux在企业端为何如此重要

目录 本节重点 先见一下什么是Linux 后台vs前台 企业为何选择使用Linux作为后台服务器 国内企业后台和用户使用Linux现状 1. IT服务器Linux系统应用领域 2. 嵌入式Linux系统应用领域 3. 个人桌面应用领域 Linux时代发展 版本更新 ​编辑 就个人找工作/能力提升来说…
阅读更多...
12 款 Android 照片恢复应用程序列表

12 款 Android 照片恢复应用程序列表

丢失难忘的照片总是令人痛苦的。如果软件崩溃或意外删除&#xff0c;Android 设备上的照片也可能会丢失。这时照片恢复应用程序就派上用场了。查看我们为 Android 收集的顶级照片恢复应用程序。 但是&#xff0c;您不会想为自己选择任何照片恢复应用程序。因此&#xff0c;我们…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023