Vue [Day5]

news2025/1/20 1:50:08

自定义指令

全局注册 和 局部注册

在这里插入图片描述
inserted在指令所在的元素 被插入到页面中时,触发

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 1.全局注册指令
Vue.directive('focus', {
    // inserted在指令所在的元素 被插入到页面中时,触发
    inserted(el) {
        // el就是指令所绑定的元素
        console.log(el);
        el.focus()
    }
})

new Vue({
  render: h => h(App),
}).$mount('#app')


App.vue

<template>
    <div class="app">
        <h1>自定义指令</h1>
        <input v-focus ref="inp" type="text" />
    </div>
</template>

<script>
export default {
    // mounted() {
    //     this.$refs.inp.focus()
    // }

    // 2.局部注册指令
    directives: {
        focus: {
            inserted(el) {
                el.focus()
            }
        }
    }
}
</script>

<style>
</style>


指令的值

在这里插入图片描述


App.vue
<template>
    <div class="app">
        <h1 v-color="color1">11111</h1>
        <h1 v-color="color2">22222</h1>
    </div>
</template>

<script>
export default {
    data() {
        return {
            color1: 'red',
            color2: 'pink'
        }
    },
    directives: {
        color: {
            // 1.inserted提供的是元素被添加到页面中时的逻辑
            inserted(el, binding) {
                // binding.value就是指令的值
                el.style.color = binding.value
            },

            // 2.update 指令的值修改的时候触发,提供值变化后,dom更新的逻辑
            update(el, binding) {
                el.style.color = binding.value
            }
        }
    }
}
</script>

<style>
</style>


小结

在这里插入图片描述


v-loading 指令封装

在这里插入图片描述


在这里插入图片描述

App.vue

<template>
    <div class="main">
        <div class="box" v-loading="isLoading">
            <ul>
                <li v-for="item in list" :key="item.id" class="news">
                    <div class="left">
                        <div class="title">{{ item.title }}</div>
                        <div class="info">
                            <span>{{ item.source }}</span>
                            <span>{{ item.time }}</span>
                        </div>
                    </div>

                    <div class="right">
                        <img :src="item.img" alt="" />
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
  
  <script>
// 安装axios =>  yarn add axios
import axios from 'axios'

// 接口地址:http://hmajax.itheima.net/api/news
// 请求方式:get
export default {
    data() {
        return {
            list: [],
            isLoading: true
        }
    },
    async created() {
        // 1. 发送请求获取数据
        const res = await axios.get('http://hmajax.itheima.net/api/news')

        setTimeout(() => {
            // 2. 更新到 list 中
            this.list = res.data.data
            this.isLoading = false
            console.log('111')
        }, 2000)
        console.log('22222')
    },
    directives: {
        loading: {
            inserted(el, binding) {
                // if (binding.value == true) {
                //     el.classList.add('loading')
                // } else {
                //     el.classList.remove('loading')
                // }
                // 用三元写
                binding.value
                    ? el.classList.add('loading')
                    : el.classList.remove('loading')
            },
            update(el, binding) {
                binding.value
                    ? el.classList.add('loading')
                    : el.classList.remove('loading')
            }
        }
    }
}
</script>
  
  <style>
/* 伪类 - 蒙层效果 */
.loading:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff url('../public/loading.gif') no-repeat center;
}

/* .box2 {
    width: 400px;
    height: 400px;
    border: 2px solid #000;
    position: relative;
  } */

.box {
    width: 800px;
    min-height: 500px;
    border: 3px solid orange;
    border-radius: 5px;
    position: relative;
}
.news {
    display: flex;
    height: 120px;
    width: 600px;
    margin: 0 auto;
    padding: 20px 0;
    cursor: pointer;
}
.news .left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 10px;
}
.news .left .title {
    font-size: 20px;
}
.news .left .info {
    color: #999999;
}
.news .left .info span {
    margin-right: 20px;
}
.news .right {
    width: 160px;
    height: 120px;
}
.news .right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
</style>


插槽

类别1:默认插槽

在这里插入图片描述
在这里插入图片描述

MyDialog2.vue

<template>
    <div class="MyDialog2">
        <div class="log-header">
            <h1>友情提示</h1>
            <span>✖️</span>
        </div>
        <hr />

        <div class="log-body">
            <slot></slot>
        </div>

        <div class="log-footer">
            <button class="cancel">取消</button>
            <button class="ok">确认</button>
        </div>
    </div>
</template>

<script>
export default {}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.MyDialog2 {
    width: 400px;
    margin: 20px auto;
    padding: 0 20px;
    border: 1px black solid;
    border-radius: 10px;
    background-color: #fff;
}
.log-header {
    height: 60px;
    display: flex;
    justify-content: space-between;

    line-height: 60px;
}

.log-body {
    padding: 10px;
    height: 80px;
}

.log-footer {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 10px;
}

button.cancel {
    width: 50px;
    height: 30px;
    background-color: #fff;
    margin-right: 20px;
    border: black 1px solid;
    border-radius: 5px;
}

button.ok {
    width: 50px;
    height: 30px;
    background-color: #05defa;
    border: black 1px solid;
    border-radius: 5px;
}
</style>


App.vue
<template>
    <div class="app">
        <!-- 直接写 不用{{}} -->
        <MyDialog2>确认删除吗 </MyDialog2>
        <MyDialog2>确认退出吗 </MyDialog2>
    </div>
</template>

<script>
import MyDialog2 from './components/MyDialog2.vue'
export default {
    components: {
        MyDialog2
    }
}
</script>

<style>
body {
    background-color: #cac2c2;
}
</style>


后备内容(有默认值的)

在这里插入图片描述


在这里插入图片描述




MyDialog.vue

<div class="log-body">
         <slot>有后备内容</slot>
 </div>



Vue.vue

    <div class="app">
        <!-- 有数值,就照常显示 -->
        <MyDialog2>确认删除吗 </MyDialog2>
        <MyDialog2>确认退出吗 </MyDialog2>

        <!-- 没数值,就显示默认 -->
        <MyDialog2> </MyDialog2>
    </div>


类别2:具名插槽

在这里插入图片描述



在这里插入图片描述


MyDialog2.vue

 <div class="MyDialog2">
        <div class="log-header">
            <slot name="head"></slot>
        </div>
        <hr />

        <div class="log-body">
            <slot name="body">有后备内容</slot>
        </div>

        <div class="log-footer">
            <slot name="footer"></slot>
        </div>
    </div>


App.vue
class=“cancel” class="ok"等css样式,还是在MyDialog.vue里面没动,但是还是可以正常渲染,yyds

<div class="app">
        <MyDialog2>
        <!-- head没有加“”,就直接写了哎 -->
            <template v-slot:head>
                <h1>友情提示</h1>
                <span>✖️</span>
            </template>
            <template v-slot:body> 确认删除吗</template>
            
            <template #footer>
                <button class="cancel">取消</button>
                <button class="ok">确认</button>
            </template>
        </MyDialog2>
    </div>


在这里插入图片描述


插槽的传参语法:作用域插槽

在这里插入图片描述



在这里插入图片描述


在这里插入图片描述






在这里插入图片描述
妙在 App.vue有两个数组,要求的两个表格也是显示不同的数据,但MyTable.vue里只用写一个table,如果写两个,反而会出现4个表单,而且两次的传数据必须同名,都是data

 <MyTable :data="list">
            <template #default="obj">
                <button @click="del(obj.row.id)">删除</button>
            </template>
        </MyTable>

        <MyTable :data="list2">
            <template #default="{ row }">
                <!-- 还能直接结构 -->
                <button @click="show(row.id)">查看</button>
            </template>
        </MyTable>

MyTable.vue

<template>
    <div class="MyTable">
        <table>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年纪</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in data" :key="item.id">
                    <td>{{ index + 1 }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.age }}</td>
                    <!-- 1.给slot标签,以添加属性的方式,传值 -->
                    <slot :row="item" msg="look test"></slot>
                    <!-- 2.将所有的属性,添加到一个对象中 -->
                    <!-- {
                        row:{id:1,name:'sdsdsd',age:13},
                        msg:'look test'

                    } -->
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
    props: {
        data: Array
    }
}
</script>

<style>
table {
    border: 1px black solid;
    border-spacing: 0;
}
td,
th {
    border: 1px rgb(176, 175, 175) solid;
}
</style>


App.vue

<template>
    <div class="app">
        <!-- 传数据是在 MyTable-->
        <MyTable :data="list">
            <!-- 接收数据 是在template
            
             <template v-slot:head>
                制定插槽名字,也是在template
            -->

            <!-- 3.通过template #插槽名=“变量名” 接收 -->
            <template #default="obj">
                <button @click="del(obj.row.id)">删除</button>
            </template>
        </MyTable>

        <MyTable :data="list2">
            <template #default="{ row }">
                <!-- 还能直接结构 -->
                <button @click="show(row.id)">查看</button>
            </template>
        </MyTable>
    </div>
</template>

<script>
import MyTable from './components/MyTable.vue'
export default {
    components: {
        MyTable
    },
    data() {
        return {
            list: [
                { id: 1, name: '张小花', age: 18 },
                { id: 2, name: '孙大明', age: 19 },
                { id: 3, name: '刘德忠', age: 17 }
            ],
            list2: [
                { id: 1, name: '赵小云', age: 18 },
                { id: 2, name: '刘蓓蓓', age: 19 },
                { id: 3, name: '姜肖泰', age: 17 }
            ]
        }
    },
    methods: {
        del(tt) {
            this.list = this.list.filter((item) => item.id != tt)
        },
        show(tt) {
            alert(`name:${tt.name},age:${tt.age}`)
        }
    }
}
</script>

<style>
</style>


在这里插入图片描述




【综合案例】—— 商品列表

在这里插入图片描述



App.vue

<template>
    <div class="table-case">
        <MyTable :mydata="goods">
            <template #head>
                <th>编号</th>
                <th>名称</th>
                <th>图片</th>
                <th width="100px">标签</th>
            </template>

            <!-- 对应名字,并接受数据 -->
            <!-- <template #body="obj"> -->
            <!-- 解构 -->
            <template #body="{ item, index }">
                <td>{{ index + 1 }}</td>
                <td>{{ item.name }}</td>
                <td>
                    <img :src="item.picture" />
                </td>
                <td>
                    <!-- 标签组件 -->
                    <MyTag v-model="item.tag"></MyTag>
                </td>
            </template>
        </MyTable>
    </div>
</template>
  
  <script>
// my-tag 标签组件的封装
// 1. 创建组件 - 初始化
// 2. 实现功能
//    (1) 双击显示,并且自动聚焦
//        v-if v-else @dbclick 操作 isEdit
//        自动聚焦:
//        法1. $nextTick => $refs 获取到dom,进行focus获取焦点
//        法2. 封装v-focus指令

//    (2) 失去焦点,隐藏输入框
//        @blur 操作 isEdit 即可

//    (3) 回显标签信息
//        回显的标签信息是父组件传递过来的
//        v-model实现功能 (简化代码)  v-model => :value 和 @input
//        组件内部通过props接收, :value设置给输入框

//    (4) 内容修改了,回车 => 修改标签信息
//        @keyup.enter, 触发事件 $emit('input', e.target.value)

// ---------------------------------------------------------------------

// my-table 表格组件的封装
// 1. 数据不能写死,动态传递表格渲染的数据  props
// 2. 结构不能写死 - 多处结构自定义 【具名插槽】
//    (1) 表头支持自定义
//    (2) 主体支持自定义
import MyTag from './components/MyTag.vue'
import MyTable from './components/MyTable.vue'
export default {
    name: 'TableCase',
    components: { MyTag, MyTable },
    data() {
        return {
            text: 'slx',
            goods: [
                {
                    id: 101,
                    picture:
                        'https://yanxuan-item.nosdn.127.net/f8c37ffa41ab1eb84bff499e1f6acfc7.jpg',
                    name: '梨皮朱泥三绝清代小品壶经典款紫砂壶',
                    tag: '茶具'
                },
                {
                    id: 102,
                    picture:
                        'https://yanxuan-item.nosdn.127.net/221317c85274a188174352474b859d7b.jpg',
                    name: '全防水HABU旋钮牛皮户外徒步鞋山宁泰抗菌',
                    tag: '男鞋'
                },
                {
                    id: 103,
                    picture:
                        'https://yanxuan-item.nosdn.127.net/cd4b840751ef4f7505c85004f0bebcb5.png',
                    name: '毛茸茸小熊出没,儿童羊羔绒背心73-90cm',
                    tag: '儿童服饰'
                },
                {
                    id: 104,
                    picture:
                        'https://yanxuan-item.nosdn.127.net/56eb25a38d7a630e76a608a9360eec6b.jpg',
                    name: '基础百搭,儿童套头针织毛衣1-9岁',
                    tag: '儿童服饰'
                }
            ]
        }
    }
}
</script>
  
  <style lang="less" scoped>
.table-case {
    width: 1000px;
    margin: 50px auto;
    img {
        width: 100px;
        height: 100px;
        object-fit: contain;
        vertical-align: middle;
    }
}
</style>


main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 1.全局注册指令
Vue.directive('focus', {
    // inserted在指令所在的元素 被插入到页面中时,触发
    inserted(el) {
        // el就是指令所绑定的元素,binding用不到,所以没写
        console.log(el);
        el.focus()
    }
})

new Vue({
  render: h => h(App),
}).$mount('#app')



MyTable.vue

<template>
    <table class="my-table">
        <thead>
            <tr>
                <slot name="head"></slot>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in mydata" :key="item.id">
                <!-- 用作用域插槽,将数据绑在插槽 -->
                <!-- 以添加属性的方式,传值 -->
                <slot name="body" :item="item" :index="index"></slot>
            </tr>
        </tbody>
    </table>
</template>

<script>
export default {
    props: {
        mydata: {
            type: Array,
            required: true
        }
    }
}
</script>

<style lang="less" scoped>
.my-table {
    width: 100%;
    border-spacing: 0;
    img {
        width: 100px;
        height: 100px;
        object-fit: contain;
        vertical-align: middle;
    }
    th {
        background: #f5f5f5;
        border-bottom: 2px solid #069;
    }
    td {
        border-bottom: 1px dashed #ccc;
    }
    td,
    th {
        text-align: center;
        padding: 10px;
        transition: all 0.5s;
        &.red {
            color: red;
        }
    }
    .none {
        height: 100px;
        line-height: 100px;
        color: #999;
    }
}
</style>


MyTag.vue

<template>
    <div class="my-tag">
        <input
            v-if="isEdit"
            v-focus
            ref="inp"
            @blur="isEdit = false"
            @keyup.enter="handleEnter"
            :value="value"
            class="input"
            type="text"
            placeholder="输入标签"
        />
        <div @dblclick="handleClick" v-else class="text">{{ value }}</div>
    </div>
</template>

<script>
export default {
    props: {
        value: String
    },
    data() {
        return {
            isEdit: false
        }
    },
    methods: {
        handleClick() {
            // 切换显示状态
            this.isEdit = true

            // // 立刻获取焦点 异步
            // this.$nextTick(() => {
            //     this.$refs.inp.focus()
            // })
            // 先不用,要封装到全局指令main.js
            // 所以直接v-focus
        },
        handleEnter(e) {
            // 子传父,回车时,输入框内容提交给父组件更新
            // 由于父组件是v-model,触发事件,需要input事件,输入框的  v-model=>:value @input
            // e.target是触发事件的事件元

            if (e.target.value.trim() == '') {
                return alert('不能是空')
            }

            this.$emit('input', e.target.value)

            // 回车后,提交完成,要关闭输入框,而不是失去焦点才关上
            this.isEdit = false
        }
    }
}
</script>

<style lang="less" scoped>
.my-tag {
    cursor: pointer;
    .input {
        appearance: none;
        outline: none;
        border: 1px solid #ccc;
        width: 100px;
        height: 40px;
        box-sizing: border-box;
        padding: 10px;
        color: #666;
        &::placeholder {
            color: #666;
        }
    }
}
</style>


单页应用程序 SPA - Sinle Page Application

在这里插入图片描述




在这里插入图片描述

路由

路径组件映射关系

VueRouter

作用:修改地址栏路径时,切换显示匹配的组件
在这里插入图片描述

VueRouter 使用

在这里插入图片描述



在这里插入图片描述


main.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 5个基础步骤
// 1.下载
// cnpm i vue-router@3.6.5
// 2.引入
import VueRouter from 'vue-router'
import Find from './views/Find'
import Friend from './views/Friend'
import My from './views/My'
// 3.安装注册 Vue.use
Vue.use(VueRouter)

// 4.创建路由对象
const router = new VueRouter({
    // routes路由规则 {path:路径,components:组件}
    routes: [
    // 注意路径 没有./ 是绝对路径
        { path: '/find', component: Find },
        { path: '/friend', component: Friend },
        { path: '/my', component: My},
    ]
})

// 5.注入到new Vue中,建立关联
new Vue({
    render: h => h(App),
    // router:router
    // 简写
    router
}).$mount('#app')

// 2个核心步骤
// 1.建组件(src/views/xxxx),配规则
// 2.准备导航链接,配置路由出口(匹配组件所展示的位置




src/views/Find.vue
My.vue和Friend.vue同理

<template>
    <div class="Find">
        <p>Find</p>
        <p>Find</p>
        <p>Find</p>
    </div>
</template>
  
  <script>
export default {
    name: 'MyFind'
}
</script>
  
  <style>
</style>


App.vue
<template>
    <div class="app">
        <div class="nav">
            <a href="#/find">发现</a>
            <a href="#/friend">朋友</a>
            <a href="#/my">我的</a>
        </div>

        <!-- 路由出口 匹配组件所展示的位置 -->
        <router-view></router-view>
    </div>
</template>

<script>
export default {}
</script>

<style>
.nav a {
    display: inline-block;
    width: 50px;
    height: 30px;
    text-decoration: none;
    background-color: #ca8b8b;
    border: 1px solid black;
}
</style>

<a href="#my">我的</a> # 起到什么作用

<div class="app">
        <a href="#/find">发现</a>
        <a href="#/friend">朋友</a>
        <a href="#my">我的</a>
    </div>

在这里,#符号被用作一个锚点(anchor)。锚点是用来标识页面中的特定部分或位置的标记。当你点击带有#符号的链接时,浏览器会滚动到指定的锚点所在的位置,将页面的滚动位置调整到对应的元素上。

在给定的代码片段中,href属性值中的#后面是一个标识符,例如#/find、#/friend和#my。它们会被解释为页面中的锚点,并与页面中具有相应id或name属性的元素关联起来。当点击这些链接时,浏览器会将滚动位置调整到与相应锚点相关联的元素上。

例如,如果存在一个具有id="find"的元素,当你点击发现时,浏览器会滚动到具有id="find"的元素所在的位置。

注意:在这种情况下,#符号后面的字符串不会被发送到服务器,它只是本地页面内的导航标识符。
在这里插入图片描述


组件存放目录问题

页面组件放在 views
复用组件放在 components

在这里插入图片描述

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

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

相关文章

Java个人博客系统--基于Springboot的设计与实现

目录 一、项目概述 应用技术 接口实现&#xff1a; 数据库定义&#xff1a; 数据库建表&#xff1a; 博客表数据库相关操作&#xff1a; 添加项⽬公共模块 加密MD5 页面展示&#xff1a;http://121.41.168.121:8080/blog_login.html 项目源码&#xff1a;https://gitee…

初学 Python 需要安装哪些软件?超级实用,小白必看!

前言 大家早好、午好、晚好吖 ❤ ~欢迎光临本文章 编程这个东西是真的奇妙。 对于懂得的人来说&#xff0c;会觉得这个工具是多么的好用、有趣&#xff0c;而对于小白来说&#xff0c;就如同大山一样。 其实这个都可以理解&#xff0c;大家都是这样过来的。 那么接下来就说…

Spring简述

Sping是什么Spring主要模块IOCDI依赖注入的三种方式 AOP术语 Sping是什么 Spring是一个轻量级的开源框架&#xff0c;主要作用是为了简化开发&#xff0c;它以IOC&#xff08;控制反转&#xff09;和AOP&#xff08;面向切面编程&#xff09;为内核 Spring主要模块 我们一般…

cocosCreator 之 i18n多语言插件

版本&#xff1a; v3.4.0 环境&#xff1a; Mac 简介 i18n是国际化的简称&#xff0c; 全名&#xff1a;internationalization&#xff1b;取首尾字符i和n&#xff0c;18代表单词中间的字符数目。 该插件不需要产品做太多的改变&#xff0c;通过语言的设置&#xff0c;实现不…

P1194 买礼物(最小生成树)(内附封面)

买礼物 题目描述 又到了一年一度的明明生日了&#xff0c;明明想要买 B B B 样东西&#xff0c;巧的是&#xff0c;这 B B B 样东西价格都是 A A A 元。 但是&#xff0c;商店老板说最近有促销活动&#xff0c;也就是&#xff1a; 如果你买了第 I I I 样东西&#xff0…

【逗老师的PMP学习笔记】6、项目的进度管理

目录 一、规划进度管理1、【关键输出 】进度管理计划 二、定义活动1、【关键工具】拆解2、【关键工具】滚动式规划3、【关键输出】活动清单和活动属性4、【关键输出】里程碑清单 三、排列活动顺序1、【关键工具】紧前关系绘图法2、【关键工具】提前量和滞后量3、【关键输出】项…

Linux 中使用 verdaccio 搭建私有npm 服务器

安装 Node Linux中安装Node 安装verdaccio npm i -g verdaccio安装完成 输入verdaccio,出现下面信息代表安装成功&#xff0c;同时输入verdaccio后verdaccio已经处于运行状态&#xff0c;当然这种启动时暂时的&#xff0c;我们需要通过pm2让verdaccio服务常驻 ygiZ2zec61wsg…

网络编程——深入理解TCP/IP协议——OSI模型和TCP/IP模型:构建网络通信的基石

TCP/IP协议— 一、简介 TCP/IP协议&#xff0c;即传输控制协议/互联网协议&#xff0c;是一组用于在计算机网络中实现通信的协议。它由两个主要的协议组成&#xff1a;TCP&#xff08;传输控制协议&#xff09;和IP&#xff08;互联网协议&#xff09;。TCP负责确保数据的可靠…

【Linux取经路】冯诺依曼结构体系与操作系统的碰撞

文章目录 一、冯诺依曼体系结构1.1 硬件介绍1.2 内存的重要性 二、操作系统2.1 设计操作系统的目的2.2 操作系统是如何进行管理的&#xff1f; 一、冯诺依曼体系结构 我们现在常见的计算机&#xff0c;如笔记本&#xff0c;以及我们不常见的计算机&#xff0c;如服务器&#x…

Pycharm连接服务器

前提&#xff1a;必须为pycharm专业版才能连接到服务器 以下为pycharm2023专业版 一、连接 系统环境 虚拟环境&#xff08;前提&#xff1a;已安装anaconda&#xff09; (1) anaconda环境 (2) 自己创建的虚拟环境 这里为envs下的spotr 二、查看连接情况 选择自动上传

Docker 发布一个springboot项目

文章目录 1、新建SpringBootDemo项目并打包2、使用Dockerfile打包&#xff08;基础用法&#xff09;进一步maven源码打包法 3、更进一步&#xff08;maven插件打包&#xff09;docker-maven-pluginspring-boot-maven-plugin前提条件本地环境配置项目环境配置maven插件打包运行校…

一文让你了解网络安全和云安全的区别与联系

相信大家对于网络安全和云安全的关系不是很了解&#xff0c;今天小编就和大家来一起聊聊网络安全和云安全的区别与联系&#xff0c;仅供参考哦&#xff01; 网络安全和云安全的区别 1、两者定义不同。网络安全通常指计算机网络的安全&#xff0c;实际上也可以指计算机通信网络…

同源策略简单解释

浏览器同源策略 什么时同源策略 协议、域名(IP)、端口相同即为同源。浏览器的同源策略是一种约定&#xff0c;是浏览器最核心也是最基本的安全功能&#xff0c;如果浏览器少了同源策略&#xff0c;则浏览器的正常功能可能都会受到影响。 http://192.168.200.131/user/1 https…

全景图!最近20年,自然语言处理领域的发展

夕小瑶科技说 原创 作者 | 小戏、Python 最近这几年&#xff0c;大家一起共同经历了 NLP&#xff08;写一下全称&#xff0c;Natural Language Processing&#xff09; 这一领域井喷式的发展&#xff0c;从 Word2Vec 到大量使用 RNN、LSTM&#xff0c;从 seq2seq 再到 Attenti…

【产品经理】高阶产品如何提出有效解决方案?(1方法论+2案例+1清单)

每一件事情总有它的解决方案&#xff0c;在工作中亦是如此&#xff0c;而有效的解决方案&#xff0c;一定是具有系统性的。 有效的解决方案&#xff0c;一定是系统性的解决方案。 什么是系统性解决方案&#xff1f; 从系统结构&#xff08;或连接关系&#xff09;入手&#x…

生成2×2 或3*3 混淆矩阵(confusion matrix)的python代码

该代码可以生成22的混淆矩阵。每个矩阵对应的数值可以自行改变。 代码如下&#xff1a; import numpy as np import matplotlib.pyplot as plt# 随机生成值 import numpy as np import matplotlib.pyplot as plt# 创建一个2x2的二分类数据矩阵。这里可以手动改变值 data np…

拨开迷雾:利用全链路消息跟踪揭示系统奥秘

在分布式系统&#xff0c;一次外部请求往往需要内部多个模块&#xff0c;多个中间件&#xff0c;多台机器的相互调用才能完成。在这一系列的调用中&#xff0c;可能有些是串行的&#xff0c;而有些是并行的&#xff0c;排查定位非常困难。 全链路消息分析及全链路消息跟踪可以帮…

C# 简单模拟 程序内部 消息订阅发布功能

文章目录 前言模拟消息订阅发布使用注意事项 前言 我想做个简单的消息发布订阅功能&#xff0c;但是发现好像没有现成的工具类。要么就是Mqtt这种消息订阅发布。但是我只想程序内部进行消息订阅发布&#xff0c;进行程序的解耦。那没办法了&#xff0c;只能自己上了 模拟消息…

yolo-v5学习(使用yolo-v5进行安全帽检测错误记录)

常见错误 跑YOLOv5遇到的问题_runtimeerror: a view of a leaf variable that requi_Pysonmi的博客-CSDN博客 python train.py --img 640 --batch 16 --epochs 10 --data ./data/custom_data.yaml --cfg ./models/custom_yolov5.yaml --weights ./weights/yolov5s.pt 1、梯度…

实例032 动画显示窗体

实例说明 当用户启动程序后&#xff0c;普通的程序窗口都是瞬间显示到屏幕上&#xff0c;这样未免有些生硬。如果窗口能够慢慢的展现在用户面前&#xff0c;将会是什么样的效果&#xff1f;本例设计的是一个动画显示的窗体&#xff0c;该程序运行后&#xff0c;窗体是慢慢的以…