学习笔记之Vue基础学习——持更

news2024/11/28 2:48:27

Vue学习

    • 一、Vue简介
      • 1.1 什么是Vue？
      • 1.2 Vue的特点
      • 1.3 Vue官网使用
      • 1.4 搭建Vue开发环境
      • 1.5 Hello小案例
      • 总结案例：
    • 二、模板语法
      • 2.1 两大类型
    • 三、数据绑定
      • 3.1 两种方式
    • 四、el和data的两种写法
      • 4.1 el的两种写法
      • 4.2 data的两种写法
    • 五、MVVM模型
      • 5.1 什么是MVVM模型
    • 六、数据代理
      • 6.1 Object.defineProperty方法
      • 6.2 理解数据代理
      • 6.3 Vue中的数据代理
    • 参考学习资料：

一、Vue简介

1.1 什么是Vue？

    官网解释：一套用于构建用户界面的渐进式 JavaScript 框架。

    构建用户界面意思就是将所拥有的数据通过某种方法变成用户可以看见的界面。

    渐进式意思就是Vue可以自底向上逐层的应用，从简单应用—>复杂应用。

1.2 Vue的特点

    1.采用组件化模式，提高代码复用率、且让代码更好的维护。
    对于每一部分进行封装，每封装一个.vue文件就是一部分，如果对其中某一部分进行修改，也不会对其他部分产生影响。
image-20221103221512372
    2.声明式编码，让编码人员无需直接操作DOM，提高开发效率。
    为了实现以下数据的效果，在不考虑用Vue写的情况下，会先使用js，进行命令式编码，一步一步实现功能。而Vue会进行声明式编码实现。
image-20221103224032878
命令式编码：

image-20221103224318984

声明式编码：
image-20221103224456533

    3.使用虚拟DOM和优秀的Diff算法，尽量复用DOM节点。

    原生JavaScript实现：进行一步一步的代码实现，直接得到真实对象，新数据通过赋值时间覆盖原数据。如下图所示：

image-20221103231858987

image-20221103232512885

    Vue实现：中间加了一步虚拟DOM，使用Diff算法进行比较新数据与原数据。如下图所示：

image-20221103232415246

需要掌握的JavaScript基础知识：

  • ES6语法规范
  • ES6模块化
  • 包管理器
  • 原型、原型链
  • 数组常用方法
  • axios
  • promise

1.3 Vue官网使用

    Vue2版本是使用官网，在右上角有相关学习的目录：

image-20221104235746263

1.4 搭建Vue开发环境

  • 下载开发版本或者生产版本的vue；
  • 安装vue的开发者调试工具；
  • 关闭了提示。

    1.首先先在官网点击安装目录，点击开发版本下载和生产版本下载，两个都可以，根据自己的需求。

image-20221105000113758

    2.然后在桌面创建文件，用vscode打开，然后创建两个文件，一个文件用来存放学习记录，另一个用来存放刚刚所下载的开发版本vue.js和生产版本vue.min.js文件。

image-20221105000233430

image-20221105000309790

    3.然后简单写一个demo，将Vue引入，右键点击open…，打开网页

image-20221105000725765

    4.打开网页后，点击检查，发现有两处警告；第一个就是需要去官网下载安装vue开发者调试工具，第二个就是需要关闭 vue 在启动时生成生产提示。

image-20221105000900457

    vue开发者调试工具：

image-20221105162224523

    关闭 vue 在启动时生成生产提示：

image-20221105162305203

1.5 Hello小案例

    1.先创建一个容器，使用HTML元素容器标签。

<!-- 准备好一个容器 -->
    <div id="root">
        <h1>Hello，Vue</h1>
    </div>

    2.Vue是构造函数，需要去new一个对象实例的Vue，在对整体的Vue进行修改的后面再创建，所以最好在关闭生产提示后面创建。

    在Vue中的参数是配置对象，配置对象有很多，但必须要按照规定要求去写，不可随意更改格式。

配置对象：

  • element
<body>
    <!-- 准备好一个容器 -->
    <!-- <div class = "root"> -->
    <div id="root">
        <h1>Hello，Vue</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //以阻止 vue 在启动时生成生产提示

        new Vue({
            el:'#root' //el就是element用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。div类型为id
            // el:'.root' //如果div类型为class
            //也可以这样写 el:document.getElementById('root')
        })
    </script>
</body>

    3.为了使数据更好的进行修改，这里需要将变量的值，也就是需要更改的值，从容器中提取出来放入实例中。image-20221105164548369

    然后用data创建对象，将需要修改的值以对象的形式存入data，再在容器中使用Vue语法中的插值语法对其进行调用。

<body>
    <!-- 准备好一个容器 -->
    <!-- <div class = "root"> -->
    <div id="root">
        <h1>Hello, {{name}}</h1>
        <h1>年龄：{{age}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //以阻止 vue 在启动时生成生产提示

        new Vue({
            el:'#root',//el就是element用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。div类型为id
            // el:'.root' //如果div类型为class
            data:{  //data中用于存储数据，数据供el所指定的容器去使用，值暂时先写成一个对象。
                name:'张三',
                age:'18'
            }
        })
    </script>
</body>

就会出现：

image-20221105165206602

总结案例：

    1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；

image-20221105170256210

    2. root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；

image-20221105170315775

    3. root容器里的代码被称为【Vue模板】。所以会与容器进行解释。

image-20221105170905433

    4. Vue实例和容器是一一对应的，不存在一个容器对应多个实例，或者多个容器对应一个实例；
    5. 真实开发中只有一个Vue实例，并且会配合着组件一起使用。也就是如果数据太多，Vue会使用组件来进行调用，不会使代码很庞大；
    6. {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；不是说一定要写data中出现的对象，也可以写js表达式；

注意区分：js表达式 和 js代码(语句)

1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：

（1）a

（2）a+b

（3）demo(1)

（4）x == y ? ‘a’ : ‘b’

2.js代码(语句)

（1）if(){}

（2）for(){}

    <div id="root">
        <h1>Hello, {{name}}, {{1+1}},{{Date.now()}}</h1>
        <h1>年龄：{{age}}</h1>
    </div>

就会出现：

image-20221105173754871

    7. 一旦data中的数据发送改变，那么页面中用到该数据的地方也会自动更新。

二、模板语法

2.1 两大类型

（1）插值语法

  • 把指定值放在指定的位置，在标签体中；

  • 功能：用于解析标签体内容；

  • 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

（2）指令语法

  • 功能：用于解析标签（包括：标签属性，标签体内容，绑定事件…）；
  • 举例：v-bind:href=“xxx” 或者 :href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性。
  • 备注：Vue中有很多指令，且形式都是v-???，此处我们只是用v-bind举例。

    如果有重复的变量名可以对其进行在此创建一个对象，再使用其对象的变量。例如重复使用name，可以在创建一个school对象，其中也有一个name就不会出错。

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>插值语法</h1>
        <h3>您好, {{name}}</h3>
        <hr/>
        <h1>指令语法</h1>
        <!-- v-bind可以给标签里的任何属性动态的绑定值，将其属性变成表达式执行，前提是这些属性在Vue实例中存在 -->
        <a v-bind:href="school.url">点击我去{{school.name}}学习1</a>
        <!-- v-bind 可以简写成 :-->
        <a :href="school.url">点击我去{{school.name}}学习2</a>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //以阻止 vue 在启动时生成生产提示

    new Vue({
        el:'#root',
        data:{
            name:'jack',
            school:{
                name:'尚硅谷',
                url:"http://www.atguigu.com",
            }
        }
    })
</script>

image-20221105232432781

三、数据绑定

3.1 两种方式

（1）单向绑定（v-bind）

    数据只能从data流向页面。页面修改数据无效。

注意：

  • v-bind可以简写成 : 。

（2）双向绑定（v-model）

    数据不仅能从data流向页面，还可以从页面流向data。所以无论是后端修改变量的值，还是在页面修改变量的值，数据都会进行改变。

image-20221105235646817

注意：

  • 双向绑定是有限制的，一般都应用在表单类元素上（如：input、select等）

    image-20221105235404649

  • v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

核心代码：

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <!-- 普通写法 -->
        <!-- 单向数据绑定：<input type="text" v-bind:value="name"><br/>
        双向数据绑定：<input type="text" v-model:value="name"><br/> -->

        <!-- 简写 -->
        单向数据绑定：<input type="text" :value="name"><br/>
        双向数据绑定：<input type="text" v-model="name"><br/>

        <!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
        <!-- <h2 v-model:x="name">您好！</h2> -->
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //以阻止 vue 在启动时生成生产提示
    
    new Vue({
        el:'#root',
        data:{
            name:'张三'
        }
    })
</script>

四、el和data的两种写法

4.1 el的两种写法

（1）new Vue的时候配置el属性，例如 el:‘#root’。

（2）先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值。mount是挂载的意思，也就是说Vue实例将容器中的变量解析后，在挂载到容器。

image-20221106002425981

代码：

<!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>el与data的两种写法</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>您好，{{name}}</h1>
    </div>
    
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //以阻止 vue 在启动时生成生产提示

    const v = new Vue({
        //el:'#root', //第一种写法
        data:{
            name:'张三'
        }
    })
    console.log(v)
    v.$mount('#root')  //第二种写法
</script>
</html>

4.2 data的两种写法

（1）对象式

（2）函数式

    如何选择：目前两种方式都可以，以后学习到组件时，data必须使用函数式来写，否则会报错。

一个重要的原则：由Vue管理的函数，一定不用写箭头函数，一旦写了箭头函数，this就不再是Vue实例了，而是window实例。

image-20221106003242552

代码：

<!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>el与data的两种写法</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>您好，{{name}}</h1>
    </div>
    
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //以阻止 vue 在启动时生成生产提示

    new Vue({
        el:'#root',
        //data的第一种写法：对象式
        // data:{
        //     name:'张三'
        // }

        //data的第二种写法：函数式
        //也可以这样写data(){}，但是不允许写data:()=>{}
        data:function(){
            console.log('@@@@',this) //此处的this是Vue实例对象
            return{
                name:'张三'
            }
        }
    })
</script>
</html>

五、MVVM模型

5.1 什么是MVVM模型

    在官网中的Vue实例中已经提过MVVM模型，Vue是在MVVM模型上收到启发，这也是为什么Vue实例赋值名称为vm。

image-20221106161747789

image-20221106162139920

MVVM模型：

  • M：模型（Model）：对应着data中的数据；
  • V：视图（View）：模板
  • VM：视图模型（ViewModel）：Vue的实例

image-20221106162531281

在实践中观察发现：

  • data中所有的属性，最后都出现在了vm身上；

  • vm身上有所有的属性及Vue原型上所有属性，在Vue模板中都可以直接使用。

    image-20221106175403749

就会出现：

image-20221106175820275

六、数据代理

6.1 Object.defineProperty方法

    Object.defineProperty 这个方法的作用就是在对象上定义新属性，或者修改已存在的属性，也就是给对象添加属性用的。

Object.defineProperty(object, propertyname, descriptor);

    可以看出这个方法接收三个参数：

  • object：属性所在的对象；

  • propertyname：属性的名字；

  • descriptor：配置项，描述对象要添加的属性值。

    • 配置项中可以写六个控制属性：

      • value：当前数据值，默认值为undefined；

      • writable：是否可重写，默认值为false；

      • enumerable：是否可以遍历，默认值为false；

      • configurable：是否可再次修改配置项，默认值为false；

      • get：读取时内部调用的函数；

      • set：写入时内部调用的函数。

    首先举一个简单的例子，验证value：

<body>
    <script type="text/javascript">
        let person= {
            name:'张三',
            sex:'女',
        }

        Object.defineProperty(person,'age',{
            value:18,
        })
    
        console.log(person)
    </script>
    
</body>

image-20221106183936281

    举例，验证enumerable，writable，configurable属性值：

<body>
    <script type="text/javascript">
        let person= {
            name:'张三',
            sex:'女',
        }

        Object.defineProperty(person,'age',{
            value:18, //设置属性值
            enumerable:true, //控制属性是否可以枚举，默认值是false
            writable:true, //控制属性是否可以被修改，默认值是false
            configurable:true //控制属性是否可以被删除，默认值是false
        })
    
        for (const key in person) {
            console.log('@@@',person[key])
        }
        console.log(person)
    </script>
    
</body>

image-20221106184509170

image-20221106184624394

    这里面还有最重要的两个属性 get 和 set ：

注意：当使用了getter或setter方法，不允许使用writable和value这两个属性(如果使用，会直接报错)

  • get：是获取值的方法，类型为 function（函数） ，获取值的时候会被调用，不设置时为undefined。

  • set：是设置值的方法，类型为 function（函数） ，设置值的时候会被调用，undefined。

  • get 或 set 不是必须成对出现，根据需求任写其一就可以。

举例如下：

<body>
    <script type="text/javascript">
        let number = 18
        let person= {
            name:'张三',
            sex:'女',
        }

        Object.defineProperty(person,'age',{
            // value:18, //设置属性值
            // enumerable:true, //控制属性是否可以枚举，默认值是false
            // writable:true, //控制属性是否可以被修改，默认值是false
            // configurable:true //控制属性是否可以被删除，默认值是false

            //当有人读取person的age属性时，get函数（getter）就会被调用，且返回值就是age的值
            get(){
                console.log('有人读取age属性了')
                return number
            },

            //当有人修改person的age属性时，set函数（setter）就会被调用，且会收到修改的具体值
            set(value){
                console.log('有人修改了age属性，并且值是',value)
                number = value
            }
        })
    
        // for (const key in person) {
        //     console.log('@@@',person[key])
        // }

        console.log(person)
    </script>
    
</body>

image-20221106185628016

6.2 理解数据代理

    数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）

<body>
    <!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写） -->
    <script type="text/javascript">
        let obj1 = {x:100}
        let obj2 = {y:200}

        Object.defineProperty(obj2,'x',{
            get(){
                return obj1.x
            },
            set(value){
                obj1.x = value
            }
        })
    </script>
</body>

image-20221106203542882

6.3 Vue中的数据代理

参考学习资料：

尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

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

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

相关文章

目标检测（5）—— YOLO系列V1

目标检测（5）—— YOLO系列V1

一、YOLO系列V1 经典的one-stage方法&#xff0c;You Only Look Once将检测问题转化成回归问题&#xff0c;一个CNN搞定可以对视频进行实时监测 YOLO系列的速度更快&#xff0c;我们检测的物体很简单&#xff0c;进行取舍&#xff0c;舍弃了一些精度。 V1核心思想 现在要预测…
阅读更多...
Windows与Linux行尾换行符引发Git的一系列惨案

Windows与Linux行尾换行符引发Git的一系列惨案

1 前言 最近在使用 Git 提交代码的时候&#xff0c;老是碰到一段看起来 “没有任何改动” 的代码&#xff0c;被 diff 检测出异常&#xff0c;很是苦恼&#xff0c;特别是项目紧急的时候&#xff0c;不敢用 VSCode 编辑了&#xff0c;只能用 vim 进行少量代码的修改、上库。 …
阅读更多...
传统Spring项目的创建和使用xml文件来保存对象和取对象

传统Spring项目的创建和使用xml文件来保存对象和取对象

传统Spring项目的创建和使用xml文件来保存对象和取对象## 传统Spring项目的创建 一、创建一个maven项目&#xff08;maven项目无需使用模板&#xff09; 二、导入Spring依赖&#xff08;Spring Context依赖和Spring Beans依赖&#xff09; 可以从maven仓库获取&#xff0c;也…
阅读更多...
Java 中代码优化的 30 个小技巧(中)

Java 中代码优化的 30 个小技巧(中)

11 位运算效率更高 如果你读过 JDK 的源码&#xff0c;比如 ThreadLocal、HashMap 等类&#xff0c;你就会发现&#xff0c;它们的底层都用了位运算。 为什么开发 JDK 的大神们&#xff0c;都喜欢用位运算&#xff1f; 答&#xff1a;因为位运算的效率更高。 在 ThreadLoca…
阅读更多...
数码相机raw照片编辑Capture One Pro中文

数码相机raw照片编辑Capture One Pro中文

怎么编辑数码相机拍摄的raw格式的照片&#xff1f;Capture One Pro 22是一款专业、强大、易于使用的图像编辑软件&#xff0c;与主流相机型号兼容&#xff0c;直接导入照片进行编辑操作&#xff0c;包括佳能、尼康、索尼、富士等。将所有必备工具和高端性能融于一体、使您在一套…
阅读更多...
riscv引导程序及仿真记录

riscv引导程序及仿真记录

1.riscv基本的寄存器列表 这里只关注32个通用寄存器x0-x31 2.引导程序代码 # 1 "iriscvboot.casm" # 1 "<built-in>" # 1 "<command-line>" # 1 "/usr/include/stdc-predef.h" 1 3 4 # 1 "<command-line>&qu…
阅读更多...
【Linux】进程间通信

【Linux】进程间通信

文章目录1.进程间通信基础2.管道2.1匿名管道2.1.1匿名管道的原理2.2匿名管道的特点2.3匿名管道函数2.3.1用例2.3.2实现ps -ajx | grep bash指令2.4匿名管道的特点2.5管道的大小2.6管道的生命周期2.7进程池3.命名管道FIFO3.1命名管道的接口3.2命名管道和匿名管道的区别3.3用FIFO…
阅读更多...
大数据面试重点之kafka(七)

大数据面试重点之kafka(七)

大数据面试重点之kafka(七) Kafka的分区器、拦截器、序列化器&#xff1f; 问过的一些公司&#xff1a;ebay 参考答案&#xff1a; Kafka中&#xff0c;先执行拦截器对消息进行相应的定制化操作&#xff0c;然后执行序列化器将消息序列化&#xff0c;最后执行分 区器选择对应分…
阅读更多...
python:基础知识

python:基础知识

环境&#xff1a; window11python 3.10.6vscodejavascript、c/c/java/c#基础&#xff08;与这些语言对比&#xff09; 注释 一、数据类型 基础六大数据类型&#xff0c;可以使用 type()查看&#xff0c;如下图&#xff1a; 1.1 数字&#xff08;Number&#xff09; 支持 整…
阅读更多...
联邦学习--记录

联邦学习--记录

简介 联邦学习&#xff08;Federated Learning&#xff09;是一种新兴的人工智能基础技术&#xff0c;其设计目标是在保障大数据交换时的信息安全、保护终端数据和个人数据隐私、保证合法合规的前提下&#xff0c;在多参与方或多计算结点之间开展高效率的机器学习。其中&#…
阅读更多...
【机器学习大杀器】Stacking堆叠模型-English

【机器学习大杀器】Stacking堆叠模型-English

1. Introduction The stacking model is very common in Kaglle competitions. Why? 【机器学习大杀器】Stacking堆叠模型&#xff08;English&#xff09; 1. Introduction 2. Model 3: Stacking model 2.1 description of the algorithms: 2.2 interpretation of the es…
阅读更多...
浅谈Vue中 ref、reactive、toRef、toRefs、$refs 的用法

浅谈Vue中 ref、reactive、toRef、toRefs、$refs 的用法

&#x1f4ad;&#x1f4ad; ✨&#xff1a; 浅谈ref、reactive、toRef、toRefs、$refs   &#x1f49f;&#xff1a;东非不开森的主页   &#x1f49c;: 技术需沉淀&#xff0c;不要浮躁&#x1f49c;&#x1f49c;   &#x1f338;: 如有错误或不足之处&#xff0c;希望可…
阅读更多...
Redhat(3)-Bash-Shell-正则表达式

Redhat(3)-Bash-Shell-正则表达式

1.bash脚本 2.bash变量、别名、算术扩展 3.控制语句 4.正则表达式 1.bash脚本 #!/bin/bash#this is basic bash script<< BLOCK This is the basic bash script BLOKC: This is the basic bash script echo "hello world!" 双引号、单引号只有在变量时才有区…
阅读更多...
健身房信息管理系统/健身房管理系统

健身房信息管理系统/健身房管理系统

21世纪的今天&#xff0c;随着社会的不断发展与进步&#xff0c;人们对于信息科学化的认识&#xff0c;已由低层次向高层次发展&#xff0c;由原来的感性认识向理性认识提高&#xff0c;管理工作的重要性已逐渐被人们所认识&#xff0c;科学化的管理&#xff0c;使信息存储达到…
阅读更多...
VCS 工具学习笔记（1）

VCS 工具学习笔记（1）

目录 引言 平台说明 关于VCS 能力 Verilog 仿真事件队列 准备 VCS工作介绍 工作步骤 支持 工作机理 编译命令格式 编译选项 示例 仿真命令格式 仿真选项 示例 库调用 -y 总结 实践 设计文件 仿真文件 编译 仿真 关于增量编译 日志文件记录 编译仿真接续进…
阅读更多...
链接脚本和可执行文件

链接脚本和可执行文件

几个重要的概念 摘取自知乎内容&#xff1a; 链接器与链接脚本 - 知乎 linker 链接器 链接器(linker) 是一个程序&#xff0c;这个程序主要的作用就是将目标文件(包括用到的标准库函数目标文件)的代码段、数据段以及符号表等内容搜集起来并按照 ELF或者EXE 等格式组合成一个…
阅读更多...
【C++学习】string的使用

【C++学习】string的使用

&#x1f431;作者&#xff1a;一只大喵咪1201 &#x1f431;专栏&#xff1a;《C学习》 &#x1f525;格言&#xff1a;你只管努力&#xff0c;剩下的交给时间&#xff01; string的使用&#x1f640;模板&#x1f639;函数模板&#x1f639;类模板&#x1f640;string模板简…
阅读更多...
【菜鸡读论文】Former-DFER: Dynamic Facial Expression Recognition Transformer

【菜鸡读论文】Former-DFER: Dynamic Facial Expression Recognition Transformer

Former-DFER: Dynamic Facial Expression Recognition Transformer 哈喽&#xff0c;大家好呀&#xff01;本菜鸡又来读论文啦&#xff01;先来个酷炫小叮当作为我们的开场&#xff01; 粉红爱心泡泡有没有击中你的少女心&#xff01;看到这么可爱的小叮当陪我们一起读论文&am…
阅读更多...
有了PySnooper，不用print、不用debug轻松查找问题所在！

有了PySnooper，不用print、不用debug轻松查找问题所在！

PySnooper是一个非常方便的调试器&#xff0c;它是通过python注解的方式来对函数的执行过程进行监督的。 应用起来比较简单&#xff0c;不用一步一步的去走debug来查找问题所在&#xff0c;并且将运行过程中函数的变量值打印出来结果一目了然&#xff0c;相当于替代了print函数…
阅读更多...
Boundary Loss 原理与代码解析

Boundary Loss 原理与代码解析

paper&#xff1a;Boundary loss for highly unbalanced segmentation Introduction 在医学图像分割中任务中通常存在严重的类别不平衡问题&#xff0c;目标前景区域的大小常常比背景区域小几个数量级&#xff0c;比如下图中前景区域比背景区域小500倍以上。 分割通常采用的交…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023