Vue | （五）使用Vue脚手架（中）| 尚硅谷Vue2.0+Vue3.0全套教程

文章目录

  • 📚Todo-list 案例
    • 🐇组件化编码流程（通用）
    • 🐇实现静态组件
    • 🐇展示动态数据
    • 🐇交互
      • ⭐️添加一个todo
      • ⭐️todo勾选实现
      • ⭐️删除功能实现
      • ⭐️底部统计功能实现
      • ⭐️底部全选功能实现
      • ⭐️底部一键清除功能实现
  • 📚案例小结
  • 📚浏览器本地存储
  • 📚TodoList本地存储

学习链接：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通，本文对应p70-p79，博客参考尚硅谷公开笔记，补充记录实操。

📚Todo-list 案例

🐇组件化编码流程（通用）

  1. 实现静态组件：抽取组件，使用组件实现静态页面效果。
  2. 展示动态数据：
    • 数据的类型、名称是什么？
    • 数据保存在哪个组件？
  3. 交互——从绑定事件监听开始。

🐇实现静态组件

在这里插入图片描述

  • 组件名：不要和原有标签名冲突（不管大小写，例如Header），开发中也一般不用MyHeader，Vue鼓励采用UserHeade.vue类似命名。

  • 注册好先搭结构，链接好层级关系（关注地址的正确链接）

    <!-- App.vue -->
<script>import UserHeader from './components/UserHeader.vue'import UserList from './components/UserList'import UserFooter from './components/UserFooter'export default {name:'App',components:{UserHeader,UserList,UserFooter}}
</script>

    <!-- UserList.vue -->
<script>import UserItem from '../components/UserItem'export default {name:'UserList',components:{UserItem}}
</script>

  • 样式套用：

    • 先都放到App.vue里，然后再拆，先拆结构，再拆样式。
    • 拆结构的时候，App.vue里的结构剪切后，要连带着补上标签，防忘。
    • 拆样式的时候，在特定vue对应样式可补上scoped，放冲突。
      在这里插入图片描述

在这里插入图片描述

🐇展示动态数据

  • 数据的类型、名称是什么？ 一堆数据用数组，每个数据里的属性用对象。
    在这里插入图片描述
  • 数据保存在哪个组件？ 那个组件要展示就给谁，即谁用给谁——UserList。
  • 【重要】链接上数据发送:demo='xxx'和接收props:[demo]。
  • UserList.vue关键部分
    <template><ul class="todo-main"><UserItem v-for="todoObj in todos" :key="todoObj.id" :fasong="todoObj"></UserItem></ul>
</template><script>import UserItem from '../components/UserItem.vue'export default {name:'UserList',components:{UserItem},data(){return{todos:[{id:'001',title:'吃早饭',done:true},{id:'002',title:'睡午觉',done:false},{id:'003',title:'散散步',done:true},]}}}
</script>
  • UserItem.vue关键部分
    <template><li><label><input type="checkbox" :checked="fasong.done"/><span>{{fasong.title}}</span></label><button class="btn btn-danger" style="display:none">删除</button></li>
</template><script>export default {name:'UserItem',// 声明接收发送内容props:['fasong']}
</script>
  • 目前的设置是数据都放List且暂时还都合理。
    在这里插入图片描述

🐇交互

⭐️添加一个todo

  • id自动生成借助nanoid库
    在这里插入图片描述
  • 遇到的问题：按暂时的知识量，兄弟vue（header和list）之间的数据传输很难办——解决办法：把数据交给“爹”App.vue。具体通过爹提前给儿传一个函数（props也可以传函数），然后儿把数据借助函数传给爹实现。
    在这里插入图片描述在这里插入图片描述

  • UserList.vue关键部分

    <template><ul class="todo-main"><UserItem v-for="todoObj in todos" :key="todoObj.id" :fasong="todoObj"></UserItem></ul>
</template><script>import UserItem from '../components/UserItem.vue'export default {name:'UserList',components:{UserItem},props:['todos']}
</script>

  • UserHeader.vue关键部分

    <template><div class="todo-header"><input type="text" placeholder="请输入你的任务名称，按回车键确认" @keyup.enter="add"/></div>
</template><script>import {nanoid} from 'nanoid'export default {name:'UserHeader',props:['addTodo'],methods:{add(e){// 将用户输入包装成为一个todo对象const todoObj = {id:nanoid(),title:e.target.value,done:false}this.addTodo(todoObj)}}}
</script>

  • App.vue关键部分

    <template><div id="root"><div class="todo-container"><div class="todo-wrap"><UserHeader :addTodo="addTodo"></UserHeader><UserList :todos="todos"></UserList><UserFooter></UserFooter></div></div></div>
</template><!-- App.vue -->
<script>import UserHeader from './components/UserHeader.vue'import UserList from './components/UserList'import UserFooter from './components/UserFooter'export default {name:'App',components:{UserHeader,UserList,UserFooter},data(){return{todos:[{id:'001',title:'吃早饭',done:true},{id:'002',title:'睡午觉',done:false},{id:'003',title:'散散步',done:true},]}},methods:{addTodo(todoObj){this.todos.unshift(todoObj)}}}
</script>

在这里插入图片描述

  • 进一步完善：添加完后输入框清空。
    add(e){// 将用户输入包装成为一个todo对象const todoObj = {id:nanoid(),title:e.target.value,done:false}this.addTodo(todoObj)e.target.value = ''
}

在这里插入图片描述

在这里插入图片描述

  • 进一步完善：输入框必须有输入才能提交，这里不借助event，而是通过v-model完成数据读取。
    <template><div class="todo-header"><input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="title" @keyup.enter="add"/></div>
</template><script>import {nanoid} from 'nanoid'export default {name:'UserHeader',props:['addTodo'],methods:{add(){// 校验数据if(!this.title) return alert('输入不能为空')// 将用户输入包装成为一个todo对象const todoObj = {id:nanoid(),title:this.title,done:false}// 通知APP组件去添加一个todo对象this.addTodo(todoObj)// 清空输入this.title = ''}}}
</script>
    • 这时会出现以下警告，而且清空失效。在这里插入图片描述
    • 修改（给title定义）
      <script>import {nanoid} from 'nanoid'export default {name:'UserHeader',props:['addTodo'],data(){return{title:""}},methods:{add(){// 校验数据if(!this.title) return alert('输入不能为空')// 将用户输入包装成为一个todo对象const todoObj = {id:nanoid(),title:this.title,done:false}// 通知APP组件去添加一个todo对象this.addTodo(todoObj)// 清空输入this.title = ''}}}
</script>

在这里插入图片描述

在这里插入图片描述

  • 其他注意点：函数命名不能重复（add、addtodo）。

⭐️todo勾选实现

  • 现在可以勾选，但是vue实际的数据是没有变化的。
    在这里插入图片描述
  • 关键点：
    • 数据在哪，关于数据的操作就在哪——在App.vue里定义函数。
    • App.vue对Item.vue是爷爷对孙子的关系，相关传输要先给他爸List.vue，再由他爸给他（现阶段）。
  • UserItem.vue关键代码
    <template><li><label><input type="checkbox" :checked="fasong.done" @change="handleCheck(fasong.id)"/><span>{{fasong.title}}</span></label><button class="btn btn-danger" style="display:none">删除</button></li>
</template><script>export default {name:'UserItem',// 声明接收发送内容props:['fasong','checkTodo'],methods:{handleCheck(id){// 通知App组件将对应的todo对象的done值取反this.checkTodo(id)}}}
</script>
  • UserList.vue关键代码
    <template><ul class="todo-main"><UserItem v-for="todoObj in todos" :key="todoObj.id" :fasong="todoObj" :checkTodo="checkTodo"></UserItem></ul>
</template><script>import UserItem from '../components/UserItem.vue'export default {name:'UserList',components:{UserItem},props:['todos','checkTodo']}
</script>
  • App.vue关键代码
    <template><div id="root"><div class="todo-container"><div class="todo-wrap"><UserHeader :addTodo="addTodo"></UserHeader><UserList :todos="todos" :checkTodo="checkTodo"></UserList><UserFooter></UserFooter></div></div></div></template><!-- App.vue -->
<script>import UserHeader from './components/UserHeader.vue'import UserList from './components/UserList'import UserFooter from './components/UserFooter'export default {name:'App',components:{UserHeader,UserList,UserFooter},data(){return{todos:[{id:'001',title:'吃早饭',done:true},{id:'002',title:'睡午觉',done:false},{id:'003',title:'散散步',done:true},]}},methods:{// 数据在哪，对数据的操作就在哪// 添加一个todoaddTodo(todoObj){this.todos.unshift(todoObj)},// 勾选or取消勾选一个todocheckTodo(id){this.todos.forEach((todo)=>{if(todo.id === id) todo.done = !todo.done})}}}
</script>

在这里插入图片描述在这里插入图片描述

  • 用v-model实现：就是在上一个功能实现的基础上，忽略本功能实现的之前代码，只将:checked="fasong.done"改为v-model="fasong.done" ，但这里已经和视频有出入，即vue版本更新后，这个方法不可行，会报错（本质是props只读）：
    在这里插入图片描述

⭐️删除功能实现

  • 在Item里加一个鼠标悬浮效果
    li:hover{background-color: #ddd 
}
    在这里插入图片描述
  • 让删除按钮悬浮出现：结构里的内联stylestyle="display:none"删掉，添加悬浮条件（前边默认设置为none）
    li:hover button{display: block;
}
    在这里插入图片描述
  • 交互实现：点击按钮，拿到id，把对应id的事件删除。
    • 这里依旧注意函数名称设置问题，不要用默认名称，会混乱会报错！
    • 依旧是App.vue对Item.vue是爷爷对孙子的关系，相关传输要先给他爸List.vue，再由他爸给他（现阶段）

  • UserItem.vue关键代码

    <template><li><label><input type="checkbox" :checked="fasong.done" @change="handleCheck(fasong.id)"/><span>{{fasong.title}}</span></label><button class="btn btn-danger" @click="handleDelete(fasong.id)">删除</button></li>
</template><script>export default {name:'UserItem',// 声明接收发送内容props:['fasong','checkTodo','deleteTodo'],methods:{// 勾选or取消勾选handleCheck(id){// 通知App组件将对应的todo对象的done值取反this.checkTodo(id)},// 删除handleDelete(id){if(confirm('确定删除吗？')){// 通知App组件删除this.deleteTodo(id)}}}}
</script>

  • UserList.vue关键代码

    <template><ul class="todo-main"><UserItem v-for="todoObj in todos" :key="todoObj.id" :fasong="todoObj" :checkTodo="checkTodo":deleteTodo="deleteTodo"></UserItem></ul>
</template><script>import UserItem from '../components/UserItem.vue'export default {name:'UserList',components:{UserItem},props:['todos','checkTodo','deleteTodo']}
</script>

  • App.vue关键代码

    <template><div id="root"><div class="todo-container"><div class="todo-wrap"><UserHeader :addTodo="addTodo"></UserHeader><UserList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"></UserList><UserFooter></UserFooter></div></div></div></template><!-- App.vue -->
<script>import UserHeader from './components/UserHeader.vue'import UserList from './components/UserList'import UserFooter from './components/UserFooter'export default {name:'App',components:{UserHeader,UserList,UserFooter},data(){return{todos:[{id:'001',title:'吃早饭',done:true},{id:'002',title:'睡午觉',done:false},{id:'003',title:'散散步',done:true},]}},methods:{// 数据在哪，对数据的操作就在哪// 添加一个todoaddTodo(todoObj){this.todos.unshift(todoObj)},// 勾选or取消勾选一个todocheckTodo(id){this.todos.forEach((todo)=>{if(todo.id === id) todo.done = !todo.done})},// 删除一个tododeleteTodo(id){// this.todos = this.todos.filter((todo)=>{// 	return todo.id !== id// })// 精简写法this.todos = this.todos.filter(todo => todo.id != id)}}}
</script>

    在这里插入图片描述
    在这里插入图片描述

⭐️底部统计功能实现

  1. 把todos传给Footer，在App.vue添加<UserFooter :todos="todos"></UserFooter>。
  2. UserFooter.vue
    • 读取todos.length作为全部数值显示。
    • 计算属性，算done为true的数量。
    <template><div class="todo-footer"><label><input type="checkbox"/></label><span><span>已完成{{doneTotal}}</span> / 全部{{todos.length}}</span><button class="btn btn-danger">清除已完成任务</button></div>
</template><script>export default {name:'UserFooter',props:['todos'],computed:{doneTotal(){// 法一// let i = 0// this.todos.forEach((todo)=>{//     if(todo.done) i++// })// return i// 法二return this.todos.reduce((pre,current)=> pre + (current.done ? 1 : 0),0)}}}
</script>
    在这里插入图片描述

⭐️底部全选功能实现

  • 考虑实际情境的细节优化。
  • 同样也是对todos的操作写到App.vue。
  • App.vue关键代码
    <template><div id="root"><div class="todo-container"><div class="todo-wrap"><UserHeader :addTodo="addTodo"></UserHeader><UserList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"></UserList><UserFooter :todos="todos" :checkAllTodo="checkAllTodo"></UserFooter></div></div></div></template><!-- App.vue -->
<script>import UserHeader from './components/UserHeader.vue'import UserList from './components/UserList'import UserFooter from './components/UserFooter'export default {name:'App',components:{UserHeader,UserList,UserFooter},data(){return{todos:[{id:'001',title:'吃早饭',done:true},{id:'002',title:'睡午觉',done:false},{id:'003',title:'散散步',done:true},]}},methods:{// 数据在哪，对数据的操作就在哪// 添加一个todoaddTodo(todoObj){this.todos.unshift(todoObj)},// 勾选or取消勾选一个todocheckTodo(id){this.todos.forEach((todo)=>{if(todo.id === id) todo.done = !todo.done})},// 删除一个tododeleteTodo(id){// this.todos = this.todos.filter((todo)=>{// 	return todo.id !== id// })// 精简写法this.todos = this.todos.filter(todo => todo.id != id)},// 全选or取消全选checkAllTodo(done){this.todos.forEach((todo)=>{todo.done = done})}}}
</script>
  • UserFooter.vue关键代码
    <template><div class="todo-footer" v-show="total"><label><input type="checkbox" :checked="isAll" @change="checkAll"/></label><span><span>已完成{{doneTotal}}</span> / 全部{{total}}</span><button class="btn btn-danger">清除已完成任务</button></div>
</template><script>export default {name:'UserFooter',props:['todos','checkAllTodo'],computed:{total(){return this.todos.length},doneTotal(){// 法一// let i = 0// this.todos.forEach((todo)=>{//     if(todo.done) i++// })// return i// 法二return this.todos.reduce((pre,current)=> pre + (current.done ? 1 : 0),0)},isAll(){return this.doneTotal === this.total && this.total > 0}},methods:{checkAll(e){this.checkAllTodo(e.target.checked)}}}
</script>

在这里插入图片描述

  • 优化UserFooter.vue：借助v-model及计算属性（之前v-model失效是因为绑到props了）。
    <template><div class="todo-footer" v-show="total"><label><input type="checkbox" v-model="isAll"/></label><span><span>已完成{{doneTotal}}</span> / 全部{{total}}</span><button class="btn btn-danger">清除已完成任务</button></div>
</template><script>export default {name:'UserFooter',props:['todos','checkAllTodo'],computed:{total(){return this.todos.length},doneTotal(){return this.todos.reduce((pre,current)=> pre + (current.done ? 1 : 0),0)},isAll:{get(){return this.doneTotal === this.total && this.total > 0},set(value){this.checkAllTodo(value)}}}}
</script>

⭐️底部一键清除功能实现

  • App.vue部分
    <template><div id="root"><div class="todo-container"><div class="todo-wrap"><UserHeader :addTodo="addTodo"></UserHeader><UserList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"></UserList><UserFooter :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo"></UserFooter></div></div></div></template><!-- App.vue -->
<script>import UserHeader from './components/UserHeader.vue'import UserList from './components/UserList'import UserFooter from './components/UserFooter'export default {name:'App',components:{UserHeader,UserList,UserFooter},data(){return{todos:[{id:'001',title:'吃早饭',done:true},{id:'002',title:'睡午觉',done:false},{id:'003',title:'散散步',done:true},]}},methods:{// 数据在哪，对数据的操作就在哪// 添加一个todoaddTodo(todoObj){this.todos.unshift(todoObj)},// 勾选or取消勾选一个todocheckTodo(id){this.todos.forEach((todo)=>{if(todo.id === id) todo.done = !todo.done})},// 删除一个tododeleteTodo(id){// this.todos = this.todos.filter((todo)=>{// 	return todo.id !== id// })// 精简写法this.todos = this.todos.filter(todo => todo.id != id)},// 全选or取消全选checkAllTodo(done){this.todos.forEach((todo)=>{todo.done = done})},// 清除所有已经完成的todoclearAllTodo(){this.todos = this.todos.filter((todo)=>{return !todo.done})}}}
</script>
  • UserFooter.vue部分
    <template><div class="todo-footer" v-show="total"><label><input type="checkbox" v-model="isAll"/></label><span><span>已完成{{doneTotal}}</span> / 全部{{total}}</span><button class="btn btn-danger" @click="clearAll">清除已完成任务</button></div>
</template><script>export default {name:'UserFooter',props:['todos','checkAllTodo','clearAllTodo'],computed:{total(){return this.todos.length},doneTotal(){return this.todos.reduce((pre,current)=> pre + (current.done ? 1 : 0),0)},isAll:{get(){return this.doneTotal === this.total && this.total > 0},set(value){this.checkAllTodo(value)}}},methods:{clearAll(){this.clearAllTodo()}}}
</script>
    在这里插入图片描述
    在这里插入图片描述

📚案例小结

  1. 组件化编码流程：

    • 拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。
    • 实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：
      • 一个组件在用：放在组件自身即可。
      • 一些组件在用：放在他们共同的父组件上（状态提升）。
    • 实现交互：从绑定事件开始。

  2. props适用于：

    • 父组件 ==> 子组件 通信
    • 子组件 ==> 父组件 通信（要求父先给子一个函数）

  3. 使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！

📚浏览器本地存储

  1. 浏览器的搜索历史就是借助了本地存储。

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

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

  4. 相关API：

    • xxxxxStorage.setItem('key', 'value');：该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
    • xxxxxStorage.getItem('person');：该方法接受一个键名作为参数，返回键名对应的值。
    • xxxxxStorage.removeItem('key');：该方法接受一个键名作为参数，并把该键名从存储中删除。
    • xxxxxStorage.clear()：该方法会清空存储中的所有数据。

  5. 备注：

    • SessionStorage存储的内容会随着浏览器窗口关闭而消失。
    • LocalStorage存储的内容，需要手动清除才会消失。
    • xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。
    • JSON.parse(null)的结果依然是null。
  • localStorage.html
    <!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('msg','hello!!!')localStorage.setItem('msg2',666)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))}function deleteData(){localStorage.removeItem('msg2')}function deleteAllData(){localStorage.clear()}</script></body>
</html>
    在这里插入图片描述在这里插入图片描述
    在这里插入图片描述在这里插入图片描述
  • **localStorage.html**即对应部分API换成sessionStorage

📚TodoList本地存储

  • 目的：自添加事项刷新后不清除。
  • 在App.vue添加watch，同时data里配套读取
    export default {name:'App',components:{UserHeader,UserList,UserFooter},data(){return{todos:JSON.parse(localStorage.getItem('todos')) || []}},methods:{// 数据在哪，对数据的操作就在哪// 添加一个todoaddTodo(todoObj){this.todos.unshift(todoObj)},// 勾选or取消勾选一个todocheckTodo(id){this.todos.forEach((todo)=>{if(todo.id === id) todo.done = !todo.done})},// 删除一个tododeleteTodo(id){// this.todos = this.todos.filter((todo)=>{// 	return todo.id !== id// })// 精简写法this.todos = this.todos.filter(todo => todo.id != id)},// 全选or取消全选checkAllTodo(done){this.todos.forEach((todo)=>{todo.done = done})},// 清除所有已经完成的todoclearAllTodo(){this.todos = this.todos.filter((todo)=>{return !todo.done})}},watch:{todos:{// 开启深度监视deep:true,handler(value){localStorage.setItem('todos',JSON.stringify(value))}}}
}
  • 刷新后不清除
    在这里插入图片描述

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

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

相关文章

Linux---进程间通信（下）

Linux---进程间通信（下）

1、System V 共享内存 原理如下图 系统调用接口介绍 int shmget(key_t key, size_t size, int shmflg) 功能&#xff1a;用来创建共享内存 参数 key&#xff1a;这个共享内存段名字&#xff0c;内核用key来标识共享内存size&#xff1a;共享内存大小shmflg&#xff1a;由九个权…
阅读更多...
软件游戏显示d3dx9_42.dll丢失的5种解决方法，快速解决dll问题

软件游戏显示d3dx9_42.dll丢失的5种解决方法，快速解决dll问题

当计算机系统中d3dx9_42.dll文件丢失时&#xff0c;可能会引发一系列运行问题和功能异常&#xff0c;具体表现形式多样且影响范围较广。首先&#xff0c;对于依赖于DirectX 9.0c版本的各类应用程序&#xff0c;尤其是部分经典的老款游戏&#xff0c;由于d3dx9_42.dll是其中不可…
阅读更多...
云原生之API网关Traefik

云原生之API网关Traefik

1. 前言 说到web服务的开源网关&#xff0c;我首先想到的是Nginx&#xff0c;最早使用的就是它&#xff0c;现在都还在使用它。系统上线了Docker Swarm集群之后&#xff0c;不继续使用Nginx直接做Docker服务的网关&#xff0c;是因为Nginx毕竟比Docker Swarm出现的早&#xff0…
阅读更多...
用Python实现创建十二星座数据分析图表

用Python实现创建十二星座数据分析图表

下面小编提供的代码中&#xff0c;您已经将pie.render()注释掉&#xff0c;并使用了pie.render_to_file(十二星座.svg)来将饼状图渲染到一个名为十二星座.svg的文件中。这是一个正确的做法&#xff0c;如果您想在文件中保存图表而不是在浏览器中显示它。 成功创建图表&#xf…
阅读更多...
图解目标检测 之 【YOLOv9】 算法 最全原理详解

图解目标检测 之 【YOLOv9】 算法 最全原理详解

YOLOv9与SOTA模型对比 什么是 YOLOv9&#xff1f;YOLOv9是YOLO系列中的最新产品&#xff0c;是一种实时目标检测模型。它通过先进的深度学习技术和架构设计&#xff0c;包括通用 ELAN (GELAN) 和可编程梯度信息 (PGI)&#xff0c;展现出更好的性能。 YOLO 系列通过引入计算机视…
阅读更多...
数据结构知识点总结-绪论 数据结构基本术语 算法及评价

数据结构知识点总结-绪论 数据结构基本术语 算法及评价

要求 &#xff08;1&#xff09;对数据结构这么课学了哪些知识有个清楚的认知&#xff1b; &#xff08;2&#xff09;掌握目录结构&#xff0c;能复述出来每个知识点下都有哪些内容。 如下图所示&#xff0c;可自行制作思维导图&#xff0c;针对自己薄弱的地方进行复习。 …
阅读更多...
Gitflow：一种依据 Git 构建的分支管理工作流程模式

Gitflow：一种依据 Git 构建的分支管理工作流程模式

文章目录 前言Gitflow 背景Gitflow 中的分支模型Gitflow 的版本号管理简单模拟 Gitflow 工作流 前言 Gitflow 工作流是一种版本控制流程&#xff0c;主要适用于较大规模的团队。这个流程在团队中进行合作时可以避免冲突&#xff0c;并能快速地完成项目&#xff0c;因此在很多软…
阅读更多...
14. UE5 RPG使用GameplayTag

14. UE5 RPG使用GameplayTag

GameplayTag本来是应用在GAS游戏技能系统里面的&#xff0c;后来UE直接将其抽离出来&#xff0c;作为一个模块&#xff0c;现在可以不在GAS里也可以使用这个模块。比如&#xff0c;我需要判断一个射线拾取的物体&#xff0c;首先我需要判断这个actor是否存在&#xff0c;然后判…
阅读更多...
1906_ AMBA_高级MCU总线架构

1906_ AMBA_高级MCU总线架构

1906_ AMBA_高级MCU总线架构 全部学习汇总&#xff1a; g_arm_cores: ARM内核的学习笔记 (gitee.com) 在看内核相关的文件的时候看到了AMBA这个缩写&#xff0c;查了一下具体的概念。这个其实是一个总线架构&#xff0c;应该是ARM设计的。我找到了相关的介绍网页&#xff1a; A…
阅读更多...
Webserver解决segmentation fault(core dump)段错问问题

Webserver解决segmentation fault(core dump)段错问问题

前言 在完成了整个项目后&#xff0c;我用make命令编译了server&#xff0c;当我运行./server文件时&#xff0c;出现了段错误 在大量的代码中找出错因并不是一件容易的事&#xff0c;尤其是对新手程序员来说。而寻找bug的过程就像是侦探调查线索追查凶手一样&#xff0c;我们…
阅读更多...
找游戏 - 华为OD统一考试(C卷)

找游戏 - 华为OD统一考试(C卷)

OD统一考试&#xff08;C卷&#xff09; 分值&#xff1a; 200分 题解&#xff1a; Java / Python / C 题目描述 小扇和小船今天又玩起来了数字游戏&#xff0c; 小船给小扇一个正整数 n&#xff08;1 ≤ n ≤ 1e9&#xff09;&#xff0c;小扇需要找到一个比 n 大的数字 m&a…
阅读更多...
*MYSQL--索引--内部原理

*MYSQL--索引--内部原理

MYSQL的索引根据功能,主要有三大类型: 1.HASH索引 2.二叉树 3.BTREE索引 一:HASH索引 1.内部原理: 在设置了某列为索引列之后,并且开始或者将要在相应索引列创建数据的时候,系统通过某种算法 F(X) 自动计算出来一个十六进制的哈希值,这个哈希值能够对应相应的字段值 所以…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023