Vue（六）——使用脚手架（3）

news2024/10/2 14:26:18

目录

webStorage

localStorage

sessionStorage

todolist案例中使用

组件自定义事件

绑定

解绑

总结

全局事件总线

消息发布与订阅

nextTick

过渡与动画

webStorage

        这不是vue团队开发的，不需要写在xx.vue当中，只需写在xx.html当中即可。

什么是浏览器本地存储，下面举一个例子：

也就是说浏览器帮你本地缓存点东西

localStorage

保存数据：

读取数据

删除和清空

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>localStorage</title>
	</head>
	<body>
		<h2>localStorage</h2>
		<button onclick="saveData()">点我保存一个数据</button>
		<button onclick="readData()">点我读取一个数据</button>
		<button onclick="deleteData()">点我删除一个数据</button>
		<button onclick="deleteAllData()">点我清空一个数据</button>

		<script type="text/javascript" >
			let p = {name:'张三',age:18}

			function saveData(){
				//localStorage.setItem  键值对的形式保存数据
				localStorage.setItem('msg','hello!!!') 
				localStorage.setItem('msg2',666)  //toString()方法转换为字符串
				localStorage.setItem('person',JSON.stringify(p))  //把对象转化为字符串
			}
			function readData(){
				//将读取的数据输出到控制台
				console.log(localStorage.getItem('msg')) 
				console.log(localStorage.getItem('msg2'))
				const result = localStorage.getItem('person')
				console.log(JSON.parse(result))

				// console.log(localStorage.getItem('msg3'))
			}
			function deleteData(){
				localStorage.removeItem('msg2')
			}
			function deleteAllData(){
				localStorage.clear()
			}
		</script>
	</body>
</html>

        localStorage最大的特点是几十把浏览器关闭掉它也不会消失，但用户他在浏览器设置里主动清空缓存也会消失。

sessionStorage

他所有的api和localStorage很像

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>sessionStorage</title>
	</head>
	<body>
		<h2>sessionStorage</h2>
		<button onclick="saveData()">点我保存一个数据</button>
		<button onclick="readData()">点我读取一个数据</button>
		<button onclick="deleteData()">点我删除一个数据</button>
		<button onclick="deleteAllData()">点我清空一个数据</button>

		<script type="text/javascript" >
			let p = {name:'张三',age:18}

			function saveData(){
				sessionStorage.setItem('msg','hello!!!')
				sessionStorage.setItem('msg2',666)
				sessionStorage.setItem('person',JSON.stringify(p))
			}
			function readData(){
				console.log(sessionStorage.getItem('msg'))
				console.log(sessionStorage.getItem('msg2'))

				const result = sessionStorage.getItem('person')
				console.log(JSON.parse(result))

				// console.log(sessionStorage.getItem('msg3'))
			}
			function deleteData(){
				sessionStorage.removeItem('msg2')
			}
			function deleteAllData(){
				sessionStorage.clear()
			}
		</script>
	</body>
</html>

会话存储的特点是浏览器一关就没有了。

webStorage

1. 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）

2. 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。

3. 相关API：

    1. ```xxxxxStorage.setItem('key', 'value');```

                  该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。

    2. ```xxxxxStorage.getItem('person');```

        ​      该方法接受一个键名作为参数，返回键名对应的值。

    3. ```xxxxxStorage.removeItem('key');```

        ​      该方法接受一个键名作为参数，并把该键名从存储中删除。

    4. ``` xxxxxStorage.clear()```

        ​      该方法会清空存储中的所有数据。

4. 备注：

    1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。

    2. LocalStorage存储的内容，需要手动清除才会消失。

    3. ```xxxxxStorage.getItem(xxx)```如果xxx对应的value获取不到，那么getItem的返回值是null。

    4. ```JSON.parse(null)```的结果依然是null。

todolist案例中使用

App.vue当中初始化时读数据，添加todo时保存数据

<template>
	<div id="root">
		<div class="todo-container">
			<div class="todo-wrap">
				<MyHeader :addTodo="addTodo"/>
				<MyList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/>
				<MyFooter :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo"/>
			</div>
		</div>
	</div>
</template>

<script>
	import MyHeader from './components/MyHeader'
	import MyList from './components/MyList'
	import MyFooter from './components/MyFooter.vue'

	export default {
		name:'App',
		components:{MyHeader,MyList,MyFooter},
		data() {
			return {
				//由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升）
				todos:JSON.parse(localStorage.getItem('todos')) || []
			}
		},
		methods: {
			//添加一个todo
			addTodo(todoObj){
				this.todos.unshift(todoObj)
			},
			//勾选or取消勾选一个todo
			checkTodo(id){
				this.todos.forEach((todo)=>{
					if(todo.id === id) todo.done = !todo.done
				})
			},
			//删除一个todo
			deleteTodo(id){
				this.todos = this.todos.filter( todo => todo.id !== id )
			},
			//全选or取消全选
			checkAllTodo(done){
				this.todos.forEach((todo)=>{
					todo.done = done
				})
			},
			//清除所有已经完成的todo
			clearAllTodo(){
				this.todos = this.todos.filter((todo)=>{
					return !todo.done
				})
			}
		},
		watch: {
			//监视todos，只要todos发生变化，那么value就是最新的todos
			todos:{
				deep:true,
				handler(value){
					localStorage.setItem('todos',JSON.stringify(value))
				}
			}
		},
	}
</script>

<style>
	/*base*/
	body {
		background: #fff;
	}
	.btn {
		display: inline-block;
		padding: 4px 12px;
		margin-bottom: 0;
		font-size: 14px;
		line-height: 20px;
		text-align: center;
		vertical-align: middle;
		cursor: pointer;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
		border-radius: 4px;
	}
	.btn-danger {
		color: #fff;
		background-color: #da4f49;
		border: 1px solid #bd362f;
	}
	.btn-danger:hover {
		color: #fff;
		background-color: #bd362f;
	}
	.btn:focus {
		outline: none;
	}
	.todo-container {
		width: 600px;
		margin: 0 auto;
	}
	.todo-container .todo-wrap {
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 5px;
	}
</style>

注意在初始化的时候，如果localStorage没有东西为null的时候（因为footer需要计算todos.length），需要写成如下形式（如果为空选择空数组）

监视的时候要深度监视，不止要监测数组是否变化，还要检测数组里边某一项的属性。

组件自定义事件

        自定义事件就是区别于js里面的内置事件而存在，然而js里面的内置事件是给HTML元素用的，而自定义组件事件是给组件用的。

绑定

现在提出一个需求，点击按钮就将school里面的属性放在父组件APP当中。

App.vue

School.vue

 现在换成自定义组件的方式：

        v-on在student的组件标签上，所以说是给student的组件对象vue component(VC)身上绑定了一个事件，事件名叫做atguigu，调用demo函数。给谁(Student)绑定的事件就找谁(Student的实例对象vc)触发。

        怎么去触发？借助$emit()，参数传入要触发的事件名atguigu。

还有一种方式

灵活性更强，可以延迟三秒触发

 加上once表示只能触发一次（按钮只能点击一次）

触发事件同时可以继续传数据接收数据

        一般来说不用这么多形参去接收，一种方法是包装成对象传，另一种方法如下（ES6写法，a是数组）

src/App.vue:

<template>
    <div class="app">
        <!-- 通过父组件给子组件传递函数类型的props实现子给父传递数据 -->
        <School :getSchoolName="getSchoolName"/>

        <!-- 通过父组件给子组件绑定一个自定义事件实现子给父传递数据（第一种写法，使用@或v-on） -->
        <!-- <Student @zs="getStudentName"/> -->

        <!-- 通过父组件给子组件绑定一个自定义事件实现子给父传递数据（第二种写法，使用ref） -->
		<Student ref="student"/>
    </div>
</template>

<script>
    import Student from './components/Student.vue'
    import School from './components/School.vue'

    export default {
        name:'App',
        components: { Student,School },
        methods:{
            getSchoolName(name){
                console.log("已收到学校的名称："+name)
            },
            getStudentName(name){
                console.log("已收到学生的姓名："+name)      
            }
        },
        mounted(){
            this.$refs.student.$on('jojo',this.getStudentName)
        }
    }
</script>


<style scoped>
	.app{
		background-color: gray;
		padding: 5px;
	}
</style>

src/components/Student.vue:

<template>
    <div class="student">
        <h2>学生姓名：{{name}}</h2>
        <h2>学生性别：{{sex}}</h2>
        <button @click="sendStudentName">点我传递学生姓名</button> 
    </div>
</template>

<script>
    export default {
        name:'Student',
        data() {
            return {
                name:'zs',
				sex:'男'
            }
        },
        methods:{
            sendStudentName(){
                this.$emit('zs',this.name)
            }
        }
    }
</script>

<style scoped>
    .student{
        background-color: chartreuse;
        padding: 5px;
		margin-top: 30px;
    }
</style>

解绑

你给谁绑的自定义事件就给谁解绑去

1.利用$off

如果一个组件被销毁了，那么他身上的自定义事件也都不能用了（vc自我销毁）

vm自我销毁

src/App.vue:

<template>
    <div class="app">
        <Student @zs="getStudentName"/>
    </div>
</template>

<script>
    import Student from './components/Student.vue'

    export default {
        name:'App',
        components: { Student },
        methods:{
            getStudentName(name){
                console.log("已收到学生的姓名："+name)      
            }
        }
    }
</script>

<style scoped>
	.app{
		background-color: gray;
		padding: 5px;
	}
</style>

src/components/Student.vue:

<template>
    <div class="student">
        <h2>学生姓名：{{name}}</h2>
        <h2>学生性别：{{sex}}</h2>
        <button @click="sendStudentName">点我传递学生姓名</button> 
        <button @click="unbind">解绑自定义事件</button> 
    </div>
</template>

<script>
    export default {
        name:'Student',
        data() {
            return {
                name:'zs',
				sex:'男'
            }
        },
        methods:{
            sendStudentName(){
                this.$emit('zs',this.name)
            },
            unbind(){
                // 解绑一个自定义事件
                // this.$off('zs')
                // 解绑多个自定义事件
                // this.$off(['zs'])
                // 解绑所有自定义事件
                this.$off()
            }
        }
    }
</script>

<style scoped>
    .student{
        background-color: chartreuse;
        padding: 5px;
		margin-top: 30px;
    }
</style>

总结

谁触发了atguigu事件，那么这个事件当中的this就是谁。

为啥这样写没问题

        Vue之前给定了一个承诺，如果这个函数写在methods里面，并且用的是普通函数，那么给你一个承诺就是这个函数的this一定是APP的组件实例对象。最终的this是有所改变的。

        组件上也可以绑定原生DOM事件，需要使用native修饰符

如果不加修饰符他会认为是自定义事件。

加上修饰符即可

组件的自定义事件

1. 一种组件间通信的方式，适用于：

<strong style="color:red">子组件 ===> 父组件</strong>

（在父组件中给子组件绑定事件）

2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（<span style="color:red">事件的回调在A中</span>）。

3. 绑定自定义事件：

    1. 第一种方式，在父组件中：```<Demo @atguigu="test"/>```  或 ```<Demo v-on:atguigu="test"/>```

    2. 第二种方式，在父组件中：

        ```js

        <Demo ref="demo"/>

        ......

        mounted(){

           this.$refs.xxx.$on('atguigu',this.test)

        }

        ```

    3. 若想让自定义事件只能触发一次，可以使用```once```修饰符，或```$once```方法。

4. 触发自定义事件：```this.$emit('atguigu',数据)```    

5. 解绑自定义事件```this.$off('atguigu')```

6. 组件上也可以绑定原生DOM事件，需要使用```native```修饰符。

7. 注意：通过```this.$refs.xxx.$on('atguigu',回调)```绑定自定义事件时，回调<span style="color:red">要么配置在methods中</span>，<span style="color:red">要么用箭头函数</span>，否则this指向会出问题！

全局事件总线

        可以实现任意组件之间的通信，APP和abcd组件结构如下所示，其中有一个粉色的X组件，它不属于任何一个组件，其中在a组件里面写一些代码，给x绑定自定义事件demo，则这个自定义事件的回调就留在了a里面。

        如果d组件想给a组件传递数据，在d组件里面写一些代码去触发x身上的demo自定义事件，并且在触发数据的同时再带点数据过去，例如666，X组件上的demo事件被触发了，Demo事件所对应的回调也被执行了。回调被执行了，则传递的数据666也以参数的形式来到a组件里了。

        如果b组件想收到别人传过来的数据，在b组件里写一些代码来绑定x组件的自定义事件，比如说事件的名字叫做test，由于是在b组建里面给x组件绑定事件，所以Test所对应的回调就留在了b组件里面。如果d组件想给b组件传递数据，则只需要在d组件里面编写一些代码去触发x组建你的test事件，也可以携带参数。

        如果c组件想收到数据，则可以在c组件里面写一些代码来，绑定x组件的自定义事件，比如叫做test2，则这个事件的回调函数也留在了c组件。如果a想给c传递一些数据，那么只需要在a组件里面编写一些代码来触发x组件当中的test2事件。

1. 所有的组件对象都必须能看见他

2. 这个对象必须能够使用$on、$emit和$off方法去绑定、触发和解绑事件

        {a:1，b:2}只是一个普通的Object对象，他没有相应的绑定或者解绑方法，$on、$emit和$off方法都在vue的原型对象(Vue.prototype)上，原型对象的方法是给vm或者vc用的，所以要么写vm，要么写vc。

student给school传递姓名

 School.vue

<template>
	<div class="school">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
	</div>
</template>

<script>
	export default {
		name:'School',
		data() {
			return {
				name:'尚硅谷',
				address:'北京',
			}
		},
		mounted() {
			// console.log('School',this)
			this.$bus.$on('hello',(data)=>{
				console.log('我是School组件，收到了数据',data)
			})
		},
		//销毁之前把那个傀儡事件给解绑
		beforeDestroy() {
			this.$bus.$off('hello')
		},
	}
</script>

<style scoped>
	.school{
		background-color: skyblue;
		padding: 5px;
	}
</style>

 student.vue

<template>
	<div class="student">
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<button @click="sendStudentName">把学生名给School组件</button>
	</div>
</template>

<script>
	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				sex:'男',
			}
		},
		mounted() {
			// console.log('Student',this.x)
		},
		methods: {
			sendStudentName(){
				this.$bus.$emit('hello',this.name)
			}
		},
	}
</script>

<style lang="less" scoped>
	.student{
		background-color: pink;
		padding: 5px;
		margin-top: 30px;
	}
</style>

App.vue

<template>
	<div class="app">
		<h1>{{msg}}</h1>
		<School/>
		<Student/>
	</div>
</template>

<script>
	import Student from './components/Student'
	import School from './components/School'

	export default {
		name:'App',
		components:{School,Student},
		data() {
			return {
				msg:'你好啊！',
			}
		}
	}
</script>

<style scoped>
	.app{
		background-color: gray;
		padding: 5px;
	}
</style>

 main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	//借助这个钩子，此时还没有模板解析。无法通过vm中的data数据，methods方法
	beforeCreate() {
		//bus有总线的意思
		Vue.prototype.$bus = this //安装全局事件总线
	},
})

全局事件总线（GlobalEventBus）

1. 一种组件间通信的方式，适用于任意组件间通信。

2. 安装全局事件总线：

   ```js

   new Vue({

      ......

      beforeCreate() {

         Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm

      },

       ......

   })

   ```

3. 使用事件总线：

        1. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的<span style="color:red">回调留在A组件自身。</span>

      ```js

      methods(){

        demo(data){......}

      }

      ......

      mounted() {

        this.$bus.$on('xxxx',this.demo)

      }

      ```

        2. 提供数据：```this.$bus.$emit('xxxx',数据)```

4. 最好在beforeDestroy钩子中，用$off去解绑<span style="color:red">当前组件所用到的</span>事件。

消息发布与订阅

需要数据的人订阅消息，提供数据的人发送消息。

School当中订阅消息

student发布消息

订阅消息中回调函数两个参数，一个是消息名，另一个是数据

 如果当前组件要被销毁就要取消订阅，通过id取消订阅，所以订阅的时候返回一个id并放在this里

消息订阅与发布（pubsub）

1.   一种组件间通信的方式，适用于任意组件间通信。

2. 使用步骤：

  •    1. 安装pubsub：```npm i pubsub-js```
  •    2. 引入: ```import pubsub from 'pubsub-js'```
  •    3. 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身
  •   methods(){
        demo(data){......}
      }
      ......
      mounted() {
        this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
      }
  •    4. 提供数据：```pubsub.publish('xxx',数据)```
  •    5. 最好在beforeDestroy钩子中，用```PubSub.unsubscribe(pid)```去取消订阅。

nextTick

$nextTick(回调函数)可以将回调延迟到下次 DOM 更新循环之后执行

1. 语法：```this.$nextTick(回调函数)```

2. 作用：在下一次 DOM 更新结束后执行其指定的回调。

3. 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

过渡与动画

Test.vue

<template>
	<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition name="hello" appear>
			<h1 v-show="isShow">你好啊！</h1>
		</transition>
	</div>
</template>

<script>
	export default {
		name:'Test',
		data() {
			return {
				isShow:true
			}
		},
	}
</script>

<style scoped>
	h1{
		background-color: orange;
	}

	.hello-enter-active{
		animation: atguigu 0.5s linear;
	}

	.hello-leave-active{
		animation: atguigu 0.5s linear reverse;
	}

	@keyframes atguigu {
		from{
			transform: translateX(-100%);
		}
		to{
			transform: translateX(0px);
		}
	}
</style>

Test2.vue

<template>
	<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition-group name="hello" appear>
			<h1 v-show="!isShow" key="1">你好啊！</h1>
			<h1 v-show="isShow" key="2">尚硅谷！</h1>
		</transition-group>
	</div>
</template>

<script>
	export default {
		name:'Test',
		data() {
			return {
				isShow:true
			}
		},
	}
</script>

<style scoped>
	h1{
		background-color: orange;
	}
	/* 进入的起点、离开的终点 */
	.hello-enter,.hello-leave-to{
		transform: translateX(-100%);
	}
	.hello-enter-active,.hello-leave-active{
		transition: 0.5s linear;
	}
	/* 进入的终点、离开的起点 */
	.hello-enter-to,.hello-leave{
		transform: translateX(0);
	}

</style>

 Test3.vue

<template>
	<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition-group 
			appear
			name="animate__animated animate__bounce" 
			enter-active-class="animate__swing"
			leave-active-class="animate__backOutUp"
		>
			<h1 v-show="!isShow" key="1">你好啊！</h1>
			<h1 v-show="isShow" key="2">尚硅谷！</h1>
		</transition-group>
	</div>
</template>

<script>
	import 'animate.css'
	export default {
		name:'Test',
		data() {
			return {
				isShow:true
			}
		},
	}
</script>

<style scoped>
	h1{
		background-color: orange;
	}
	

</style>

App.vue

<template>
	<div>
		<Test/>
		<Test2/>
		<Test3/>
	</div>
</template>

<script>
	import Test from './components/Test'
	import Test2 from './components/Test2'
	import Test3 from './components/Test3'

	export default {
		name:'App',
		components:{Test,Test2,Test3},
	}
</script>

 main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate() {
		Vue.prototype.$bus = this
	},
})

 Vue封装的过度与动画

1. 作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。

2. 图示：<img src="https://img04.sogoucdn.com/app/a/100520146/5990c1dff7dc7a8fb3b34b4462bd0105" style="width:60%" />

3. 写法：

   1. 准备好样式：

      - 元素进入的样式：

        1. v-enter：进入的起点

        2. v-enter-active：进入过程中

        3. v-enter-to：进入的终点

      - 元素离开的样式：

        1. v-leave：离开的起点

        2. v-leave-active：离开过程中

        3. v-leave-to：离开的终点

   2. 使用```<transition>```包裹要过度的元素，并配置name属性：

vue

      <transition name="hello">

         <h1 v-show="isShow">你好啊！</h1>

      </transition>

   3. 备注：若有多个元素需要过度，则需要使用：```<transition-group>```，且每个元素都要指定```key```值。

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

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

相关文章

Linux下C++开发笔记--g++命令

Linux下C++开发笔记--g++命令

目录 1--前言 2--开发环境搭建 3--g重要编译参数 4--实例 1--前言 最近学习在linux环境下进行C开发的基础知识&#xff0c;参考的教程是基于VSCode和CMake实现C/C开发 | Linux篇&#xff0c;非常适合小白入门学习。 2--开发环境搭建 ①安装gcc、g和gdb&#xff1a; sud…
阅读更多...
深度学习入门（三十七）计算性能——硬件（TBC）

深度学习入门（三十七）计算性能——硬件（TBC）

深度学习入门&#xff08;三十七&#xff09;计算性能——硬件&#xff08;CPU、GPU&#xff09;前言计算性能——硬件&#xff08;CPU、GPU&#xff09;课件电脑提升CPU利用率①提升CPU利用率②CPU VS GPU提升GPU利用率CPU/GPU带宽更多的CPU和GPUCPU/GPU高性能计算编程总结教材…
阅读更多...
SpringBoot整合dubbo（一）

SpringBoot整合dubbo（一）

第一次整合&#xff0c;使用无注册中心方式 一、首先&#xff0c;项目分为三个模块&#xff0c;如下图&#xff0c;dubbo-interface&#xff08;要发布的接口&#xff09;、dubbo-provider&#xff08;接口的具体实现&#xff0c;服务提供者&#xff09;、dubbo-consumer&#…
阅读更多...
【LeetCode-中等】63. 不同路径 II（详解）

【LeetCode-中等】63. 不同路径 II（详解）

题目 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish”&#xff09;。 现在考虑网格中有障碍物。那么从左上角到…
阅读更多...
VScode

VScode

VScode 下载 VScode&#xff1a;https://code.visualstudio.com/安装 汉化 Chinese (Simplified) 设置 背景色 Atom One Light Theme Color Theme 护眼色 "workbench.colorCustomizations": { // 设置背景颜色// "foreground": "#75a478",&…
阅读更多...
List详解

List详解

一、List&#xff08;列表&#xff09; 基本的数据类型&#xff0c;列表 在redis中&#xff0c;通过相应操作可以让list变成栈、队列、阻塞队列&#xff01; 在redis中所有的list命令都是以 l 开头的 添加值 将一个值或多个值&#xff0c;插入到列表尾部&#xff08;右&…
阅读更多...
深度学习之语义分割算法（入门学习）

深度学习之语义分割算法（入门学习）

>>>深度学习Tricks&#xff0c;第一时间送达<<< 目录 &#x1f4a1; 写在前面 一、前言 二、深度学习的图像分割分类 1.语义分割 2.实例分割 3.全景分割 三、语义分割的基本原理 四、语义分割的常用运算及评价指标 关于算法改进及论文投稿可关注并留…
阅读更多...
【附源码】Python计算机毕业设计寿险公司保险业务管理系统

【附源码】Python计算机毕业设计寿险公司保险业务管理系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…
阅读更多...
指令格式学习

指令格式学习

计算机的指令格式与机器的字长、存储器的容量及指令的功能都有很大的关系。从便于程序设计、增加基本操作并行性、提高指令功能的角度来看&#xff0c;指令中应包含多种信息。但在有些指令中&#xff0c;由于部分信息可能无用&#xff0c;这将浪费指令所占的存储空间&#xff0…
阅读更多...
python web服务windows管理工具

python web服务windows管理工具

故事背景是这样的。。。 客户需要一些小工具&#xff0c;作为一名开发者&#xff0c;很容易的就写完了。但是呢&#xff0c;客户没有服务器&#xff0c;只能部署在windows上。由于不再一起&#xff0c;维护一个web程序&#xff0c;有时候会有些折腾&#xff0c;所以&#xff0…
阅读更多...
Camunda 使用restapi

Camunda 使用restapi

参考&#xff1a;http://camunda-cn.shaochenfeng.com/reference/rest/task/get-query/ 这里我就举一个流程的例子&#xff1a; 以下接口&#xff0c;除了端口和参数&#xff0c;其他无需改动 POM&#xff1a; rest 就是接口 webapp 是网页 <dependency><groupId&…
阅读更多...
安全狗持续4年零失误实力守护金鸡颁奖典礼

安全狗持续4年零失误实力守护金鸡颁奖典礼

11月10日-12日&#xff0c;第35届中国电影金鸡奖颁奖相关活动顺利在厦门举办。 如果用电影的方式回看他们这几天的重保值守任务的话&#xff0c;会是怎么样的? PART 1 背景交代 距离第一次接到此客户的任务&#xff0c;时间已经过去4年。今年这次任务的开启得让时间倒退到5天之…
阅读更多...
el-tabs切换按钮定位不准确，部分内容被遮挡（前端vue实战踩坑记录）

el-tabs切换按钮定位不准确，部分内容被遮挡（前端vue实战踩坑记录）

在写项目的过程中&#xff0c;特别是vue项&#xff0c;我们最常用到的UI框架就是elementUI&#xff0c;现记录一个今天同事开发遇到的bug。 一、问题描述 页面跳转时&#xff0c;tabs切换按钮被遮挡展示不全&#xff0c;效果如图 正常情况下&#xff0c;右侧的用户后面的…应…
阅读更多...
kotlin函数

kotlin函数

一、Main函数 fun printHello() {println("Hello World")}printHello() Hello World在main的函数中&#xff0c;执行播放按钮&#xff0c;会编译执行&#xff0c;结果在下面显示&#xff1a; 1.1 Basic Task Create a new Kotlin file.Copy and paste the main()…
阅读更多...
Java中方法的注意事项

Java中方法的注意事项

C有函数&#xff0c;我们Java有方法&#xff01;实参和形参的关系方法重载public static早在初始Java的那一个博客&#xff0c;我好像就给兄弟们说过&#xff0c;在Java中我们把以前认识到的函数叫做是方法&#xff0c;那么如果单单是为了讲一下方法最基本的使用规则&#xff0…
阅读更多...
如何从0-1学习渗透测试？

如何从0-1学习渗透测试？

要成为一名渗透测试员&#xff0c;想从基础学习需要先掌握下面这3块&#xff1a;1、学习硬件和网络渗透测试主要涉及网络和部分涉及硬件。2、操作系统和系统架构操作系统和系统架构在渗透测试中起着关键作用。系统操作涉及x86&#xff08;32位&#xff09;和x64&#xff08;64位…
阅读更多...
稳定性实践:开关和预案

稳定性实践:开关和预案

在稳定性保障中&#xff0c;限流降级的技术方案&#xff0c;是针对服务接口层面的&#xff0c;也就是服务限流和服务降级。这里还有另外一个维度&#xff0c;就是业务维度&#xff0c;所以今天我们就从业务降级的维度来分享&#xff0c; 也就是开关和预案。 如何理解开关和预案…
阅读更多...
AI与轨交并行，智慧服务伴乘客出行

AI与轨交并行，智慧服务伴乘客出行

“欢迎来到智能客服中心” “请选择您需要的服务” 大部分乘客在地铁站厅总能听见这样的提示音 而发出提示音的 正是智慧升级过后的地铁智能客服服务中心 地铁作为承载万千群众出行的工具 近年客流呈飞速增长态势 因此&#xff0c;轨道交通行业也正积极进行智慧化转型 …
阅读更多...
C语言百日刷题第八天

C语言百日刷题第八天

前言 今天是刷题第8天&#xff0c;放弃不难&#xff0c;但坚持一定很酷~ 快来跟我一起刷题吧。刷题第八天目录前言71.打印7层杨辉三角形72.重新排列数组73.冒泡排序74.将数字变成0的操作次数75.四叶玫瑰数71.打印7层杨辉三角形 打印7层杨辉三角形 图案如下&#xff1a; 这个…
阅读更多...
外企面试中的7 个 Android Lifecycle 重要的知识点

外企面试中的7 个 Android Lifecycle 重要的知识点

习惯性的每天都会打开 medium 看一下技术相关的内容&#xff0c;偶然看到一位大佬分享和 Android Lifecycle 相关的面试题&#xff0c;觉得非常的有价值。 在 Android 开发中 Android Lifecycle 是非常重要的知识点。但是不幸的是&#xff0c;我发现很多新的 Android 开发对 A…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023