vue笔记（二）

news2024/9/23 21:31:09

7、事件处理

7.1、事件的基本处理

  • 事件的使用
    • 使用v-on：xxx或者用@xxx绑定事件，其中XXX是事件名
    • 事件的回调需要配置在methods对象中，最终出现在VM上
    • methods配置的函数，不需要箭头函数
    <div id="root">
        <h1>{{hi}}</h1>
        <!-- 绑定事件 v-on:click 当被点击的时候 -->
        <button v-on:click="click">点我</button>
        <!-- 两种写法都可以，下面是上面的缩写 -->
        <button @click="click">点我</button>
    </div>
    <script>
        new Vue({
            el:'#root',
            data:{
                hi:'hi'
            },
            
            
            
            
            
            //方法体
            methods:{
                click(){
                    alert("hellword")
                }
            }
        })
    </script>

7.2、事件修饰符

在js中提供的事件修饰符，vue也给我们提供了

常见的有 .prevent、.stop、.once

  • .prevent 阻止默认事件
  • .stop 阻止事件冒泡
  • .once 事件只触发一次
  • .capture 使用事件的捕获模式
  • .self 只有event.target是当前元素时才触发
  • .passive 事件的默认行为立即执行，无需等回调
  • 修饰符key连续写 如 @click.prevent.stop
    <div id="root">
        <!-- 阻止默认事件 -->
        <a href="http://www.baidu.com" @click.prevent="show">跳转</a>
        <!-- 阻止冒泡 -->
        <div @click="show">
            <button @click.stop="show">阻止冒泡</button>
        </div>
         <!-- 只触发一次事件 -->
        <button @click.once="show">Once</button>
    </div>
    <script>
        new Vue({
            el:'#root',
            methods:{
                show(e){
                    alert('hello')
                }
            }
        })
    </script>

7.3、键盘事件

  • vue中的键盘事件 @keydown.xxx 或者@keyup.xxx
  • vue中提供的常用的键盘别名：
    • enter（回车键）
    • delete（删除键指删除和退格俩个键）
    • esc（退出键）
    • space（空格）
    • tab（换行 必须配合keydown去使用）
    • up （上）
    • down（下）
    • left（左）
    • right（右）
  • 未提供的别名按键，也可以通过原始的key值去绑定，但要注意像CapsLock（转换大小写键）要写成 caps-lock（全小写加短横线）
  • 系统特殊的键位 ctrl、alt、shift、win键等
    • 如果配合keyup使用 必须按下修饰键的同时加上一个键位 如 同时按下ctrl+A键位才会触发
    • 也可以 @keyup.crtl.y 这样 只有按下ctrl+y 键位才会触发
    • 配合keydown键可正常使用
  • 自定义按键：Vue.config.keyCodes.自定义的键位 = 键码
C:\Users\Administrator\Desktop\vueB\vue2\08_计算属性\1、插值语法实现.htmlx     <div id="root">           <!-- 通过enter键触发事件拿值 -->        <input type="text" placeholder="提示" @keyup.enter = 'show'>    </div>    <script>        new Vue({            el:'#root',            methods:{                show(e){                    //拿当前触发元素的值                    console.log(e.target.value);                }            }        })    </script>

8、计算属性

效果：

动画

8.1、使用插值语法实现

    <div id="root">
        姓：<input type="text" v-model="lastName"><br>
        名：<input type="text" v-model="firstName"><br>
         <!-- 通过拼接的方式 -->
        全名:<span>{{lastName}}{{firstName}}</span>
    </div>
    <script>
        new Vue({
            el:'#root',
            data:{
                lastName:'z',
                firstName:'y',
            }
        })
    </script>

只能进行简单的计算，不能太复杂

8.2、methods方法实现

    <div id="root">
        姓：<input type="text" v-model="lastName"><br>
        名：<input type="text" v-model="firstName"><br>
        <!-- 通过methods方法的方式 -->
        <!-- 这里必须加（） 否则会不会有值，只会打印整个方法 -->
        全名:<span>{{fullName()}}</span><br>
        全名:<span>{{fullName()}}</span><br>
        全名:<span>{{fullName()}}</span><br>
        全名:<span>{{fullName()}}</span>
    </div>
    <script>
        new Vue({
            el:'#root',
            data:{
                lastName:'z',
                firstName:'y',
            },
            methods:{
                fullName(){
                    console.log("调用了");
                    return this.lastName+this.firstName
                }
            }
        })
    </script>

动画12

8.3、computed计算属性实现

  • 计算属性
    • 定义：要用的属性都是通过已经有的属性计算得来。
    • 原理：底层借助了Object.defineProperty方法提供getter和setter
    • 优势：与methods实现相比，内部有缓存机制，效率更高
    • 注意事项
      • 如果计算属性要被修改，那必须用set去响应修改，并要引起被计算属性的值发生变化
    <div id="root">
        姓：<input type="text" v-model="lastName"><br>
        名：<input type="text" v-model="firstName"><br>
        全名:<span>{{fullName}}</span><br>
        全名:<span>{{fullName}}</span><br>
        全名:<span>{{fullName}}</span><br>
        全名:<span>{{fullName}}</span><br>
    </div>
    <script>
        new Vue({
            el:'#root',
            data:{
                lastName:'z',
                firstName:'y',
            },
            computed:{
                fullName:{
                    get(){
                        // 这里为了set方法方便使用空格连接
                        console.log("被调用");
                        return this.lastName+' '+this.firstName
                    },
                    set(){
                        const arr = value.split(' ')
                        this.lastName = arr[0]
                        this.firstName = arr[1]
                    }
                }
            }
        })
    </script>

动画123

9、监视属性

9.1、基础监视

  • 监视属性watch：
    • 用法：当监视的属性发生变化时，自动调用进行相关参数
    • 可以监听 计算属性
    • 注意事项
      • 监视属性必须存在，才能监视。不存在控制台不会提示
    • 两种写法
      • 通过new Vue时传入watch配置，用于已经知道需要监听的属性
      • 通过vm.$watch监视，用于开始并不知道需要监视时
    <div id="root">
        <h1>数字为{{info}}</h1>
        <button @click="change">改变数字</button>
    </div>
    <script>
       const vm = new Vue({
            el:'#root',
            data:{
                value:true
            },
            computed:{
                info(){
                    return this.value ? '1':'2'
                }
            },
            methods:{
                //取相反
                change(){
                   this.value = !this.value
                }
            },
            // 第一种写法
            // watch:{
            //     value:{
            //         //初始化时handler被调用一次
            //         immediate:true,
            //         //当监听到value值被改变时 handler被调用
            //         handler(newValue,oldValue){
            //             console.log("value被修改了"+newValue+" "+oldValue);
            //         }
            //     }
            // }
        })
        //第二种写法
        vm.$watch('value',{
            immediate:true,
            handler(newValue,oldValue){
             console.log("value被修改了"+newValue+" "+oldValue);
            }
        })
 </script>

9.2、深度监视

在vue中watch方法默认不会监视多层级的值

动画12345

  • vue中给我们提供了方法deep
    • vue自身可以监控到内部值的改变，但是vue提供的watch默认不可以
    • 需要根据数据具体结构来决定是否开启deep
    <div id="root">
        <h1>数字为{{value.a}}</h1>
        <button @click="value.a++">add</button>
    </div>
    <script>
       const vm = new Vue({
            el:'#root',
            data:{
                value:{
                    a:1,
                    b:2,
                }
            },
            watch:{
                value:{
                    //开启深度监测
                    deep:true,
                    immediate:true,
                    handler(){
                        console.log("value被修改了");
                    }
                }
            }
        })
    </script>

1

9.3、watch与computed区别

我们拿一个小案例来举例

computed版本

image-20220508151037892

watch版本

  • 从代码层面来看两者对比，conputed的代码更精简
  • 但如果涉及到异步操作时，只有watch能够实现
    • 如：让它延迟一秒后再显示修改的全名

2

  • 这里涉及到两个小原则
    • 只要是被Vue管理的函数，最好都写成普通函数，这样this指向的才是组件实例对象
    • 不被vue所管理的函数（定时器回调函数、ajax回调函数），最好写成箭头函数这样this才能指向组件实例对象

10、绑定样式

10.1、绑定class样式

  • 绑定class样式
    • 字符串写法
      • 用于样式类名不确定，需要动态指定
    • 数组写法
      • 用于要绑定的样式个数不确定、名字也不确定
    • 对象写法
      • 用于要绑定的样式个数确定、名字也确定，但要动态决定用不用
  • 字符串写法

image-20220508160137036

通过改变mood的值来实现切换

  • 数组的写法

方便以后管理样式，如果不需要有些样式，可通过数组形式删除

  • 对象写法

image-20220508161041172

动态的决定样式是否开启

10.2、内联style样式写法

  • 内联样式写法
    • ：style=“{fontSize：xxx}”其中xxx是动态值
    • 也可以写成对象形式

image-20220508162941361

134

以对象的形式存储，方便修改

11、条件渲染

  • 条件渲染

  • v-if（ 与JavaScript中的if作用相同）

    • 写法：v-if=”表达式“

    • v-else-if=”表达式“

    • v-else=”表达式“

    • 适用于：用于切换频率较低的场景

    • 特点：不展示的Dom元素直接被删除

    • 三个表达式可以连用，但是结构必须在一起，不能拆分

  • v-show

    • 写法：v-show=“表达式”
      • 适用于：切换频率较高的 场景
      • 特点：不展示的Dom元素只会被display隐藏

  • 注意事项

    • v-if被触发时，会导致元素直接被删除，获取不到元素

11.1、v-if的使用

    <div id="root">
        <!-- v-if条件渲染 -->
        <h2 v-if="n===1">1</h2> 
        <h2 v-else-if="n===2">2</h2> 
        <h2 v-else="n===3">3</h2> 
        <button @click="n++">v-if测试</button>
    </div>
    <script>
        new Vue({
            el:'#root',
            data:{
                n:0
            }
        })
    </script>

234

可以看到以前的Dom元素随着切换会被移除

11.2、v-show的使用

    <div id="root">
        <!-- v-if条件渲染 -->
        <h1 v-show="false">1</h1>
        <h2 v-show="1===1">2</h2> 
    </div>
    <script>
        new Vue({
            el:'#root'
        })
    </script>

image-20220508170751601

这里可以看到v-show等于false时元素没有被移除

12、列表渲染

12.1、v-for指令

  • v-for指令
    • 用于展示列表数据
    • 语法：v-for=“(p,index) of persons” :key=“index”
    • 可遍历：数组、对象、字符串、指定次数
  • :key的作用
    • 虚拟Dom中的key作用
      • 作为虚拟Dom中的对象标识，当数据发生变化，会生成一个新的虚拟Dom，随后新旧Dom进行一个比对
    • 新旧Dom比对规则
      • 若旧Dom找到与新Dom相同的Key
      • 虚拟Dom中内容没变，直接使用前面的真实Dom
      • 若发生变化则生成新的真实Dom，替换旧的
    <div id="root">
        <!-- 遍历数组 -->
        <h2>数组</h2>
        <ul>
            <!-- 这里必须直接列表的Key 否则vue会把整个Li当成一个 会报错 -->
          	
            <li v-for="(p,index) in persons" :key="index">
                {{p.name}}-{{p.age}}
            </li>
        </ul>
         <!-- 遍历数组 -->
        <h2>数组</h2>
        <ul>
            <li v-for="(p,index) in student" :key="index">
                {{p}}--{{index}}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el:'#root',
            data:{
            persons:[
                    {id:'01',name:'zy',age:'18'},
                    {id:'02',name:'zy2',age:'19'},
                    {id:'03',name:'zy3',age:'20'},
            ],
            student:{name:'zy',age:'18'}
        }
        })
    </script>

这里如果用index（索引）作为key，我们在最前面追加一个数据的时候，会导致vue 复用前面的input 会出现下面的结果

推荐使用 p.id作为key

image-20220508184356371

12.2、列表模糊查找过滤案例

先看效果

34

  1. watch监听实现
 <div id="root">
        <h2>模糊查找案例</h2>
        <!-- 建立一个输入框 取值用于模糊查找 -->
        <input type="text" placeholder="输入要查找的名字" v-model="likeName">
        <ul>
            <li v-for="(p,index) in newPersons" :key="p.id">
                {{p.name}}-{{p.age}}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                persons: [
                    { id: '01', name: '周冬雨', age: '18', sex: 'woman' },
                    { id: '02', name: '马冬梅', age: '19', sex: 'woman' },
                    { id: '03', name: '周杰伦', age: '21', sex: 'man' },
                    { id: '04', name: '马东伦', age: '20', sex: 'man' },
                ],
                likeName:'',
                //不对原数组进行操作
                newPersons: []
            },
            //监听事件
            watch: {
                likeName:{
                    //初始化调用一次 使indexOf比较为空刷新所有数据
                    immediate:true,
                    handler(val){
                        //过滤数据
                        this.newPersons = this.persons.filter((p)=>{
                            //通过indexOf判断搜索的值是否与列表匹配，如果不匹配等于-1
                            return p.name.indexOf(val) !== -1
                        })
                    }
                }
            }
     })
    </script>

2、computed计算实现

<div id="root">
        <h2>模糊查找案例</h2>
        <!-- 建立一个输入框 取值用于模糊查找 -->
        <input type="text" placeholder="输入要查找的名字" v-model="likeName">
        <ul>
            <li v-for="(p,index) in newPersons" :key="p.id">
                {{p.name}}-{{p.age}}
            </li>
        </ul>
</div>
<script>
        new Vue({
            el: '#root',
            data: {
                persons: [
                    { id: '01', name: '周冬雨', age: '18', sex: 'woman' },
                    { id: '02', name: '马冬梅', age: '19', sex: 'woman' },
                    { id: '03', name: '周杰伦', age: '21', sex: 'man' },
                    { id: '04', name: '马东伦', age: '20', sex: 'man' },
                ],
                likeName:'',
            },
            computed:{
                newPersons(){
                    return this.persons.filter((p)=>{
               //通过indexOf判断搜索的值是否与列表匹配，如果不匹配等于-1
                        return p.name.indexOf(this.likeName) !== -1
                    })
                }
            }
     })
</script>

12.3、排序列表案例

效果：

344

代码实现

    <div id="root">
        <h2>模糊查找案例+升降序</h2>
        <!-- 建立一个输入框 取值用于模糊查找 -->
        <input type="text" placeholder="输入要查找的名字" v-model="likeName">
        <button  @click="isup=1">升序</button>
        <button  @click="isup=2">降序</button>
        <button  @click="isup=0">原顺序</button>
        <ul>
            <li v-for="(p,index) in newPersons" :key="p.id">
                {{p.name}}-{{p.age}}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                persons: [
                    { id: '01', name: '周冬雨', age: '20', sex: 'woman' },
                    { id: '02', name: '马冬梅', age: '30', sex: 'woman' },
                    { id: '03', name: '周杰伦', age: '21', sex: 'man' },
                    { id: '04', name: '马东伦', age: '40', sex: 'man' },
                ],
                likeName: '',
                //判断为升序还是降序 1为升 2为降 0为与原来的顺序
                isup: 0
            },
            computed: {
                newPersons() {
                    const arr = this.persons.filter((p) => {
                        //通过indexOf判断搜索的值是否与列表匹配，如果不匹配等于-1
                        return p.name.indexOf(this.likeName) !== -1
                    })
                    //判断升降序
                    if (this.isup ==0) {
                        return arr
                    }else{
                        //如果要升降序利用三元表达式进行操作
                        arr.sort((a, b) => {
                            return this.isup === 1 ? a.age-b.age : b.age-a.age
                        })
                    }
                    return arr
                }
            }
        })
    </script>

13、vue监测数据的原理

  • 原理

    • vue会监视data中所有层次的数据

    • 如何监测对象中的数据？

      • 通过setter事件监视，且要在newVue时就传入要监测的数据

      • 在对象后追加的属性，Vue默认不做响应式处理

      • 如需给后添加的属性做响应式，需要使用以下API:

        Vue.set(target,propertyName/index,value)

        vm.$ser(target,propertyName/index,value)

    • 如何监测数组中的数据?

      • 通过包裹数组更新元素的方法实现，本质就是做了两件事:
      • 调用原生对应的方法对数组进行更新
      • 重新解析模板，进而更新页面

    • 在Vue修改数组中的某个元素需要用到以下方法:

      • 使用这些API:push(),pop(),shift(),unshift(),splice(),sort(),erverse()
      • Vue.set()或vm.$set

    • 注意Vue.set:

      • 不允许修改vue的根数据或者vue实例
      • 只能给data里面的对象追加属性

13.1、例子 更新一个人的信息

        <!-- html -->
<div id="root">
        <h1>更新信息的一个问题</h1>
        <ul>
            <li v-for="(p,index) in persons" :key="p.id">
                {{p.name}}-{{p.age}}
            </li>
        </ul>
            <!-- 只能更新第一条的信息 -->
        <button @click="upData">点我更新一条信息</button>
</div>

<!-- vue -->
<script>
        const vm = new Vue({
            el:'#root',
            data:{
                persons: [
                    { id: '01', name: '周冬雨', age: '20', sex: 'woman' },
                    { id: '02', name: '马冬梅', age: '30', sex: 'woman' },
                    { id: '03', name: '周杰伦', age: '21', sex: 'man' },
                    { id: '04', name: '马东伦', age: '40', sex: 'man' },
                ],
            },
            methods:{
                //更新第一条信息
                upData(){
                    this.persons[0]= { id: '01', name: 'zy', age: '30', sex: 'man' }
                }
            }
        })
</script>

​ 当我触发点击事件时，可以发现前后的对比

image-20220509093135509

​ 虽然我们修改了数据，但是vue并没有监测到，就不会渲染到页面上。同时我们发现，通过我们直接赋值的这种方式，将第一个的对象属性的get和set方法没有了。

image-20220509093820584

​ 那我们通过下面这种方式操作对象的属性在进行一次数据的修改

image-20220509094120752

image-20220509094501817

​ 我们可以看到数据成功的渲染到了页面上，同时我们可以看到对象的方法并没有被删除，其背后的原理就是Vue底层利用了Object.defineProperty 做数据代理，通过get和set函数进行修改和解析，封装成Observer方法遍历data的属性，并对属性添加getter和setter。

​ 而我们用的persons[0].name是对象中的属性，所以会触发监听重新渲染页面。

13.2、简单实现一个vue监测数据的原理

    <script>
        let data = {
            name:'zy',
            age:18
        }
        const obs = new Observer(data)
        console.log(obs);
        
        //new 一个vm实例对象
        let vm ={}
        vm._data = data = obs

        function Observer(obj) {
            //汇总对象中的所有属性，形成一个数组
            const keys = Object.keys(obj)
            console.log(keys);
            //遍历
            keys.forEach((item)=>{
                //这里this指向的是Observer的实例对象
                Object.defineProperty(this,item,{
                    get(){
                        //返回对应属性身上的值
                        return obj[item]
                    },
                    set(val){
                        //修改对应属性身上的值
                        obj[item]=val
                    }
                })
            })
        }
    </script>

image-20220509100550859

13.3、vue.set方法

​ 当我们的data已经写好，但后续需要添加一个对象时，vue给我们提供了一个set方法，给我们使用。达到重新渲染的效果。

  • 例子:Vue.set(this.student,‘sex’,‘男’) 或者 this.$Vue（this.student,‘sex’,‘男’）
    • 注意事项
      • 不允许修改vue的根数据或者vue实例
      • 只能给data里面的对象追加属性

image-20220509102346753

​ 如图所示，我们需要向红色框添加一个性别属性

    <div id="root">
        <button @click="addSex">添加一个性别：默认值为男</button>
        <h2>姓名：{{student.name}}</h2>
        <h2>年龄：{{student.age}}</h2>
      <!-- 这里要注意 如果值为undefind vue不会渲染，也就是开始data.student中没有sex这个属性 -->
        <h2>性别:{{student.sex}}</h2>
    </div>
    <script>
        new Vue({
            el:'#root',
            data:{
                student:{
                    name:'zy',
                    age:'1'
                }

            },
            methods:{
                addSex(){
                    Vue.set(this.student,'sex','男')
                }
            }
        })
    </script>

13.4、利用vue提供的方法做例1 -更新一个人的信息

​ 在开头我们直接利用

 this.persons[0]= { id: '01', name: 'zy', age: '30', sex: 'man' }

​ 修改数组不会奏效，同时页面也不会渲染。在vue中给我们提供了方法

image-20220509105411737

​ 也就是说我们需要变更数组的属性值时，需要用到上面的七个方法或者利用Vue.set去修改

 this.persons.splice(0,1,{ id: '01', name: 'zy', age: '30', sex: 'man' })

3446

14、收集表单数据

  • 收集表单数据
    • 若：，则v-model收集的是value值为用户输入的value值
    • 若：，则v-model收集的是value值并且要给标签配置value值
    • 若：
      • 没有给input配置value，则收集起来的就是checked（布尔值）
      • 配置了input的value值
        • v-model的初始值不是为非数组形式，那么还是为checked
        • 如果为数组，那么就收集数组组成的值
  • v-model的三个修饰符
    • 用法：v-model.lazy
    • lazy：失去焦点在收集
    • number：输入的字符串转为有效的数字
    • trim：去掉首尾空格

14.1、案例—收集表单数据

46

    <div id="root">
        <form>
            <!-- 限制值为数字，传入的值也是数字-->
            账号：<input type="number" v-model.number.trim="account"><br>
            密码：<input type="password" v-model="password"><br>
            <!-- 分组归为一类，辨别性别 -->
            性别：男<input type="radio" value="1" name="sex" v-model="sex">
                 女<input type="radio" value="0" name="sex" v-model="sex"> <br>
                 <!-- 用数组形式存储 -->
            爱好: 吃饭<input type="checkbox" value="吃饭"v-model="hobby">
                  睡觉<input type="checkbox" value="睡觉"v-model="hobby">
                  打游戏<input type="checkbox" value="打游戏"v-model="hobby"><br>
            所属校区：<select v-model="school">
                <option value="">请输入你的校区</option>
                <option value="第一区">第一区</option>
                <option value="第二区">第二区</option>
            </select><br>
            其他信息:<textarea v-model.lazy="other"></textarea> <br>
            <input type="checkbox" v-model="agree">阅读并接收<a href="www.baidu.com">《用户协议》</a><br>
            <button>提交</button>
        </form>
    </div>    
    <script>
        new Vue({
            el:'#root',
            data:{
                account:'',
                password:'',
                sex:'',
                hobby:[],
                school:'',
                other:'',
                agree:''
            }
        })
    </script>

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

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

相关文章

创建一个Keil项目

创建一个Keil项目

1、创建项目 2、选择存放的文件夹&#xff0c;还有设置项目名 3、选择型号&#xff08;因为没有STC,用下面这个替代&#xff0c;功能差不多&#xff09; 4、选择不用启动文件 5、就会得到下面这个&#xff0c;可以在Source Group 1下面编写代码了 6、右键source Group 1,添加c语…
阅读更多...
Python 编写确定个位、十位以上方法及各数位的和程序

Python 编写确定个位、十位以上方法及各数位的和程序

Python 编写确定数字位方法 Python 编写确定个位、十位Python 编写确定个位、十位、百位方法解析&#xff1a;Python 各数位的和程序 利用%&#xff08;取余符号&#xff09;、//&#xff08;整除&#xff09;符号。 Python 编写确定个位、十位 num 17 a num % 10 b num /…
阅读更多...
【点云】有序/无序点云区别（详细详解）

【点云】有序/无序点云区别（详细详解）

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…
阅读更多...
Linux安装frp并实现内网穿透

Linux安装frp并实现内网穿透

准备 一台公网服务器&#xff08;配置无要求网络稳定就行&#xff09; 内网客户端&#xff08;准备要穿透出去的设备&#xff09; 服务端&#xff08;公网服务器&#xff09; 这里是为服务端配置frp 只关注frps和frps.ini即可 frp项目地址 &#xff1a;https://github.com/f…
阅读更多...
一文详解汽车电CAN总线

一文详解汽车电CAN总线

1.什么是CAN总线 CAN总线(控制器区域网络)是一个中央网络系统&#xff0c;连接不同的电子控制单元(ECU)&#xff0c;车辆中的其他设备。现代汽车可以有100个ECU&#xff0c;因此CAN总线通信变得非常重要。 2.CAN总线流行的背景 集中式:CAN总线系统允许对连接到网络的ECU进行集…
阅读更多...
完整攻防知识体系-你值得拥有

完整攻防知识体系-你值得拥有

文章目录 前言内容简介目录 前言 根据中国互联网络信息中心&#xff08;CNNIC&#xff09;发布的第51次《中国互联网络发展状况统计报告》&#xff0c;截至2022年12月&#xff0c;我国网民规模为10.67亿&#xff0c;互联网普及率达75.6%。 我国有潜力建设全球规模最大、应用渗透…
阅读更多...
springCore完整学习教程2，入门级别

springCore完整学习教程2，入门级别

上集说到&#xff1a;2. 3&#xff0c;咱们从2.3集开始 2. Externalized Configuration 2.3. External Application Properties Spring Boot会自动找到并加载应用程序。属性和应用程序。当应用程序启动时&#xff0c;从以下位置获取Yaml文件: 从类路径 类路径root 类路径/…
阅读更多...
Android开发知识学习——编码、加密、Hash、序列化和字符集

Android开发知识学习——编码、加密、Hash、序列化和字符集

文章目录 学习资源来自&#xff1a;扔物线加密古代密码学现代密码学对称加密非对称加密密码学密钥和登录密码Base64URL 使用的百分号编码压缩与解压缩图片与音频、视频编解码 序列化Hash字符集课后题 学习资源来自&#xff1a;扔物线 加密 古代密码学 起源&#xff1a;古代战…
阅读更多...
微信公众号如何通过迁移变更主体？

微信公众号如何通过迁移变更主体？

公众号迁移后原来内容还在么&#xff1f;通过公众号迁移&#xff0c;可以实现这些目的&#xff1a;主体变更、开通留言功能、多号合并、订阅号升级为服务号、服务号转为订阅号。公众号迁移流程&#xff1a;①办理公证&#xff1b;②提交迁移申请&#xff1b;③第三方审核&#…
阅读更多...
14. 机器学习 - KNN 贝叶斯

14. 机器学习 - KNN 贝叶斯

Hi&#xff0c;你好。我是茶桁。 咱们之前几节课的内容&#xff0c;从线性回归开始到最后讲到了数据集的处理。还有最后补充了SOFTMAX。 这些东西&#xff0c;都挺零碎的&#xff0c;但是又有着相互之间的关系&#xff0c;并且也都蛮重要的。并且是在学习机器学习过程当中比较…
阅读更多...
Unity点乘的实战案例1

Unity点乘的实战案例1

向量的点乘,也叫向量的内积、数量积&#xff0c;对两个向量执行点乘运算&#xff0c;就是对这两个向量对应位一一相乘之后求和的操作&#xff0c;点乘的结果是一个标量。点乘&#xff0c;也叫数量积。结果是一个向量在另一个向量方向上投影的长度&#xff0c;是一个标量。 • …
阅读更多...
JVM进阶(3)

JVM进阶(3)

一)什么是垃圾&#xff1f; 垃圾指的是在应用程序中没有任何指针指向的对象&#xff0c;这个对象就是需要被回收的垃圾&#xff0c;如果不及时的针对内存中的垃圾进行清理&#xff0c;那么这些垃圾对象所占用的内存空间可能一直保留到应用程序结束&#xff0c;被保留的空间无法…
阅读更多...
前端开发---在vue项目中使用openLayers

前端开发---在vue项目中使用openLayers

前端开发之在vue项目中使用openLayers 前言效果图在vue中渲染地图安装ol插件1、调用插件2、 初始话地图3、地图点击事件4、重置坐标5、通过坐标改变视图6、保存坐标点 vue中使用的源码 前言 本篇文章主要讲解openLayers的初步使用&#xff0c;包括渲染地图、获取点坐标、标记点…
阅读更多...
Data Analysis With Python

Data Analysis With Python

文章目录 Data Analysis With PythonAnalyzing Numerical Data with NumPyCreating NumPy ArrayNumPy Array SlicingNumPy Array BroadcastingAnalyzing Data Using Pandas In this article, we will discuss how to do data analysis with Python. We will discuss all sorts …
阅读更多...
平衡二叉树AVL的插入删除

平衡二叉树AVL的插入删除

在AVL树的插入操作中&#xff0c;假设插入一个结点后&#xff0c;当前节点p的平衡因子是&#xfe63;2&#xff0c;其左子结点的平衡因子是&#xff0b;1&#xff0c;左子结点的右子结点的平衡因子是&#xfe63;1。如图所示&#xff0c;请给出票转调整之后的结构。
阅读更多...
微机原理与接口技术-第八章常用接口技术

微机原理与接口技术-第八章常用接口技术

文章目录 定时控制接口8253/8254定时器定时器的应用 并行接口并行接口电路8255内部引脚工作方式工作方式0&#xff1a;基本输入输出方式工作方式1&#xff1a;选通输入输出方式 编程 并行接口的应用用8255方式0与打印机接口 数码管及其接口数码管的工作原理单个数码管的显示多个…
阅读更多...
目录和文件操作

目录和文件操作

在自己电脑任一盘符中新建以OS_Test命名的文件夹&#xff0c;并在该文件夹中新建新建3个以.txt&#xff0c;3个 .xlsx为扩展名的文件&#xff08;文件名由代码随机生成&#xff0c;长度为8&#xff0c;由字母数字组成&#xff09;。&#xff0c;请写一个程序&#xff0c;删除掉…
阅读更多...
Unity的unity_ObjectToWorld里的每一列分别代表什么意思？换个方向反向理解-更简单

Unity的unity_ObjectToWorld里的每一列分别代表什么意思？换个方向反向理解-更简单

官方关键UnityObjectToWorldNormal&#xff08;&#xff09; 代码 从乐乐姐的书中得知&#xff0c;当我们在shader想获得法线&#xff0c;大概会这么些 o.wordDir UnityObjectToWorldNormal(i.normal) &#xff08;这行代码就包含了官方对“unity_ObjectToWorld”的终极理解…
阅读更多...
视频批量剪辑技巧：如何实现震撼的嵌套合并效果

视频批量剪辑技巧：如何实现震撼的嵌套合并效果

随着视频制作需求的不断增长&#xff0c;视频批量剪辑技巧在提高制作效率和质量方面显得尤为重要。本文将介绍云炫AI智剪实现震撼嵌套合并效果的方法&#xff0c;帮助您在视频制作过程中更高效地完成任务。 视频批量剪辑技巧是一种利用计算机技术实现自动化视频剪辑的方法。通…
阅读更多...
串口占用检测工具

串口占用检测工具

串口占用检测工具 平时需要检测哪个程序占用了串口&#xff0c;下面介绍一款非常方便的工具&#xff0c;它的工具箱里包含一个串口占用检测工具&#xff0c;可以非常方便的检测出来哪个程序占用了串口&#xff0c;并给出程序名和PID。 官网下载地址&#xff1a;http://www.red…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023