vue2 part3

news2024/9/21 22:39:58

vscode安装vue3 snippets

天气案例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>姓名案例_插值语法实现</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <!--  如果是今天天气很一般，按下按钮页面上没有体现，数据已经改变，但是开发者工具不更新 -->
        <button>切换天气</button>
        <button @click="changeWeather">切换天气</button><!-- 也可以，把methods删除即可 -->
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false//阻止vue在启动时生成生产提示。
    new Vue({
        el: '#root',
        data: {
            isHot: true
        },
        computed: {
            info() {
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods: {
            changeWeather() {
                this.isHot = !this.isHot
            }
        }
    })
</script>
</html>

监视属性

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>姓名案例_插值语法实现</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <!--  如果是今天天气很一般，按下按钮页面上没有体现，数据已经改变，但是开发者工具不更新 -->
        <button @click="changeWeather">切换天气</button><!-- 也可以，把methods删除即可 -->
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false//阻止vue在启动时生成生产提示。
    new Vue({
        el: '#root',
        data: {
            isHot: true
        },
        computed: {
            info() {
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods: {
            changeWeather() {
                this.isHot = !this.isHot
            }
        },
        /*  watch: {
             ishot: {
                 handler(newVal, oldVal) {
                     console.log('newVal:', newVal, 'oldVal:', oldVal)
                 }
             }
         }, */
        vm.$watch('isHot', {
            immediate: true,
            handler(newVal, oldVal) {
                console.log('newVal:', newVal, 'oldVal:', oldVal)
            }
        })
    })
</script>
</html>

深度监视

023_尚硅谷Vue技术_深度监视_哔哩哔哩_bilibili

监视简写

当watch配置项只有handler时，可以开启简写形式：即不需要计算只需要响应hander

越简写，越乱，hhhh，总之大家记住一句话，vue管理的函数都别写箭头函数。以免this指向错误

watch和compute对比

这样来理解，对于软件底层来讲，方法、监控都是一样，但我们用架构思维给了做了不同的区分

计算属性能做的事，watch也能做但是watch能做的事，计算属性不一定能够做。

this没变，因为fullName里面的this指向的Vue，而定时器的this就是fullName中的this，陷入了一个误区，包一个定时器，fullName等一会就有返回值

025_尚硅谷Vue技术_watch对比computed_哔哩哔哩_bilibili

class和style绑定

class

026_尚硅谷Vue技术_绑定class样式_哔哩哔哩_bilibili

style

027_尚硅谷Vue技术_绑定style样式_哔哩哔哩_bilibili

条件渲染

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>条件渲染</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <h1>当前的n值是:{{n}}</h1>
        <button @click="n++">点击n+1</button>
        <h2 v-show="false ">欢迎来到{{name}}</h2>
        <!-- v-show条件渲染，false条件为假时，h2标签将不会显示 -->
        <h2 v-if="true ">欢迎来到{{name}}</h2>
        <!-- v-if条件渲染，true条件为真时，h2标签将会显示 -->
        <!-- 这个要记一下的 ，两个隐藏的区别，面试偶尔会问到，v-show和v-if的区别，v-show是控制元素的显示隐藏，v-if是控制元素的渲染，当条件为真时才渲染，false时不渲染。 -->
        <div v-if="n===1">Angular</div>

        <div v-else-if="n===2">React</div>

        <div v-else-if="n===3">Vue</div>

        <div v-else>其它</div>
        <!-- 中间不允许打断 -->
        <template v-if="n===1">
            <h2>hello</h2>
            <h2>world</h2>
            <h2>vue</h2>
        </template><!-- template不影响结构,展示的时候结构没有破,只能v-if控制展示，v-show是错误的 -->
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false//阻止vue在启动时生成生产提示。

    new Vue({
        el: '#root',
        data: {
            name: '尚硅谷'
        }
    })
</script>

</html>

列表渲染

Js中一旦有顺序那么将会是使用数组保存数据   然后每一个对象可以保存一个完整详细的数据

:key="item.id" -> 主要是为了 diff 算法，尽量减少重新渲染的次数

记得key一定要写 有id用id 没id有索引！！！！

vue官网不推荐index，因为index不是数据的唯一标识，id才是

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>基本列表</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <h2>人员列表</h2>
        <ul>
            <li v-for="p in persons" :key="p.id"><!-- key重要性，必须打标识 ，p of persons也可以-->
                {{ p.name }} - {{p.age}}
            </li>
        </ul>
        <h2>测试遍历字符串</h2>
        <ul>
            <li v-for="(char,index)of str" :key="index">
                {{ index }} - {{ char }}
            </li>
        </ul>
        <ul>
            <li v-for="(a,b) of 5">
                {{ a }} - {{ b }}
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false//阻止vue在启动时生成生产提示。

    new Vue({
        el: '#root',
        data: {
            persons: [
                { id: 1, name: '张三', age: 25 },
                { id: 2, name: '李四', age: 23 },
                { id: 3, name: '王五', age: 28 }
            ],
            car:{
                name:'宝马',
                price:100000,
                color:'红色'
            },
            str:"hello world"
        }
    })
</script>

</html>

key的作用

key就是一个标识，像身份证号码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>基本列表</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <h2>人员列表</h2>
        <button @click.once="addPerson">新增人员</button>
        <ul>
            <li v-for="(p, index) of persons" :key="index"> <!-- 由于页面重新渲染导致索引值重置 -->
                {{ p.name }} - {{p.age}}
                <input type="text">
            </li>
        </ul>

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

    new Vue({
        el: '#root',
        data: {
            persons: [
                //我们把数据传给服务器，服务器把数据放在数据库里，数据库会生成id
                { id: 1, name: '张三', age: 25 },
                { id: 2, name: '李四', age: 23 },
                { id: 3, name: '王五', age: 28 }
            ]
        },
        methods: {
            addPerson() {
                const p = { id: '004', name: '李四', age: 26 }
                thispersons.unshift(p)//key的值可以是任意类型，但必须唯一
            }
        },
    })
</script>

</html>

修改为 <li v-for="(p, index) of persons" :key="p-id"> 因为id和后面的数据都是一一绑定死的，即使操作也不会出问题。但是index是活的，谁在第一位，谁的index就是0。本来张三的index是0，但是添加了老刘，所以现在老刘的index才是0

咱俩还一样，我就不再变啦：对比虚拟DOM，结果决定还是用之前的input

id存在于数据内部, 是唯一不变的, 而index随着数据的增加可能会导致改变

/ 1

                     自动缩放                     实际大小                     适合页面                     适合页宽                                          50%                     75%                     100%                     125%                     150%                     200%                     300%                     400%                   

面试题：react、vue中的key有什么作用？(key的内部原理)
1 .虚拟DOM中key的作用：
   key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，
随后Vue进行【新虚拟DOM】与【I日虚拟DOM】的差异比较，比较规则如下：
2 比较规则
(1) . 虚拟DOM中找到了与新虚拟DOM相同的key：
         ①•若虚拟DOM中内容没变，直接使川之前的真实DOM!
         ②.若虚拟DOM中内容变了，则生成新的真实DOM,随后替换掉页面中之前的真实DOM。
(2) .旧虚拟DOM中未找到与新虚拟DOM相同的key
        创建新的真实DOM，随后渲染到到页面。
3 •用index作为key可能会引发的问觊
        1 .若对数据进行：逆序添加、逆序删除等破坏联序操作：
        会产生没有必要的真实DOM更新==> 界面效果没问题，但效率低。
        2 .如果结构中还包含输入类的DOM:
        会产生错误DOM更断==> 界面有问凰
4.开发中如何选择key?:
        1 .最好使用每条数据的唯 标识作为key,比如id、手机号、身份证号、学号等唯•值.
        2 .如果不存在对数据的逆方添加、逆方删除等破坏敢序操作，仅用于渲染列表用于展示，
        使用index作为key是没有闷翘的.

列表过滤

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>基本列表</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入姓名" v-model="searchName">
        <ul>
            <li v-for="(p, index) of filPerson" :key="index">
                {{ p.name }} - {{p.age}}
            </li>
        </ul>

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

    new Vue({
        el: '#root',
        data: {
            keyWord: '',
            persons: [
                { id: '001', name: '马冬梅', age: 18, sex: '女' },
                { id: '002', name: '周冬雨', age: 19, sex: '女' },
                { id: '003', name: '周杰伦', age: 20, sex: '男' },
                { id: '004', name: '温兆伦', age: 21, sex: '女' }
            ],
            filPerson: [],//
        },
        watch: {//computed能实现的，watch都能实现
            keyWord(val) {
                this.persons = this.persons.filter((p) => {
                    return p.name.indexOf(val) !== -1//indexOf方法用来查找字符串中是否存在子串，返回-1表示不存在，返回其他值表示存在。,
                })
                
            }
        }
    })
</script>

</html>

由于persons包含空字符串，所以搜索完毕后会出现所有的。即什么都没有-》正确结果-》所有结果，修改一下

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>基本列表</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入姓名" v-model="searchName">
        <ul>
            <li v-for="(p, index) of filPerson" :key="index">
                {{ p.name }} - {{p.age}}
            </li>
        </ul>

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

    new Vue({
        el: '#root',
        data: {
            keyWord: '',
            persons: [
                { id: '001', name: '马冬梅', age: 18, sex: '女' },
                { id: '002', name: '周冬雨', age: 19, sex: '女' },
                { id: '003', name: '周杰伦', age: 20, sex: '男' },
                { id: '004', name: '温兆伦', age: 21, sex: '女' }
            ],
            filPerson: [],//
        },
        watch: {//computed能实现的，watch都能实现
            keyword: {
                immediate: true,
                Handle(val) {
                    this.persons = this.persons.filter((p) => {
                        return p.name.indexOf(val) !== -1//indexOf方法用来查找字符串中是否存在子串，返回-1表示不存在，返回其他值表示存在。,
                    })

                }
            }
        }
    })
</script>

</html>

computed看可以

列表排序

实际开发以后端排序为主，因为前端一次不可能请求所有数据，而用户想看到的排序一般都是所有数据的排序，所以通常由后端排序，数据库几十上百的数据，前端一次也就请求20条左右

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>基本列表</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入姓名" v-model="keyWord">
        <button @click="sortType=2">按年龄升序</button>
        <button @click="sortType=1">按姓名降序</button>
        <button @click="sortType=0">默认排序</button>
        <ul>
            <li v-for="(p, index) of filPerson" :key="index">
                {{ p.name }} - {{p.age}} - {{p.sex}}
            </li>
        </ul>

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

    new Vue({
        el: '#root',
        data: {
            keyWord: '',
            sortType: 0,//0表示默认排序，1表示按姓名降序，2表示按年龄升序
            persons: [
                { id: '001', name: '马冬梅', age: 18, sex: '女' },
                { id: '002', name: '周冬雨', age: 19, sex: '女' },
                { id: '003', name: '周杰伦', age: 20, sex: '男' },
                { id: '004', name: '温兆伦', age: 21, sex: '女' }
            ]

        },
        computed: {
            filPerons() {
                const arr = this.persons.filter((p) => {
                    return p.name.indexOf(this.keyWord) !== -1
                })
                // 判断一下是否需要排序I
                if (this.sortType) {
                    arr.sort((p1, p2) => {
                        return this.sortType == 1 ？ p2.age - p1.age ： p1.age - p2.age
                    })
                }
                return arr
            }
        }
    })
</script>

</html>

vue监测的原理

033_尚硅谷Vue技术_更新时的一个问题_哔哩哔哩_bilibili这是一定导入

data里的数据在_data里，_data的数据要get name和set name来获取和修改，模板解析，生成新的虚拟DOM，新旧虚拟DOM对比，更新页面

无限递归

034_尚硅谷Vue技术_Vue监测数据的原理_对象_哔哩哔哩_bilibili这是模仿js写了vue 

给出了就是把obj的所有属性，通过forEach()转移到obs对象当中，然后二者通过get()和set()方法发生关联。

vue对set的监测

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

<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="root">
        <h2>学校名称:{{name}}</h2>
        <h2>学校地址:{{address}}</h2>
        <hr/>
        <h2>学生名字：{{student.name}}</h2>
        <h2>学生性别：{{student.gender}}</h2><!-- vm里面没有也不报错，undefined在vue不显示-->
        <!-- <h2>学生性别：{{gender}}</h2>报错，因为不存在gender-->
        <h2>学生年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}</h2>
        <h2>朋友</h2>
        <ul>
            <li v-for="f in student.friend" :key=" index">
                {{f.name}}--{{f.age}}
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;//阻止 vue 在启动时生成生产提示

    const vm = new Vue({
        el: '#root',
        data: {
            name: '尚硅谷',
            address: '北京市',
            student: {
                name: '张三',
                age: {
                    rAge: 20,
                    sAge: 18,
                },
                friend: [
                    { name: '李四', age: 21 },
                    { name: '王五', age: 22 },

                ]
            }
        }
    })
</script>

</html>

               简而言之，必须要在data对象里的属性才能被监听对象数据劫持，然后才能设置set方法来渲染界面

 可以使用Vue.set（target，key，val）来实现添加，如上面的代码             Vue.set(vm._data.student,'sex','男')

数据代理，通过数据代理，将属性移到vm实例对象中，就可vm.$set(vm.student,'sex','女')

vue.set有缺陷： 只能给vm的data里面的对象添加属性

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

<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="root">
        <h2>学校名称:{{name}}</h2>
        <h2>学校地址:{{address}}</h2>
        <h2>校长是：{{leader}}</h2>
        <hr/>
        <h2>学生名字：{{student.name}}</h2>
        <button @click="addsex">添加一个性别属性 </button>
        <h2>学生性别：{{student.gender}}</h2><!-- vm里面没有也不报错，undefined在vue不显示-->
        <!-- <h2>学生性别：{{gender}}</h2>报错，因为不存在gender-->
        <h2>学生年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}</h2>
        <h2>朋友</h2>
        <ul>
            <li v-for="(f, index) in student.friend" :key=" index">
                {{f.name}}--{{f.age}}
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;//阻止 vue 在启动时生成生产提示

    const vm = new Vue({
        el: '#root',
        data: {
            name: '尚硅谷',
            address: '北京市',
            student: {
                name: '张三',
                age: {
                    rAge: 20,
                    sAge: 18,
                },
                friend: [
                    { name: '李四', age: 21 },
                    { name: '王五', age: 22 },

                ]
            },
            methods:{
                addsex(){
                    this.$set(this.student,'gender','男')
                }
            }
        }
    })
</script>

</html>

vue对数组的监测

Vue.set(vm._data.student.hobby,1,'篮球')可以对数组改变，页面也更新，类似cpp的方法，一下搜到了 

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

<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="root">
        <h2>学校名称:{{name}}</h2>
        <h2>学校地址:{{address}}</h2>
        <h2>校长是：{{leader}}</h2>
        <hr />
        <h2>学生名字：{{student.name}}</h2>
        <button @click="addsex">添加一个性别属性 </button>
        <h2>学生性别：{{student.gender}}</h2><!-- vm里面没有也不报错，undefined在vue不显示-->
        <!-- <h2>学生性别：{{gender}}</h2>报错，因为不存在gender-->
        <h2>学生年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}</h2>
        <h2>朋友</h2>
        <ul>
            <li v-for="(f, index) in student.friend" :key=" index">
                {{f.name}}--{{f.age}}
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;//阻止 vue 在启动时生成生产提示

    const vm = new Vue({
        el: '#root',
        data: {
            school: {
                name: '尚硅谷',
                address: '北京市'
            },
            student: {
                name: '张三',
                age: {
                    rAge: 20,
                    sAge: 18,
                },
                hobby: {
                    h1: '唱',//在控制台是没有h1h2的getter和setter的，修改不会触发页面更新
                    h2: '跳',//就是vm.student.hobby.h1 = '篮球'不会触发页面更新，只在控制台更新
                    h3: 'rap'
                },

                friend: [
                    { name: '李四', age: 21 },
                    { name: '王五', age: 22 },

                ]
            },  
            methods: {//vue重写了数组的方法，暂时未完工
                addsex() {
                    this.$set(this.student, 'gender', '男')
                }
            }
        }
    })
</script>

</html>

 代码未完工！！！！！

总结

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

<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="root">
        <h1>学生信息</h1>
        <button @click="student.age++">年龄+1岁</button><br />
        <button @click="addSex">添加性别属性，默认值：男</button><br />
        <button @click="student.sex='未知'">修改性别</button><br />
        <button @click="addFriend">在列表首位添加一个朋友</button><br />
        <button @click="updataFirstFriendName">修改第一个朋友的名字为：张三</button><br />
        <button @click="addHobby">添加一个爱好</button><br />
        <button @click="drive">修改第一个爱好为：开车</button><br />
        <h3>姓名：{{student.name}}</h3>
        <h3>年龄：{{student.age}}</h3>
        <h3 v-if="student.sex">性别：{{student.sex}}</h3>
        <h3>爱好：</h3>
        <ul>
            <li v-for="(h,index) in student.hobby" :key="index">
                {{h}}
            </li>
        </ul>
        <h3>朋友们：</h3>
        <ul>
            <li v-for="(f,index) in student.friends" :key="index">
                {{f.name}}--{{f.age}}
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;//阻止 vue 在启动时生成生产提示

    const vm = new Vue({
        el: '#root',
        data: {
            student: {
                name: 'tom',
                age: 18,
                hobby: ['抽烟', '喝酒', '烫头'],
                friends: [
                    { name: 'jerry', age: 35 },
                    { name: 'tony', age: 36 }
                ]
            }
        },
        methods: {
            addSex() {
                // Vue.set(this.student,'sex','男')
                this.$set(this.student, 'sex', '男')
            },
            addFriend() {
                this.student.friends.unshift({ name: 'jack', age: 70 })
            },
            updataFirstFriendName() {
                //this.student.friends[0]=123       error
                //不管对象在哪儿，数组里也行，改对象属性就能被检测到，但是数组没有属性，检测不到得用方法修改，所以不是下标问题，是看通过下标拿到了什么类型的数据
                this.student.friends[0].name = '张三'
            },
            addHobby() {
                this.student.hobby.push('看电影')
            },
            drive() {
                //this.student.hobby[0] = '开车'    error
                this.student.hobbysplice(0, 1, '开车')
                Vue.set(this.student.hobby, 0, '开车')//2种方法都可以
            }
        }
    })
</script>

</html>

Vue监视数据的原理：
1.vue会监视data中所有层次的数据。

2.如何监测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要监测的数据。
(1).对象中后追加的属性，Vue默认不做响应式处理
(2).如需给后添加的属性做响应式，请使用如下API:
Vue.set(target,propertyName/index,value)或 
vm.$set(target,propertyName/index,value)

3。如何监测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：
(1).调用原生对应的方法对数组进行更新。
(2).重新解析模板，进而更新页面。

4.在Vue修改数组中的某个元素一定要用如下方法：
1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
2.Vue.set()或 vm.$set()
特别注意：Vue.set()和vm.$set()不能给vm 或vm的根数据对象 添加属性！！！

filter可以增删改查，但是过滤怎么办？（放心filter在vue3里作废了，说明不是主流了）

上面的按钮
<button @click="removeSmoke">过滤掉所有吸烟的爱好</button>



vm加
<script>
removeSmoke() {
                this.student.hobby.filter((h)=>{
                    return h!='抽烟'//所有不是由Vue所控制的回调，尽可能的写成箭头函数，原因是箭头函数没有this会向上找，找到vm
                })  
            }
</script>

数据劫持就是数据已经交给vue来管了，操纵数据必须通过vue提供的方法来实现，数据劫持常用有三种：proxy，defineProperty，getter与setter：数据劫持描述的是过程，数据代理针对的是某个数据

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

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

相关文章

【Linux】分析一段oom及oops报错日志

【Linux】分析一段oom及oops报错日志

oom相关日志分析: Oom-killer错误是因系统内存分配不足&#xff0c;为保障系统正常运行会随机kill掉占用较多的内存进程。 该日志已经输出内存占满相关提示&#xff0c;内存上限为16G&#xff0c;当前已使用16G&#xff0c;内存限制导致分配失败次数为586755次。 OOPS相关日志…
阅读更多...
24年最新最详细Python安装教程，附安装包！感觉收藏！

24年最新最详细Python安装教程，附安装包！感觉收藏！

Python由荷兰国家数学与计算机科学研究中心的吉多范罗苏姆于1990年代初设计&#xff0c;作为一门叫做ABC语言的替代品。 Python提供了高效的高级数据结构&#xff0c;还能简单有效地面向对象编程。Python语法和动态类型&#xff0c;以及解释型语言的本质&#xff0c;使它成为多…
阅读更多...
centos7解决病毒入侵 getty

centos7解决病毒入侵 getty

首先使用top命令查看 找到文件地址 查看是否有自启动服务 关闭、停止、删除 tmp 病毒文件删除 清除标记 [roothost-192-168-0-66 bin]# chattr -ia /tmp/newsvc.sh [roothost-192-168-0-66 bin]# chattr -ia /tmp/redis2 [roothost-192-168-0-66 bin]# chattr -ia /tmp/svc* [r…
阅读更多...
《黑神话：悟空》WeGame标准版和豪华版有啥区别？

《黑神话：悟空》WeGame标准版和豪华版有啥区别？

黑神话悟空标准版和豪华版有什么区别&#xff1f;码笔记&#xff1a;标准版价格268元只是完整游戏&#xff0c;豪华版价格328在标准版的基础上另外提供兵器铜云棒、披挂百戏傩面、百戏护手、百戏衬钱衣、百戏吊腿、珍玩&#xff1a;风铎和游戏音乐精选集&#xff0c;详细如下&a…
阅读更多...
使用DropZone+SpringBoot实现图片的上传和浏览

使用DropZone+SpringBoot实现图片的上传和浏览

经常在项目中需要使用上传文件功能&#xff0c;找了不少前端上传组件&#xff0c;都不是很好用&#xff0c;今天尝试了一下DropZone&#xff0c;发现不错&#xff0c;顺便记录一下使用过程&#xff0c;方便后续查阅。在做开发的时候&#xff0c;经常需要调研一些技术&#xff0…
阅读更多...
web渗透：SQL注入漏洞的基础知识

web渗透：SQL注入漏洞的基础知识

目录 SQL注入漏洞的定义和原理 SQL注入的类型和攻击方法 SQL注入的防御措施 示例代码 深入研究 SQL注入漏洞的常见攻击场景有哪些&#xff1f; 如何有效防范SQL注入攻击&#xff1f; SQL注入与跨站脚本攻击&#xff08;XSS&#xff09;之间有什么区别&#xff1f; 主要…
阅读更多...
Together规则引擎

Together规则引擎

Together规则引擎是一个基于Web的应用程序&#xff0c;用于构建可解释和可跟踪的业务规则。使用简单的图形用户界面&#xff0c;业务和IT用户可以协作指定需求和规则逻辑。这些完全指定的规则可以直接自动化。Together规则引擎基于规则模型和符号(DMN)开放标准&#xff0c;确保…
阅读更多...
【Algorithm】三步问题

【Algorithm】三步问题

欢迎来到 破晓的历程的 博客 ⛺️不负时光&#xff0c;不负己✈️ 文章目录 1.三步问题1.题目连接2.算法原理讲解&&代码实现 2.最小花费爬楼梯1.题目连接2.算法原理讲解&&代码实现 3.解码方法1.题目连接2.算法原理讲解&&代码实现 1.三步问题 1.题目连…
阅读更多...
储能bms-下电延时方案分享

储能bms-下电延时方案分享

下电延时功能在很多bms方案中是很常见的&#xff0c;主要是用来存储SOC,故障码&#xff0c;以及电池的一些重要信息&#xff0c;下图展示的是一种实现方案&#xff0c;VCC5V_A_ENIN在硬件上直接连接到三极管的后端&#xff0c;在ACC信号给过来之后&#xff0c;跳过三极管&#…
阅读更多...
我在高职教STM32——ADC电压采集与光敏电阻（2）

我在高职教STM32——ADC电压采集与光敏电阻（2）

大家好，我是老耿，高职青椒一枚，一直从事单片机、嵌入式、物联网等课程的教学。对于高职的学生层次，同行应该都懂的，老师在课堂上教学几乎是没什么成就感的。正是如此，才有了借助头条平台寻求认同感和成就感的想法。在这里，我准备陆续把自己花了很多心思设计的教学课件分…
阅读更多...
中小型工厂企业数字化ERP管理系统（源码+功能方案）

中小型工厂企业数字化ERP管理系统（源码+功能方案）

工厂进销存管理系统是一个集采购管理、仓库管理、生产管理和销售管理于一体的综合解决方案。该系统旨在帮助企业优化流程、提高效率、降低成本&#xff0c;并实时掌握各环节的运营状况。 在采购管理方面&#xff0c;系统能够处理采购订单、供应商管理和采购入库等流程&#xff…
阅读更多...
里程牌！EGFR抑制剂+双抗联合方案获批，显著延长肺癌患者生存期

里程牌！EGFR抑制剂+双抗联合方案获批，显著延长肺癌患者生存期

前言&#xff1a; EGFR是抗肿瘤领域最经典的靶点&#xff0c;以其为靶点的小分子抑制剂、单抗、双抗和ADC研究层出不穷&#xff0c;但耐药性接踵而来。本文就EGFR结构、耐药机制和药物研发情况进行综述&#xff0c;以期设计出更优秀的药物&#xff0c;使更多患者获益。 EGFR的…
阅读更多...
大数据-96 Spark 集群 SparkSQL Scala编写SQL操作SparkSQL的数据源：JSON、CSV、JDBC、Hive

大数据-96 Spark 集群 SparkSQL Scala编写SQL操作SparkSQL的数据源：JSON、CSV、JDBC、Hive

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…
阅读更多...
活动｜华院计算主办数智人系列沙龙，探讨人工智能如何赋能内容营销

活动｜华院计算主办数智人系列沙龙，探讨人工智能如何赋能内容营销

在科技日新月异的今天&#xff0c;人工智能正以前所未有的速度重塑着我们的世界&#xff0c;它不仅深刻改变了传统行业的运作模式&#xff0c;更在电商零售、客户服务、保险金融等多个领域开辟了全新的生态与可能。其中&#xff0c;数智人作为大语言模型、音视频生成等人工智能…
阅读更多...
【开端】开发团队如何应对突发的技术故障和危机

【开端】开发团队如何应对突发的技术故障和危机

开发团队如何应对突发的技术故障和危机&#xff1f; 在数字化时代&#xff0c;软件服务的稳定性至关重要。然而&#xff0c;即便是像网易云音乐这样的大型平台&#xff0c;也难免遇到突发的技术故障。8月19日下午&#xff0c;网易云音乐疑似出现服务器故障&#xff0c;网页端出…
阅读更多...
选择护眼台灯的标准是什么？2024值得入手的护眼台灯推荐

选择护眼台灯的标准是什么？2024值得入手的护眼台灯推荐

2022年3月1日起&#xff0c;正式实施的《儿童青少年学习用品近视防控卫生要求》&#xff08;GB 40070-2021&#xff09;规定了与近视防控相关的读写作业台灯卫生要求。要求从照度、均匀度、显色指数、色温、防蓝光等方面去完善护眼台灯&#xff0c;可见国家多这方面多么的重视&…
阅读更多...
黑神话悟空爆火，有人靠它赚翻了！

黑神话悟空爆火，有人靠它赚翻了！

黑神话悟空&#xff0c;这个游戏最近爆火&#xff0c;相信很多人都知道。 这样的热点事件&#xff0c;对于大多数人来说&#xff0c;那就是图个热闹&#xff0c;吃个瓜&#xff1b; 但对于那些混在互联网副业圈里的&#xff0c;那闻到的都是钱味。 热点事件&#xff0c;意味…
阅读更多...
2025长江流域跨境电商展：Temu在丹麦的惊人崛起，跨境电商的新风向标

2025长江流域跨境电商展：Temu在丹麦的惊人崛起，跨境电商的新风向标

Temu在丹麦的惊人崛起&#xff1a;跨境电商的新风向标 在全球化电商竞争日益激烈的今天&#xff0c;一个新兴的电商平台能够在短短时间内超越行业巨头亚马逊&#xff0c;成为丹麦消费者的首选&#xff0c;无疑是一个值得关注的现象。拼多多海外分支Temu正是这样一个平台&#…
阅读更多...
支付宝开放平台-开发者社区——AI 日报「8 月 26 日」

支付宝开放平台-开发者社区——AI 日报「8 月 26 日」

1 国产机器人黑马首次登场&#xff0c;打螺丝堪比擎天柱&#xff01;国家队全栈自主研发 新智元丨阅读原文 浙江人形机器人创新中心研发的领航者2号 NAVIA1&#xff0c; 在2024 世界机器人大会上首次亮相&#xff0c;展示了其类人外观和高智能作业能力。这款1.65 米高、60公斤…
阅读更多...
蓝牙耳机什么价位的性价比高？2024百元性价比品牌机型推荐

蓝牙耳机什么价位的性价比高？2024百元性价比品牌机型推荐

随着科技的不断进步&#xff0c;蓝牙耳机已成为现代人日常生活中不可或缺的配件之一&#xff0c;市场上的蓝牙耳机品牌和型号繁多&#xff0c;价格也从几十元到几千元不等&#xff0c;使得消费者在选择时往往感到眼花缭乱&#xff0c;那么蓝牙耳机什么价位的性价比高&#xff1…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023