第十九节:带你梳理Vue2: 父组件向子组件传参(props传参)

1. 组件嵌套

1.1 组件的嵌套使用

之前有说过,Vue组件跟Vue实例是一样的,因此在Vue中一个组件中也可以定义并使用自己的局部组件,这就是组件的嵌套使用

例如:示例代码如下:

<div id="app"><!-- 3. 使用组件 --><my-component></my-component>
</div><script>// 子组件选项let sonComponent = {template:`<span>我是子组件</span>`,}//  父组件选项对象let MyComponent = {template: `<div><h2>我是父组件</h2><my-son></my-son><my-son /></div>`,// 将子组件定义为父组件的局部组件components: {mySon: sonComponent}}// 2. 注册局部组件const vm = new Vue({el:"#app",components: {"MyComponent": MyComponent}})
</script>

显示结果:

组件的嵌套使用.png

通过示例我们就了解到,组件可以嵌套使用,那么我们就不得不思考一个问题,他们各自之间的数据关系如何?能否相互使用对方的数据呢?

1.2 组件间的数据关系

组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。

示例代码如下

<div id="app"><!-- 3. 使用组件 --><my-component></my-component>
</div><script>// 子组件选项let sonComponent = {template:`<span>我是子组件{{msg}}</span>`,}//  父组件选项对象let MyComponent = {template: `<div><h2>我是父组件</h2><h3>父组件中使用子组件</h3><my-son></my-son><my-son /><h3>父组件中使用父组件数据</h3>{{ msg }}</div>`,data(){return {msg: "哈哈,我是父组件数据"}},// 将子组件定义为父组件的局部组件components: {mySon: sonComponent}}// 2. 注册局部组件const vm = new Vue({el:"#app",components: {"MyComponent": MyComponent}})</script>

显示结果:

子组件中错误的使用父组件数据.png

如果在子组件中强行使用父组件的数据 ,就会报错,
那么子组件如何才能获取父组件的数据呢?


2. props 属性

父组件可以使用 props 把数据传给子组件。

2.1 props基本使用

父组件在使用子组件时, 可以将父组件的数据绑定到子组件的自定义标签上,

子组件在选项中添加一个props属性来接收数据

示例代码如下:

<div id="app"><!-- 使用组件 --><my-component></my-component>
</div><!-- 子组件模板 -->
<template id="son"><div><table border="1"><tr colspan="3">子组件数据</tr><tr><td>my name</td><td>{{ myName }}</td></tr><tr><td>my age</td><td>{{ myAge }}</td></tr></table></div>
</template><!-- 父组件模板 -->
<template id="MyComponent"><div><h2>显示父组件传给子组件的数据</h2><!-- 通过两个组件的契合点，父组件通过自定义属性将数据传递给子组件 --><!-- 在属性传输数据的时候使用连字符语法 --><my-son :my-name="name" :my-age="age"></my-son></div>
</template><script>// 子组件选项let sonComponent = {// 子组件通过props接受数据并使用// 数组里放父组件中自定义属性的名字// props 里面使用驼峰写法props:["myName","myAge"],template:`#son`,}//  父组件选项对象let MyComponent = {template: `#MyComponent`,data(){return {name:"wuwei",age:18}},// 将子组件定义为父组件的局部组件components: {mySon: sonComponent}}//  实例中注册组件const vm = new Vue({el:"#app",components: {"MyComponent": MyComponent}})</script>

显示结果:

父组件通过props向子组件传值.png


2.2 数据传递分类

都知道在JS中数据分为两大类,基本数据类型和引用数据类型

因此在父组件向子组件传递数据时也分为两种:为传值和传引用

传值：String Number Boolean

传引用： Array Object

那么接下来我们好好研究研究两者的不同


2.2.1 传递的是基本类型

基本类型,顾名思义,就是传递JS基本数据类型的数据

示例代码如下:

<div id="app"><conter :count="3"></conter><conter :count="4"></conter>
</div><script>var conter = {props: ['count'],template:'<div @click="handleClick">{{count}}</div>',methods:{handleClick(){//  console.log(this.count)this.count++}}}var app = new Vue({el:'#app',components:{conter}})
</script>

props传递数字.png

其实这个时候我们发现在使用子组件传递数据时并没有使用父组件data中的数据,但仍然使用了v-bind动态绑定指令
为什么呢? 不用v-bind指令就不能传递数据了吗?


答案当然不是啦, 之前有讲过, 属性如果不使用v-bind指令绑定,那么属性值将是字符串,如果使用v-bind指令绑定, 属性值虽然还是引号,但是引号中确是JavaScript表达式

因此上面的示例中我们希望的是传递数据过去,那么引号中的3 只有在JavaScript表达式中才表示数字的字面量, 因此需要v-bind指令

我们也可以尝试一下,不是用v-bind的情况

<div id="app"><!-- 不使用v-bind 指令--><conter count="3"></conter><conter count="4"></conter>
</div><script>var conter = {props: ['count'],template:'<div @click="handleClick">{{count}}</div>',methods:{handleClick(){//  console.log(this.count)this.count++}}}var app = new Vue({el:'#app',components:{conter}})
</script>

显示结果:

不使用v-bind指令传递数据.png

此时通过两个案例的对比,我们就可以发现, 使用和不使用v-bind指令的区别

也就是说不使用指令, 传递给子组件的数据将永远是字符串, 不管你写成什么样子

使用v-bind指令, 属性值引号中的内容将变成表达式,那么你就可以传递任何JS数据类型的数据

这既是Vue官网中关于props 静态传输和动态传输.

接下来我们再来看看父组件给字符串传递引用值的情况


2.2.2 传递的是引用类型的值

传引用就是传递引用类型的数据,
其实我们最想关注的是,传递引用类型的数据是数据的拷贝,还是内存地址的拷贝
因为这涉及到在子组件中是否可以通过props修改父组件中的数据

示例代码如下:

<div id="app"><child1 :aa="obj"></child1><child2 :bb="obj"></child2>
</div><script>var child1 = {props:['aa'],template:`<div>{{aa}}</div>`,mounted(){console.log(this.aa)}}var child2 = {props:['bb'],template:`<div><div>{{this.bb}}</div><button @click="handleClick">点击</button></div>`,methods: {handleClick(){this.bb.name="haha"}}}new Vue({el:'#app',data: {obj:{name: 'wuwei'}},components: {child1,child2}})
</script>

向子组件传递引用类型.png

通过示例我们发现父组件向两个不同的子组件传递了同一个引用数据类型,

两个子组件都拿到了相同的数据,也显示相同的内容,


可是在child2子组件中定义了一个按钮用于改变child2这个子组件通过props从父组件获取过来的数据

var child2 = {props:['bb'],template:`<div><div>{{this.bb}}</div><button @click="handleClick">点击</button></div>`,methods: {handleClick(){this.bb.name="haha"}}
}

点击后显示的结果:

子组件修改父组件传递的数据.png

通过示例我们就了解到,父组件向子组件传递数据时,子组件通过props 属性接受,
但请不要随意的更改props属性中的数据, 因为可能会有你意向不到的问题,

那么怎么解决这类问题呢, 接着往下看.


2.3 单向数据流

vue默认是单向数据流,所谓的单向数据流,就是数据传递是单向的

既然父组件将数据传递给了子组件，那么子组件中如果对于数据进行改变就有可能影响其他使用这数据的组件

注意:

这个只限传递基本数据类型的值,传递引用数据类型的问题上例中已经处理过

示例代码如下:

<div id="app"><!-- 使用组件 --><my-component></my-component>
</div><!-- 子组件模板 -->
<template id="son"><table border="1"><tr><th  colspan="3">子组件数据</th></tr><tr><td>my name</td><td>{{ myName }}</td><td><input type="text" v-model="myName"></td></tr><tr><td>my age</td><td>{{ myAge }}</td><td><input type="text" v-model="myAge"></td></tr></table>
</template><!-- 父组件模板 -->
<template id="MyComponent"><div><table border="1"><tr><th  colspan="3">父组件数据</th></tr><tr><td>name</td><td>{{ name }}</td><td><input type="text" v-model="name"></td></tr><tr><td>age</td><td>{{ age }}</td><td><input type="text" v-model="age"></td></tr></table><!-- 通过两个组件的契合点，父组件通过自定义属性将数据传递给子组件 --><!-- 在属性传输数据的时候使用连字符语法 --><my-son :my-name="name" :my-age="age"></my-son></div>
</template><script>// 子组件选项let sonComponent = {// 子组件通过props接受数据并使用// 数组里放父组件中自定义属性的名字// props 里面使用驼峰写法props:["myName","myAge"],template:`#son`,}//  父组件选项对象let MyComponent = {template: `#MyComponent`,data(){return {name:"wuwei",age:18}},// 将子组件定义为父组件的局部组件components: {mySon: sonComponent}}//  实例中注册组件const vm = new Vue({el:"#app",components: {"MyComponent": MyComponent}})</script>

修改父组件数据:

父组件数据改变.png

修改子组件中数据,

子组件直接修改props中数据.png

通过示例测试,我们发现

  1. 当父组件数据更新时,传递给子组件的props也会更新,
  2. 当子组件修改了props的数据, 父组件不会有任何变化(基本数据类型报错,引用类型直接替换引用地址也报错, 但是直接修改属性不报错,但是不建议这么用)

这就是所谓的单项下行数据流

这么做的目的是为了防止子组件无意修改了父组件的状态


总结:

  1. 子组件不能(也不要)直接修改父组件传递过来的值,否则就会报错
  2. 修改父组件传递过来引入类型的属性不会报错,但是会导致,其他使用了这个数据的子组件里面的数据也会发生变化(这也是很大的entity)

2.4 prop响应式

通过上一个例子,我们发现父组件的数据发生变化, 子组件也会随着发生变化, 也就是,父组件在使用子组件时,给子组件prop传递的数组无论何时发生改变, 在子组件内任何使用该prop的地方都会发生更新
这就是props响应式

示例代码如下:

<div id="app"><!-- 使用组件 --><my-component></my-component>
</div><!-- 子组件模板 -->
<template id="son"><div>被点击了{{ num }}次</div>
</template><!-- 父组件模板 -->
<template id="MyComponent"><div><my-son  :num="num"></my-son><!-- 每次点击更改父组件data中的数据, 子组件prop关联的数据也会跟随发生改变--><button @click="handleClick">点击+1</button></div>
</template><script>// 子组件选项let sonComponent = {// 子组件通过props接受数据并使用props:["num"],template:`#son`,}//  父组件选项对象let MyComponent = {template: `#MyComponent`,data(){return {num: 1}},// 将子组件定义为父组件的局部组件components: {mySon: sonComponent},methods:{handleClick(){this.num++}}}//  实例中注册组件const vm = new Vue({el:"#app",components: {"MyComponent": MyComponent}})
</script>

点击结果

props的响应式.png


3. 如何修改数据

上一小节学习我们已经知道了:

  1. 父组件可以向子组件传递基本数据类型和引用数据类型的数据
  2. 子组件如果直接修改props中的基本数据类型数据和引用类型数据的内存地址就报错
  3. 如果修改引用类型数据里的值虽然不会报错,但是这样非常不友好
  4. 因此不推荐在子组件直接修改props数据中的数据

可是有的是需要修改传递过来的数据,那么如何解决这样的需求呢?

其实我们可以将父组件传递过来的值赋值给组件自己的数据,这样我们就可以修改自己的数据了


3.1 子组件修改基本数据

示例代码如下:

var conter = {props: ['count'],data(){return {num: this.count}},template:'<div @click="handleClick">{{num}}</div>',methods:{handleClick(){//  console.log(this.num)this.num++}}
}

3.2 子组件修改引用类型

如果父组件向子组件传递的引用数据类型的数据,我们按照基本数据类型那种直接将数据赋值给子组件自己的数据就行不同了,因为赋值给自己的数据也是内存地址的赋值,因此直接赋值,修改还是会改变父组件的数据. 那么要怎么办嗯?

其实我们可以在子组件内的data属性中浅拷贝一份父组件传递过来的引用数据类型,子组件如果想修改自己的显示,就修改自己data中的数据

将上面例子中child2子组件修改为如下代码

var child2 = {props:['bb'],// 在自己的data数据中浅拷贝一份父组件传过来的引用数据data(){return {cc: JSON.parse(JSON.stringify(this.bb))}},// 在自己的视图中显示自己的数据template:`<div><div>{{cc}}</div><button @click="handleClick">点击</button></div>`,// 如果有修改就修改自己data中的数据methods: {handleClick(){this.cc.name="haha"}}
}

点击结果:

子组件拷贝父组件数据.png

这样就可以在子组件中使用自己的数据,修改自己的数据, 进而解决问题


4. Prop 验证

我们可以为组件的 prop 指定验证规则。如果传入的数据不符合要求，Vue 会发出警告。这对于开发给他人使用的组件非常有用。

要指定验证规则，需要用对象的形式来定义 prop，而不能用字符串数组：


4.1 验证父组件传递过来的数据类型

// 子组件选项
let sonComponent = {// props 验证数据类型props:{myName:String,myAge: Number},template:`#son`,
}

如果数据类型验证通过, 则正常运行,如果验证不通过,则报错


4.2 允许数据传递多种数据类型

如果一个数据可以接受多种数据类型,则使用数组将所有允许的类型罗列在一起

// 子组件选项
let sonComponent = {// props 验证数据类型props:{myName:String,myAge: [Number,String]},template:`#son`,
}

这样myAge 在接受的数据是Number 类型或String 都不会报错


注意:

这两种验证数据的类型,只验证父组件传递过来数据的类型是否符合, 并不关心用户是否传数据过来, 不传也不会报错,

那么type属性都可以指定哪些类型呢?


4.3 type类型

验证类型的type属性的值就是原生的构造器(构造函数)

  • String
  • Number
  • Boolean
  • Function
  • Object
  • Array
  • Symbol

4.4 必须传递的数据

有的时候我们需要指定一些数据为必须传递的, 如果不传递就会报错, 这个时候,数据的只是一个对象

对象就是对于props传递数据的配置对象

验证的配置对象中

  1. type: 验证数据类型
  2. required: 验证数据是否为必须传递,true,是必须传递,不传就报错
// 子组件选项
let sonComponent = {props:{myName:String,myAge: {type:Number,   // type为验证数据类型required: true  // required为数据是否必须传递,true是false 否}},template:`#son`,
}

4.5 指定默认值

如果父组件未传递数据过来,则使用默认值

注意:

配置对象中required 必传选项 和 default 默认值选项,不能同时使用

默认是就是父组件在未传递数据的时候使用, 如果你还需要父组件必须传递数据, 默认值就不没有意义了吗

// 子组件选项
let sonComponent = {props:{myName:{type: String,    // 验证类型default: '默认姓名'   // 默认值},myAge: {type:Number,   // type为验证数据类型required: true  // required为数据是否必须传递,true是false 否}},template:`#son`,
}

如果传递过来的是是引用类型, 那么在定义默认值的时候必须是一个函数,函数返回引用类型的数据
为什么是一个函数就不用在说吧,和组件数据data是函数同一个意思, 保存每次传递都是第一无二的数据

示例代码如下

let sonComponent = {props:{myName:{type: String,    // 验证类型default: '默认姓名'   // 可以赋予默认值,如果父组件没有传值,使用默认值},myAge: {type:Number,   // type为验证数据类型required: true  // required为数据是否必须传递,true是false 否//  此属性表示必须传值,但是不能跟default同用},myLike:{type:Array,       // 限定的数据类型是引用类型的数组default: function(){   //如果传递过来的是一个引用类型的值,默认值是函数return []   }}},template:`#son`,
}

4.6 自定义验证规则

自定义验证是一个函数,返回true则验证通过,返回false则验证不通过

示例代码如下:

let sonComponent = {// 子组件通过props接受数据并使用// 数组里放父组件中自定义属性的名字// props 里面使用驼峰写法props:{myName:{type: String,    // 验证类型default: '默认姓名'   // 默认值},myAge: {    validator:function(value){ //   自定义验证器return value > 16        // 返回true 验证通过, 返回false 验证不通过报错}}},template:`#son`,
}

注意

props 会在组件实例创建之前进行校验，

所以在 default 或 validator 函数里，诸如 data、computed 或 methods 等实例属性都还无法使用。

props特性就是父组件通过属性传值,子组件有对应的props接受,那么这个属性不会出现在网页的标签属性上


5. 非Props 特性

5.1 非prop 属性的了解

尽管为组件定义明确的 props是推荐的传参方式，组件的作者却并不总能预见到组件被使用的场景。
所以，组件可以接收任意传入的特性，这些特性都会被添加到组件的根元素上。

简单的说就是父组件可以在使用子组件的时候给子组件传递n多的属性, 只有子组件使用props接受的才会成为子组件的参数, 没有通过props声明的属性就是非props, 这些属性会自动添加为子组件根标签的属性

通过示例了解:

<div id="app"><!-- 使用组件 --><my-component></my-component>
</div><!-- 子组件模板 -->
<template id="son"><div>{{msg}}</div>
</template><!-- 父组件模板 -->
<template id="MyComponent"><div><!-- msg因为子组件prop定义了所以会成为子组件的参数 --><!-- title属性因为子组件没有在props声明,所以是非prop, 会自动添加为 子组件根标签的属性--><my-son  :msg="msg" :title="title"></my-son></div>
</template><script>// 子组件选项let sonComponent = {// 子组件通过props接受数据并使用props:["msg"],template:`#son`,}//  父组件选项对象let MyComponent = {template: `#MyComponent`,data(){return {msg:"我想说一句话",title:"标题"}},// 将子组件定义为父组件的局部组件components: {mySon: sonComponent}}//  实例中注册组件const vm = new Vue({el:"#app",components: {"MyComponent": MyComponent}})
</script>

显示结果

非props.png

在总结一下:

非props就是子组件并没有明确props来接受父组件的传值,那么在网页中子组件传值的属性将会成为标签的私有属性


上面一个例子,了解到如果父组件给子组件传递非prop属性,会自动成为子组件模板中根标签的标签属性, 适用于任何HTML属性或特性,

可是如果父组件传递的非prop属性与子组件的根标签的属性重名了怎么办呢?

会发生两种情况, 一,替换,二合并, 先来看看替换的情况


5.2 非prop属性的替换

如果父组件传递的prop属性与子组件的根标签的属性重名,大部分情况会覆盖子组件根标签上的同名属性. 即替换效果

示例代码如下:

<div id="app"><!-- 使用组件 --><my-component></my-component>
</div><!-- 子组件模板 -->
<template id="son"><!-- 子组件根标签的type属性值text 被父组件传递过了的非prop type属性值 radio替换了 --><input type="text" />
</template><!-- 父组件模板 -->
<template id="MyComponent"><div><!-- 父组件向子组件传递非prop属性 type 值为radio --><my-son  :type="type"></my-son></div>
</template><script>// 子组件选项let sonComponent = {// 子组件通过props接受数据并使用props:["num"],template:`#son`,}//  父组件选项对象let MyComponent = {template: `#MyComponent`,data(){return {type: "radio"}},// 将子组件定义为父组件的局部组件components: {mySon: sonComponent}}//  实例中注册组件const vm = new Vue({el:"#app",components: {"MyComponent": MyComponent}})
</script>

显示结果

非props属性替换.png

通过示例.发现: 子组件根标签的type属性值text 被父组件传递过了的非props type属性值 radio替换了

这样的效果非常不好,可能会破坏子组件. 所以一定要注意.


5.3 非prop属性的合并

当然了大部分会发生替换, 但是也有两个特殊的属性,会发生合并的效果,这两个属性就是class与style属性

示例:

<div id="app"><!-- 使用组件 --><my-component></my-component>
</div><!-- 子组件模板 -->
<template id="son"><div class="box" style="background:skyblue;">我是子组件 </div>
</template><!-- 父组件模板 -->
<template id="MyComponent"><div><my-son  :class="className" :style="style"></my-son></div>
</template><script>// 子组件选项let sonComponent = {// 子组件通过props接受数据并使用props:["num"],template:`#son`,}//  父组件选项对象let MyComponent = {template: `#MyComponent`,data(){return {className: "wrap",style: {width: '100px',height: '100px'}}},// 将子组件定义为父组件的局部组件components: {mySon: sonComponent}}//  实例中注册组件const vm = new Vue({el:"#app",components: {"MyComponent": MyComponent}})</script>

非props属性合并.png

示例中,父组件通过非prop传递过去的class 和style属性 与子组件根标签的class 和 style 属性发生合并.


6. 遍历传值，

利用v-for循环指令. 多次使用组件.

在配合使用 v-bind 指令将数据传到每个组件中：

<div id="app"><ol><!--现在我们为每个 todo-item 传递了数据，即其内容可以是动态的。我们也需要为每个组件提供一个“key”，稍后再作详细解释。--><todo-itemv-for="item in groceryList"v-bind:text="item.text"v-bind:key="item.id"></todo-item></ol>
</div><script>// 定义子组件let todoItem = {props:["text"],template:`<li>{{text}}</li>`}// Vue实例var vm = new Vue({el: '#app',data: {groceryList: [{ id: 0, text: '蔬菜' },{ id: 1, text: '奶酪' },{ id: 2, text: '随便其它什么人吃的东西' }]},components:{todoItem}})</script>

显示结果

循环组件配合props使用.png

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

opencv进阶 ——（七）图像处理之寸照换背景

opencv进阶 ——（七）图像处理之寸照换背景

寸照换背景&#xff0c;通常指的是将个人证件照片的背景色更换为另一种颜色&#xff0c;如白色、蓝色或红色等&#xff0c;以满足不同用途的要求。例如&#xff0c;护照照片通常要求白色背景&#xff0c;而身份证照片可能需要蓝色背景。这个过程通常涉及到图像处理技术&#xf…
阅读更多...
Facebook之魅：数字社交的体验

Facebook之魅：数字社交的体验

在当今数字化时代&#xff0c;Facebook作为全球最大的社交平台之一&#xff0c;承载着数十亿用户的社交需求和期待。它不仅仅是一个简单的网站或应用程序&#xff0c;更是一个将世界各地的人们连接在一起的社交网络&#xff0c;为用户提供了丰富多彩、无与伦比的数字社交体验。…
阅读更多...
PIC单片机控制小型三相无刷直流电机

PIC单片机控制小型三相无刷直流电机

1、使用PIC12F629小型三相无刷直流电机制作电动口罩&#xff0c;涉及到电机的驱动芯片的选型&#xff0c;这里选用国产的MS39549驱动芯片&#xff1b; 2、搭建的电路图如下&#xff1a; 3、单片机给MS39549驱动芯片发送PWM占空比信号&#xff0c;即可实现对电机的转速控制&…
阅读更多...
鸿蒙系统和安卓系统通过termux搭建Linux系统—Centos

鸿蒙系统和安卓系统通过termux搭建Linux系统—Centos

目录 1. 前言 2. 效果图展示 3. 安装termux 4. 安装Centos系统 4.1 更换源 4.2 拉取镜像 4.3 启动centos 5.结尾 1. 前言 大家好&#xff0c;我是jiaoxingk 今天这篇文章让你能够在手机或者平板上使用Linux-Centos系统 让你随时随地都能操作命令行进行装13 2. 效果图展示…
阅读更多...
TH方程学习（1）

TH方程学习（1）

一、背景介绍 根据CW方程的学习&#xff0c;CW方程的限制条件为圆轨道&#xff0c;不考虑摄动&#xff0c;二者距离相对较小。TH方程则可以将物体间的相对运动推广到椭圆轨道的二体运动模型&#xff0c;本部分将结合STK的仿真功能&#xff0c;联合考察TH方程的有用性&#xff…
阅读更多...
系统架构设计师【第3章】: 信息系统基础知识 (核心总结)

系统架构设计师【第3章】: 信息系统基础知识 (核心总结)

文章目录 3.1　信息系统概述3.1.1　信息系统的定义3.1.2　信息系统的发展3.1.3　信息系统的分类3.1.4　信息系统的生命周期3.1.5　信息系统建设原则3.1.6　信息系统开发方法 3.2　业务处理系统&#xff08;TPS&#xff09;3.2.1　业务处理系统的概念3.2.2　业务处理系统的功能 …
阅读更多...
网络故障与排除

网络故障与排除

一、Router-ID冲突导致OSPF路由环路 路由器收到相同Router-ID的两台设备发送的LSA&#xff0c;所以查看路由表看到的OSPF缺省路由信息就会不断变动。而当C1的缺省路由从C2中学到&#xff0c;C2的缺省路由又从C1中学到时&#xff0c;就形成了路由环路&#xff0c;因此出现路由不…
阅读更多...
markdown语法保存

markdown语法保存

这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…
阅读更多...
渗透测试一些知识点

渗透测试一些知识点

1、如果提示缺少参数&#xff0c;如{msg&#xff1a;params error}&#xff0c;可尝使用字典模糊测试构造参数&#xff0c;进一步攻击。 2、程序溢出&#xff0c;int最大值为2147483647&#xff0c;可尝试使用该值进行整数溢出&#xff0c;观察现象。 3、403&#xff0c;404响…
阅读更多...
cesium绘制编辑区域

cesium绘制编辑区域

npm 安装也是可以的 #默认安装最新的 yarn add cesium#卸载插件 yarn remove cesium#安装指定版本的 yarn add cesium1.96.0#安装指定版本到测试环境 yarn add cesium1.96.0 -D yarn install turf/turf <template><div id"cesiumContainer"></div…
阅读更多...
贝叶斯算法：机器学习中的“黄金法则”与性能提升之道

贝叶斯算法：机器学习中的“黄金法则”与性能提升之道

&#x1f440;传送门&#x1f440; &#x1f50d;机器学习概述&#x1f340;贝叶斯算法原理&#x1f680;贝叶斯算法的应用✨文本分类✨医疗系统 &#x1f496;贝叶斯算法优化✨贝叶斯算法优化的主要步骤✨贝叶斯算法优化的优点✨贝叶斯算法优化的局限性 &#x1f697;贝叶斯算…
阅读更多...
设计模式21——命令模式

设计模式21——命令模式

写文章的初心主要是用来帮助自己快速的回忆这个模式该怎么用&#xff0c;主要是下面的UML图可以起到大作用&#xff0c;在你学习过一遍以后可能会遗忘&#xff0c;忘记了不要紧&#xff0c;只要看一眼UML图就能想起来了。同时也请大家多多指教。 命令模式&#xff08;Command&…
阅读更多...
ROS2学习——节点话题通信（2）

ROS2学习——节点话题通信（2）

目录 一、ROS2节点 1.概念 2.实例 &#xff08;1&#xff09;ros2 run &#xff08;2&#xff09;ros2 node list &#xff08;3&#xff09;remapping重映射 &#xff08;4&#xff09;ros2 node info 二、话题 &#xff08;1&#xff09; ros2 topic list &#xf…
阅读更多...
英特尔LLM技术挑战记录

英特尔LLM技术挑战记录

英特尔技术介绍&#xff1a; Flash Attention Flash Attention 是一种高效的注意力机制实现&#xff0c;旨在优化大规模 Transformer 模型中的自注意力计算。在深度学习和自然语言处理领域&#xff0c;自注意力是 Transformer 架构的核心组件&#xff0c;用于模型中不同输入元…
阅读更多...
解决Android studio 一直提示下载gradle-xxx-all.zip问题

解决Android studio 一直提示下载gradle-xxx-all.zip问题

今天用AndroidStdiod打开一个新工程的时候&#xff0c;发现项目一直卡在正在下载gradle-xxx-all.zip的任务上&#xff0c;网络出奇的慢&#xff0c;即使配了VPN也无济于事&#xff0c;于是按照以往经验&#xff1a;将gradle-xxx-all.zip下载到.gradle\gradle\wrapper\dists目录…
阅读更多...
JDK8新特性之lambda表达式

JDK8新特性之lambda表达式

大家好&#xff0c;这里是教授.F 目录 引入&#xff1a; 什么情况下使用/使用前提&#xff1a; 标准格式&#xff1a; 实现原理&#xff1a; 省略格式&#xff1a; 引入&#xff1a; lambda表达式就是简介的书写我们的匿名内部类。Lambda相当于对接口的抽象方法的重写。 什…
阅读更多...
高并发项目-用户登录基本功能

高并发项目-用户登录基本功能

文章目录 1.数据库表设计1.IDEA连接数据库2.修改application.yml中数据库的名称为seckill3.IDEA创建数据库seckill4.创建数据表 seckill_user5.密码加密分析1.传统方式&#xff08;不安全&#xff09;2.改进方式&#xff08;两次加密加盐&#xff09; 2.密码加密功能实现1.pom.…
阅读更多...
QTP——功能测试

QTP——功能测试

一、前言&#xff08;课设目的及内容&#xff09; QTP是quicktest Professional的简称&#xff0c;是一种自动测试工具。使用QTP的目的是想用它来执行重复的手动测试&#xff0c;主要是用于回归测试和测试同一软件的新版本。因此你在测试前要考虑好如何对应用程序进行测试&…
阅读更多...
探索AI去衣技术中的反射应用

探索AI去衣技术中的反射应用

在当今数字时代&#xff0c;人工智能&#xff08;AI&#xff09;技术的飞速发展已经渗透到了我们生活的方方面面。其中&#xff0c;图像处理和计算机视觉作为AI的重要分支&#xff0c;正不断推动着创新应用的边界。今天&#xff0c;我们要探讨的是一个颇具争议但又技术上颇为有…
阅读更多...
重学java51.Collections集合工具类、泛型

重学java51.Collections集合工具类、泛型

"我已不在地坛&#xff0c;地坛在我" —— 《想念地坛》 24.5.28 一、Collections集合工具类 1.概述:集合工具类 2.特点: a.构造私有 b.方法都是静态的 3.使用:类名直接调用 4.方法: static <T> boolean addAll(collection<? super T>c,T... el…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023