Vue快速实践总结 · 下篇

文章目录

  • 组件间通信方式
    • 父 --> 子通信
      • props
      • 插槽
    • 子 --> 父通信(自定义事件)
    • 任意组件通信
      • 全局事件总线
      • 消息订阅与发布
  • Vuex
    • 工作原理
    • 运行环境
    • 简单使用
    • Getters
    • mapState与mapGetters
    • mapActions与mapMutations
    • 模块化 + 命名空间
  • VueRouter
    • 路由的作用与分类
    • Vue中的路由注意点
    • 基本使用
    • 路由传参
      • query传参
      • param传参

组件间通信方式

父 --> 子通信

props

功能:让组件接收外部传过来的数据

传递数据:<Demo name="xxx"/>

接收数据:

  • 第一种方式(只接收):props:['name']

  • 第二种方式(限制类型):props:{name:String}

  • 第三种方式(限制类型、限制必要性、指定默认值):

props:{name:{type:String, //类型required:true, //必要性default:'老王' //默认值}
}

备注:props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去修改data中的数据。

插槽

props是让父组件向子组件传递数据,而插槽就是让父组件向子组件传递html结构

  1. 作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于 父组件 ===> 子组件

  2. 分类:默认插槽、具名插槽、作用域插槽

  3. 使用方式:

    1. 默认插槽:

      父组件中:<Category><div>html结构1</div></Category>
      子组件中:<template><div><!-- 定义插槽 --><slot>插槽默认内容...</slot></div></template>
      
    2. 具名插槽:

      父组件中:<Category><template slot="center"><div>html结构1</div></template><template v-slot:footer><div>html结构2</div></template></Category>
      子组件中:<template><div><!-- 定义插槽 --><slot name="center">插槽默认内容...</slot><slot name="footer">插槽默认内容...</slot></div></template>
      
    3. 作用域插槽:

      1. 理解:数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定。(games数据在Category组件中,但使用数据所遍历出来的结构由App组件决定)

      2. 具体编码:

        父组件中:<Category><template scope="scopeData"><!-- 生成的是ul列表 --><ul><li v-for="g in scopeData.games" :key="g">{{g}}</li></ul></template></Category><Category><template slot-scope="scopeData"><!-- 生成的是h4标题 --><h4 v-for="g in scopeData.games" :key="g">{{g}}</h4></template></Category>
        子组件中:<template><div><slot :games="games"></slot></div></template><script>export default {name:'Category',props:['title'],//数据在子组件自身data() {return {games:['红色警戒','穿越火线','劲舞团','超级玛丽']}},}</script>
        

子 --> 父通信(自定义事件)

如果父组件要向子组件传递数据,我们可以使用props。而如果子组件要向父组件传递数据,我们可以先在父组件中定义好方法,使用props传递给子组件,然后让子组件去调用它

我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface),即:

使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件
另外,父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

绑定事件的两种方式:

方式一:

<SchoolName :getSchoolName="getSchoolName"></SchoolName>
<StudentName v-on:stuName="getStudentName"></StudentName>

方式二:

<StudentName ref="Student"></StudentName>
mounted() {this.$refs.Student.$on('stuName',this.getStudentName)
}

触发事件:

		methods:{studentNameGetter(name){// 触发Student组件实例身上的stuName事件this.$emit('stuName',name)}}

解绑自定义事件this.$off(‘eventName’)

任意组件通信

在实际开发中基本很少使用到下面的两种办法去实现任意组件通信,通常是使用集中的状态管理插件来达到同样的效果,例如Vuex。所以下面的方法了解即可。

全局事件总线

此方法一般用的少,想要深入了解可以直接参考我的另一篇文章全局事件总线

消息订阅与发布

需要借助第三方库,例如pubsub.js
可以参考我的文章消息订阅与发布

Vuex

专门在 Vue 中实现集中式状态管理的一个 Vue 插件,对 vue 应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。

使用场景:

  • 多个组件依赖于同一状态
  • 来自不同组件的行为需要变更同一状态

工作原理

在这里插入图片描述
Vuex 的工作原理是这样的:

  • Vuex 的核心是 store(仓库),它是一个包含了应用状态和操作状态的方法的对象。
  • Vuex 的状态存储是响应式的,当 Vue 组件从 store 中读取状态时,如果 store 中的状态发生变化,那么相应的组件也会自动更新²。
  • Vuex 的状态不能直接修改,只能通过提交 mutation 来改变,这样可以方便地跟踪每个状态的变化,以及实现一些调试工具。
  • Vuex 还提供了 action 来处理异步操作,它可以通过 dispatch 来触发,然后在 action 中提交 mutation 来改变状态。
  • 如果我们没有异步操作的时候,这个action就显得有点多余,所以Vuex允许我们在确定值的情况下,在组件中可以直接使用commit()将东西传递给mutations
  • Vuex中的这三个部分都要经过store的领导,前面调用的dispatch方法是它身上的,commit方法也是它身上的。
    在这里插入图片描述
  • 其实我们可以通过生活中的例子去理解这个过程:组件相当于客人,Actions相当于服务员,mutations相当于后厨,state相当于菜。客人进门张嘴说话点菜,这个说话就相当于dispatch,服务员记录提交给后厨,也就对应着commit。后厨再去做菜,把菜端上来给客人。而如果客人足够熟悉(也就是明确行为内容)就可以直接跟后厨进行对话,不需要服务员的引导。
    在这里插入图片描述

运行环境

npm i vuex

注意:

  • 现在vue3成为了默认版本,所以我们使用如上的命令安装的是vuex的4版本
  • vue2中,要用vuex的3版本
  • vue3中,要用vuex的4版本
  • 如果你使用的是vue2,那么你安装vuex的命令为:npm i vuex@3

然后我们在main.js中引入,并使用use来使用这个插件:

import Vuex from 'vuex'Vue.use(Vuex)

完成了上面的步骤之后,我们就可以在创建vm(或者组件实例对象vc)的时候传入一个store配置项,这个配置项在vm(或者组件实例对象vc)中体现为$store。

接下来最关键的一步:我们要创建这个store。我们单独把它写在一个js文件中。

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'//准备actions——用于响应组件中的动作
const actions = {}
//准备mutations——用于操作数据(state)
const mutations = {}
//准备state——用于存储数据
const state = {}Vue.use(Vuex)//创建并暴露store
export default new Vuex.Store({actions,mutations,state,
})
import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falseimport Vuex from 'vuex'
import store from 'store/index'new Vue({render: h => h(App),store
}).$mount('#app')

这样我们的引入工作就做完了。

简单使用

看一个例子:

<template><div><h1>当前求和为:{{$store.state.sum}}</h1><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment">+</button><button @click="decrement">-</button><button @click="incrementOdd">当前求和为奇数再加</button><button @click="incrementWait">等一等再加</button></div>
</template><script>export default {name:'MyCount',data() {return {n:1, //用户选择的数字}},methods: {increment(){this.$store.commit('JIA',this.n)},decrement(){this.$store.commit('JIAN',this.n)},incrementOdd(){this.$store.dispatch('jiaOdd',this.n)},incrementWait(){this.$store.dispatch('jiaWait',this.n)},},mounted() {console.log('Count',this)},}
</script><style lang="css">button{margin-left: 5px;}
</style>
//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)//准备actions——用于响应组件中的动作
const actions = {jiaOdd(context,value){console.log('actions中的jiaOdd被调用了')if(context.state.sum % 2){context.commit('JIA',value)}},jiaWait(context,value){console.log('actions中的jiaWait被调用了')setTimeout(()=>{context.commit('JIA',value)},500)}
}
//准备mutations——用于操作数据(state)
const mutations = {JIA(state,value){console.log('mutations中的JIA被调用了')state.sum += value},JIAN(state,value){console.log('mutations中的JIAN被调用了')state.sum -= value}
}
//准备state——用于存储数据
const state = {sum:0 //当前的和
}//创建并暴露store
export default new Vuex.Store({actions,mutations,state,
})

注意点:

  • 在模板中呈现共享数据,要在$store中的state对象中去寻找
  • context代表上下文,你也可以把它理解成一个mini版的store,通过它我们可以拿到store、commit到mutations中去
  • mutations中的方法,名字一般全部大写,这样是为了与actions中的方法区分开来
  • 我们一般在actions中写事务逻辑,mutations中不会涉及事务逻辑的处理

Getters

相当于Store中的计算属性,不过我们的方法中会传入一个参数state。

在这里插入图片描述
然后我们读取的时候:

<template><div><h1>当前求和为:{{$store.state.sum}}</h1><h3>当前求和放大10倍为:{{$store.getters.bigSum}}</h3></div>
</template>

mapState与mapGetters

mapState 和 mapGetters 都是 Vuex 中的辅助函数,用于简化组件中对 store 中的状态和计算属性的访问

  • mapState 可以将 store 中的 state 映射到组件的计算属性中,这样就可以在组件中直接使用 state 中的数据,而不需要通过 this.$store.state.name 的方式。mapState 可以接受一个数组或一个对象作为参数,分别表示要映射的 state 的属性名或别名。
  • mapGetters 可以将 store 中的 getters 映射到组件的计算属性中,这样就可以在组件中直接使用 getters 中的数据,而不需要通过 this.$store.getters.name 的方式。mapGetters 可以接受一个数组或一个对象作为参数,分别表示要映射的 getters 的属性名或别名。

以下是 mapState 和 mapGetters 的用法示例¹:

// 在 store 中定义 state 和 getters
const store = new Vuex.Store({state: {count: 0,todos: [{ id: 1, text: "todo1", done: true },{ id: 2, text: "todo2", done: false },],},getters: {doneTodos: (state) => {return state.todos.filter((todo) => todo.done);},doneTodosCount: (state, getters) => {return getters.doneTodos.length;},},
});// 在组件中使用 mapState 和 mapGetters
import { mapState, mapGetters } from "vuex";export default {// 使用对象展开运算符将 mapState 和 mapGetters 的结果混入 computed 对象中computed: {// 使用数组语法映射 state 和 getters...mapState(["count"]),...mapGetters(["doneTodos", "doneTodosCount"]),// 使用对象语法映射 state 和 getters,并使用别名...mapState({countAlias: (state) => state.count,}),...mapGetters({doneCountAlias: "doneTodosCount",}),},
};

mapActions与mapMutations

mapActions 和 mapMutations 都是 Vuex 中的辅助函数,用于简化组件中对 store 中的 actions 和 mutations 的访问

  • mapActions 可以将 store 中的 actions 映射到组件的 methods 中,这样就可以在组件中直接调用 actions 中的方法,而不需要通过 this.$store.dispatch(name, payload) 的方式。mapActions 可以接受一个数组或一个对象作为参数,分别表示要映射的 actions 的方法名或别名。
  • mapMutations 可以将 store 中的 mutations 映射到组件的 methods 中,这样就可以在组件中直接调用 mutations 中的方法,而不需要通过 this.$store.commit(name, payload) 的方式。mapMutations 可以接受一个数组或一个对象作为参数,分别表示要映射的 mutations 的方法名或别名。

以下是 mapActions 和 mapMutations 的用法示例:

// 在 store 中定义 actions 和 mutations
const store = new Vuex.Store({state: {count: 0,},actions: {incrementAsync({ commit }) {setTimeout(() => {commit("increment");}, 1000);},},mutations: {increment(state) {state.count++;},},
});// 在组件中使用 mapActions 和 mapMutations
import { mapActions, mapMutations } from "vuex";export default {// 使用对象展开运算符将 mapActions 和 mapMutations 的结果混入 methods 对象中methods: {// 使用数组语法映射 actions 和 mutations...mapActions(["incrementAsync"]),...mapMutations(["increment"]),// 使用对象语法映射 actions 和 mutations,并使用别名...mapActions({add: "incrementAsync",}),...mapMutations({addOne: "increment",}),},
};

我们来看一个完整使用的例子:

<template><div><h1>当前求和为:{{sum}}</h1><h1>当前求和放大10倍为:{{bigSum}}</h1><h1>学生姓名:{{student}}</h1><h1>学校名称:{{school}}</h1><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment(n)">+</button><button @click="decrement(n)">-</button><button @click="incrementOdd(n)">当前求和为奇数再加</button><button @click="incrementWait(n)">等一等再加</button></div>
</template><script>import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'export default {name:'MyCount',data() {return {n:1, //用户选择的数字}},computed:{...mapState({sum:'sum',school:'school',student:'student'}),...mapGetters(['bigSum']),},methods: {...mapMutations({increment:'JIA',decrement:'JIAN'}),...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),},}
</script><style lang="css">button{margin-left: 5px;}
</style>

注意:

  • mapActions与mapMutations使用时,若需要传递参数需要:在模板中绑定事件时传递好参数,否则参数是事件对象

模块化 + 命名空间

那就是多个组件的代码都放在了唯一的actions、mutations、state、getters中,我们前面的案例中只涉及到了两个组件,但是如果我们有几百个几千个组件,这些代码全部堆积到一起,会非常的繁杂。所以我们想对他进行一个分类,将各组件的代码分离开来。

我们将每个模块的store分开放,最后在index文件中进行引入就行,我们来看一个例子:

count.js

//求和相关的配置
export default {namespaced:true,actions:{jiaOdd(context,value){console.log('actions中的jiaOdd被调用了')if(context.state.sum % 2){context.commit('JIA',value)}},jiaWait(context,value){console.log('actions中的jiaWait被调用了')setTimeout(()=>{context.commit('JIA',value)},500)}},mutations:{JIA(state,value){console.log('mutations中的JIA被调用了')state.sum += value},JIAN(state,value){console.log('mutations中的JIAN被调用了')state.sum -= value},},state:{sum:0, //当前的和school:'尚硅谷',subject:'前端',},getters:{bigSum(state){return state.sum*10}},
}

person.js:

//人员管理相关的配置
import axios from 'axios'
import { nanoid } from 'nanoid'
export default {namespaced:true,actions:{addPersonWang(context,value){if(value.name.indexOf('王') === 0){context.commit('ADD_PERSON',value)}else{alert('添加的人必须姓王!')}},addPersonServer(context){axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(response => {context.commit('ADD_PERSON',{id:nanoid(),name:response.data})},error => {alert(error.message)})}},mutations:{ADD_PERSON(state,value){console.log('mutations中的ADD_PERSON被调用了')state.personList.unshift(value)}},state:{personList:[{id:'001',name:'张三'}]},getters:{firstPersonName(state){return state.personList[0].name}},
}

index.js

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
import countOptions from './count'
import personOptions from './person'
//应用Vuex插件
Vue.use(Vuex)//创建并暴露store
export default new Vuex.Store({modules:{countAbout:countOptions,personAbout:personOptions}
})

组件中使用:

		computed:{//借助mapState生成计算属性,从state中读取数据。(数组写法)...mapState('countAbout',['sum','school','subject']),...mapState('personAbout',['personList']),//借助mapGetters生成计算属性,从getters中读取数据。(数组写法)...mapGetters('countAbout',['bigSum'])},methods: {//借助mapMutations生成对应的方法,方法中会调用commit去联系mutations(对象写法)...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),//借助mapActions生成对应的方法,方法中会调用dispatch去联系actions(对象写法)...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})},

注意:

  • 命名空间一定要设置为true

最后总结一下:
模块化+命名空间

  1. 目的:让代码更好维护,让多种数据分类更加明确。

  2. 修改store.js

    const countAbout = {namespaced:true,//开启命名空间state:{x:1},mutations: { ... },actions: { ... },getters: {bigSum(state){return state.sum * 10}}
    }const personAbout = {namespaced:true,//开启命名空间state:{ ... },mutations: { ... },actions: { ... }
    }const store = new Vuex.Store({modules: {countAbout,personAbout}
    })
    
  3. 开启命名空间后,组件中读取state数据:

    //方式一:自己直接读取
    this.$store.state.personAbout.list
    //方式二:借助mapState读取:
    ...mapState('countAbout',['sum','school','subject']),
    
  4. 开启命名空间后,组件中读取getters数据:

    //方式一:自己直接读取
    this.$store.getters['personAbout/firstPersonName']
    //方式二:借助mapGetters读取:
    ...mapGetters('countAbout',['bigSum'])
    
  5. 开启命名空间后,组件中调用dispatch

    //方式一:自己直接dispatch
    this.$store.dispatch('personAbout/addPersonWang',person)
    //方式二:借助mapActions:
    ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
    
  6. 开启命名空间后,组件中调用commit

    //方式一:自己直接commit
    this.$store.commit('personAbout/ADD_PERSON',person)
    //方式二:借助mapMutations:
    ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
    

VueRouter

路由的作用与分类

路由在前端开发中的作用是指根据不同的 URL 地址,显示不同的页面或组件,从而实现单页应用的功能。路由可以让前端开发者更方便地管理和切换页面或组件,提高用户体验和开发效率。

单页应用:整个应用只有一个完整的页面。点击页面中的导航链接不会刷新页面,只会做页面的局部更新
在这里插入图片描述

路由的基本原理是通过监听 URL 的变化,匹配相应的路由规则,然后动态地渲染或更新页面或组件

路由可以分为两种模式:hash 模式和 history 模式。

  • hash 模式是利用 URL 中的 hash(#)部分,来存储不同的路由信息。当 hash 发生变化时,浏览器不会重新加载页面,而是触发 hashchange 事件,路由程序可以根据新的 hash 值来渲染或更新页面或组件。hash 模式的优点是兼容性好,缺点是 URL 不美观,且不能使用浏览器的前进后退按钮。
  • history 模式是利用 HTML5 中的 history API,来操作浏览器的历史记录。当 URL 发生变化时,浏览器不会重新加载页面,而是触发 popstate 事件,路由程序可以根据新的 URL 值来渲染或更新页面或组件。history 模式的优点是 URL 美观,且可以使用浏览器的前进后退按钮,缺点是需要后端的支持,以防止刷新页面时出现 404 错误。

Vue中的路由注意点

我们开发时将一般组件和路由组件分成两个文件夹放:

  • pages文件夹放路由组件
    • 由路由器进行渲染的组件叫做路由组件
  • component文件夹放一般组件
    • 我们自己去写标签的组件叫做一般组件

每个路由组件身上多了两个属性:

  • $route
  • $router

每个组件都有自己的$route属性,里面存储着自己的路由信息。

整个应用只有一个router,可以通过组件的$router属性获取到。

基本使用

<template><div><div class="row"><Banner/></div><div class="row"><div class="col-xs-2 col-xs-offset-2"><div class="list-group"><!-- Vue中借助router-link标签实现路由的切换 --><router-link class="list-group-item" active-class="active" to="/about">About</router-link><router-link class="list-group-item" active-class="active" to="/home">Home</router-link></div></div><div class="col-xs-6"><div class="panel"><div class="panel-body"><!-- 指定组件的呈现位置 --><router-view></router-view></div></div></div></div></div>
</template><script>import Banner from './components/Banner'export default {name: 'App',components: {Banner}}
</script>

然后要专门用一个文件来配置路由规则:

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'//创建并暴露一个路由器
export default new VueRouter({routes:[{path:'/about',component:About},{path:'/home',component:Home,children:[  //通过children配置子级路由{path:'news',   //此处一定不要写:/newscomponent:News,},{path:'message',  //此处一定不要写:/messagecomponent:Message,}]}]
})

路由传参

query传参

传递参数:

<!-- 跳转并携带query参数,to的字符串写法 -->
<router-link :to="`/home/message/detail?id=666&title=你好`">跳转</router-link><!-- 跳转并携带query参数,to的对象写法 -->
<router-link :to="{path:'/home/message/detail',query:{id:666,title:'你好'}}"
>跳转</router-link>

接收参数:

$route.query.id
$route.query.title

param传参

配置路由:

{path:'/home',component:Home,children:[{path:'news',component:News},{component:Message,children:[{name:'xiangqing',path:'detail/:id/:title', //使用占位符声明接收params参数component:Detail}]}]
}

传递参数:

<!-- 跳转并携带params参数,to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link><!-- 跳转并携带params参数,to的对象写法 -->
<router-link :to="{name:'xiangqing',params:{id:666,title:'你好'}}"
>跳转</router-link>

特别注意:路由携带params参数时,若使用to的对象写法,则不能使用path配置项,必须使用name配置,也就是说命名路由!

接收参数

$route.params.id
$route.params.title

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

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

相关文章

编写算法,对n个关键字取整数值的记录序列进行整理。以使所有关键字为负值的记录排在关键字为非负值的记录之前

编写算法&#xff0c;对n个关键字取整数值的记录序列进行整理。以使所有关键字为负值的记录排在关键字为非负值的记录之前&#xff0c;要求&#xff1a; &#xff08;1&#xff09;采用顺序存储结构&#xff0c;至少使用一个记录的辅助存储空间 &#xff08;2&#xff09;算法的…

自动驾驶DCLC 功能规范

目录 1 概述Summary....................................................................................................... 4 1.1 目的Purpose....................................................................................................... 4 1.2 范围Ran…

mysql迁移到sqlserver数据库,真的超级简单

这是微软官方步骤 需要注意的地方在连接mysql时&#xff0c;如果没有驱动&#xff0c; 那记得更换SSMAforMySQL X86的版本 工具下载地址&#xff08;点击download后会弹出选项的&#xff09;&#xff1a;Download Microsoft SQL Server Migration Assistant for MySQL from Of…

数字孪生3D场景开发工具:弥补不足,开拓全新可能

随着数字化时代的来临&#xff0c;越来越多的企业和行业开始探索数字孪生技术的应用。数字孪生是指通过数字技术将现实世界中的物体、场景等复制到虚拟世界中&#xff0c;以实现实时监测、预测和优化。然而&#xff0c;在数字孪生的发展过程中&#xff0c;一些不足也逐渐浮现。…

web前端tips:js继承——寄生组合式继承

上篇文章给大家分享了 js继承中的 寄生式继承 web前端tips&#xff1a;js继承——寄生式继承 今天给大家分享一下 js 继承中的 寄生组合式继承 寄生组合式继承 寄生组合式继承是一种结合了寄生式继承和组合式继承的方式&#xff0c;它的目标是减少组合式继承中多余的调用父…

【ArcGIS Pro二次开发】(78):批量合并GDB数据库

有些GDB数据库会按分幅或行政区划进行分开储存&#xff0c;尤其是一些地形测绘或国情地理数据。 如下图所示&#xff1a; 数据是完整的&#xff0c;但使用的时候要一个一个拖进地图中&#xff0c;进行分析的时候也需要将其合并后使用。 因此就做了这个合库工具。 一、要实现的…

Peter算法小课堂—高精度乘法

给大家看个小视频13 高精度算法 乘法_哔哩哔哩_bilibili 乘法竖式 大家觉得Plan A好&#xff0c;还是Plan B好呢&#xff08;对于计算机来说&#xff09;&#xff1f;那显然是B啦 x*y问题 mul思路&#xff1a;mul()函数返回x数组乘y数组的积&#xff0c;保存在z数组。根据上…

聚焦清晰度评价指标所用到的各种算法

首先&#xff0c;我想吐槽一下&#xff0c;看了好几篇聚焦评价函数的文章&#xff0c;说到底都是一篇文章转载或者重复上传&#xff0c;介绍了将近 15 种清晰度的算法&#xff0c;原文找了半天都没找到在哪&#xff0c;最多也仅能找到一些比较早的转载。 无参考图像的清晰度评…

学习笔记小结

redis-cluster集群 redis3.0引入的分布式存储方案 集群由多个node节点组成&#xff0c;redis数据分布在这些节点当中。 在集群之中分为主节点和从节点 集群模式当中&#xff0c;主从一一对应&#xff0c;数据的写入和读取与主从模式一样&#xff0c;主负责写&#xff0c;从…

暗物质:揭秘宇宙的隐形奥秘

暗物质:揭秘宇宙的隐形奥秘 一、引言 在浩瀚的宇宙中,有一种神秘的存在,它虽然看不见、摸不着,但却对宇宙的结构和演化起着至关重要的作用。这种存在就是暗物质。暗物质的研究是天文学和物理学领域的热点之一,科学家们正在利用各种手段来揭示它的奥秘。在本文中,我们将一…

【Linux】:信号(一)产生

信号 一.前台进程和后台进程1.前台进程2。后台进程3.总结 二.自定义信号动作接口三.信号的产生1.键盘组合键2.kill信号进程pid3.系统调用1.kill函数2.raise函数3.abort函数 四.异常五.软件条件六.core文件 一.前台进程和后台进程 1.前台进程 一个简单的代码演示 像这种程序在…

字符串函数-C语言

介绍 字符串函数&#xff0c;简单说&#xff0c;就是处理字符串的函数&#xff0c;头文件是string.h&#xff0c;以下是今天的讲解中会讲到的一系列字符串函数 头文件&#xff1a;#include<string.h>strlen&#xff1a;求字符串长度strcpy&#xff1a;拷贝字符串strcat&…