Vue_02：详细语法以及代码示例 + 知识点练习 + 综合案例（第二期）

2023年8月4日15:25:01

Vue_02_note

在Vue中，非相应式数据，直接往实例上面挂载就可以了。

01_Vue 指令修饰符

什么是指令修饰符呢？

答： 通过 " . " 指明一些指令后缀，不同 后缀 封装了不同的处理操作 ——> 简化代码

常见的有哪些呢？

  1. 按键修饰符 @keyup.enter="执行代码" ——> 键盘回车监听

  2. v-model修饰符

    1. v-model.trim ——> 去首位空格
    2. v-model.number ——> 转数字

  3. 事件修饰符

    1. @事件名.stop ——> 阻止冒泡
    2. @事件名.prevent —— > 阻止默认行为
代码示例

按键修饰符

   <input @keyup.enter="add" v-model="todoName" placeholder="请输入任务" class="new-todo" />

同样Vue实例中需要提供add() {} ，回车需要执行的代码都需要写在add函数中

  1. v-model.trim 修饰符
      <input v-moedl.trim="变量" v-model="todoName" placeholder="请输入任务" class="new-todo" />
  1. v-model.number
      <input v-moedl.number="变量" v-model="todoName" placeholder="请输入年龄" class="new-todo" />

如果你输入的是字符符号，就转不了，原封不动显示，总不可能呢个转成一个NaN把

  1. @事件名.stop (阻止冒泡)

    <div @click.stop="xxx" > </div>

  2. @事件名.prevent （阻止默认行为）

    <a @click.prevent="xxx">阻止默认行为</a>

02_ 通过v-bind操作class

常见操作的方式有 ： 通过class类 、 或者style 行内式等原生方式来实现。

v-bind -操作class
语法

  1. 语法： class=“对象/数组”

    1. 对象 -》 键就是类名，值是布尔值。如果为true，有这个类，否则就没有这个类

    <div class="box" :class="{类名1：布尔值，类名2： 布尔值}"></div>

    1. 数组-》数组中所有的类，都会添加到盒子上，本质就是一个 class 列表

    <div class="box" :class="[类名1,类名2，类名3]"></div>

    代码演示：
        <div id="app"><!-- 传递对象的写法         对象注意键值对--><div class="box" :class="{pink: true,big: true}">对象形式</div><!-- 传递数组的写法         数组注意加引号--><div class="box" :class="['pink','big']">数组形式</div></div><script src="http://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {}})</script>
    • 使用场景：
    • 对象适用于一个类，来回切换。
    • 数组适用于批量添加或删除。
（案例）通过操作class类实现导航栏高亮效果
核心思路
  1. 基于数据动态渲染 tab 使用v-for
  2. 准备下标记录了高亮的是哪一个 tab
  3. 基于下标，动态控制class类名 使用 v-bind:class
代码示例
<div id="app"><ul><li v-for="(item,index) in list" :key="item.id" @click="activeIndex = index"><a :class="{active: index === activeIndex}" href="#">{{ item.name }}</a></li></ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {activeIndex: 2,list: [{id: 1, name: '京东秒杀'},{id :2, name: '每日特价'},{id :3, name: '品类秒杀'}]}})
</script>

就是操作下标

03_ 通过v-bind操作style

语法
  1. 语法 :style=“样式对象”
代码示例：
 <div id="app"><div :style="{width: '400px',height: '400px',backgroundColor: 'green'}" class="box"></div></div>
(案例)通过操作style实现进度条效果
核心思路
  1. 底层就是将两个不同颜色的盒子重叠，修改宽度
  2. 这里我们使用v-bind操作style来实现宽度的变化
  3. 给按钮绑定点击事件，然后将宽度赋值给变量
  4. 将变量动态的设置给我们的宽度，进行拼接
  <style>.progress {height: 25px;width: 400px;border-radius: 15px;background-color: #272425;border: 3px solid #272425;box-sizing: border-box;margin-bottom: 30px;}.inner {width: 50%;height: 20px;border-radius: 10px;text-align: right;position: relative;background-color: #409eff;background-size: 20px 20px;box-sizing: border-box;transition: all 1s;}.inner span {position: absolute;right: -20px;bottom: -25px;}</style>
</head>
<body><div id="app"><div class="progress"><div class="inner" :style="{width: percent + '%'}"><span>{{ percent }}%</span></div></div><button @click="percent = 25">设置25%</button><button @click="percent = 50">设置50%</button><button @click="percent = 75">设置75%</button><button @click="percent = 100">设置100%</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {percent: 30}})</script>
适用场景
  • style适用于某个具体属性的动态设置（就如上面案例）
  • 如果说添加class类的话，会导致所有的属性都生效，不能实现单独效果

04_ v-model应用于其他表单元素

其他表单元素：例如，文本框textarea、复选框checkedbox、单选框 input:radio 、下拉菜单select

  • 常见的表单元素都可以使用 v-model来绑定关联，快速获取或设置表单元素的值，他会根据控件类型自动选取 正确的方式来更新元素。

下面直接使用案例来学习怎么实现以及操作其他表单元素

代码示例

主要看v-model在这些表单中使用的方式，大差不差

<!-- 容器 -->
<div id="app"><h3>小黑学习网</h3>姓名：<input type="text" v-model="username"> <br><br>是否单身：<input type="checkbox" v-model="isSingle"> <br><br><!-- 前置理解：1. name:  给单选框加上 name 属性 可以分组 → 同一组互相会互斥2. value: 给单选框加上 value 属性，用于提交给后台的数据结合 Vue 使用 → v-model-->性别: <input v-model="gender" type="radio" name="gender" value="1">男<input v-model="gender" type="radio" name="gender" value="2">女<br><br><!-- 前置理解：1. option 需要设置 value 值，提交给后台2. select 的 value 值，关联了选中的 option 的 value 值结合 Vue 使用 → v-model-->所在城市:<select v-model="cityId"><option value="101">北京</option><option value="102">上海</option><option value="103">成都</option><option value="104">南京</option></select><br><br>自我描述：<textarea v-model="desc"></textarea> <button>立即注册</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!-- 实例 --><script>const app = new Vue({el: '#app',data: {username: '',isSingle: false,gender: "1",cityId: '101',desc: ''}})</script>

05_计算属性

什么是计算属性呢？
  1. 概念：基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算。
语法
  1. 声明在 computed 配置项中，一个计算属性对应一个函数。
  2. 使用起来和普通属性一样使用{{ 计算属性名 }}。
代码示例
<div id="app"><h3>小黑的礼物清单</h3><table><tr><th>名字</th><th>数量</th></tr><tr v-for="(item, index) in list" :key="item.id"><td>{{ item.name }}</td><td>{{ item.num }}个</td></tr></table><!-- 目标：统计求和，求得礼物总数 --><p>礼物总数：{{ totalCount }} 个</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {// 现有的数据list: [{ id: 1, name: '篮球', num: 1 },{ id: 2, name: '玩具', num: 2 },{ id: 3, name: '铅笔', num: 5 },]},computed: {// 使用计算属性，不要加括号，就当普通属性一样使用totalCount () {// 基于现有的数据，计算// 可以通过this访问到app实例,利用reduce数组求和即可let total = this.list.reduce((sum,item) => sum + item.num,0)return total}}})
</script>
  1. 现在computed配置项里面提供声明，然后编写求和逻辑函数，使用的时候就和普通的属性一样使用差值表达式使用，切记这个不要加小括号。
computed计算属性和methods方法

  1. computed计算属性

    1. 作用： 封装了一段对于数据的处理，求得一个结果
    2. 语法：写在computed配置项中，作为属性：直接使用 this.计算属性 {{ 计算属性 }}

  2. methods方法：

    1. 作用： 给实例提供一个方法。调用以处理业务逻辑。
    2. 语法：写在methods配置项中。作为方法需要调用 , this.方法名() {{ 方法名 }} @事件名=“方法名”

注意：最大的差别就是在于使用，，属性使用直接使用this.属性就可以了，但是方法需要调用哦！

同样都能实现计算逻辑，为什么选择computed呢？

因为computed有缓存特性

计算属性会对计算出来的结果进行缓存，再次使用知己诶读取缓存。当数据依赖项变化了，会自动计算结果，并在在次缓存。便于下次使用。

06_计算属性的完整写法

  • 计算属性默认的简写，只能读取访问，不能"修改"。

  • 如果需要"修改"，–> 需要写计算属性的完整写法

computed: {

​ 计算属性名： {

​ get（）{

​ 一段代码逻辑 （计算逻辑）

​ return 结果

​ }，

​ set （修改的值） {

​ 一段代码逻辑（修改逻辑）

​ }

​ }

​ }

代码示例
   const app = new Vue({el: '#app',data: {Xing: '',Ming: ''},methods: {changeName () {// 这里是修改了fullName的值，set方法可以拿到修改后的值this.fullName = '吕小布'}},// 简写 -> 获取// fullName () {//   return this.Xing + this.Ming// }// 完整的写法   -> 获取 + -> 设置fullName: {// (1)获取   有缓存先执行缓存  将return返回值作为求值结果get() {return this.Xing + this.Ming},// (2)设置（修改）,当fullName被修改时，就执行set，将修改的值返回给set形参set (value) {// console.log(value)// 字符串截取// value.slice(0,1)// value.slice(1)this.Xing = value.slice(0,1)this.Ming = value.slice(1)}}

完整写法，就是能够修改了，需要在computed配置项里面 写一个计算属性， 里面需要提供两个方法，一个get获取 一个set修改，当我们计算属性名被修改后，我们set方法的形参就会拿到修改后的值， 然后再进行计算逻辑处理。在使用差值表达式对页面进行渲染，记住不需要添加小括号。

07_计算属性实现成绩统计和品均分案例

功能需求：
  1. 渲染功能： 不及格高亮、使用v-if v-else结局盒子互斥，使用v-bind:class解决高亮。
  2. 删除功能：点击传递id ，通过filter过滤器过滤然后覆盖原数组，使用指令修饰符。prevent阻止默认行为。
  3. 添加功能：v-model双向绑定，使用指令修饰符 （trim， number）修饰功能。在使用unshift修改数组，v-for会根据数组自动更新视图。
  4. **统计总分，求平均分：**使用reduce求和（需要在computed配置项中使用计算属性函数），将计算逻辑返回的结果通过return暴露出来，然后使用差值表达式 通过 属性的方式进行渲染即可。切记计算属性和函数方法长的一样都是函数，但是，使用计算属性必须写属性。{{ 计算属性名 }}，后面不要小括号。
代码示例：
  • 看完需求，直接在代码中找侧重点，哪怕你能找到所有功能需求，代码所处在、使用的位置。也行！哈哈。
    <div id="app" class="score-case"><div class="table"><table><thead><tr><th>编号</th><th>科目</th><th>成绩</th><th>操作</th></tr></thead><tbody v-if="list.length > 0"><tr v-for="(item,index) in list" :key="item.id"><td>{{ index + 1 }}</td><td>{{ item.subject }}</td><td :class="{red: item.score < 60}" >{{ item.score}}</td><td><a @click.prevent="del(item.id)" href="#">删除</a></td></tr></tbody><tbody v-else><tr><td colspan="5"><span class="none">暂无数据</span></td></tr></tbody><tfoot><tr><td colspan="5"><span>总分：{{ totalCount }}</span><span style="margin-left: 50px">平均分：{{ averageCount }}</span></td></tr></tfoot></table></div><div class="form"><div class="form-item"><div class="label">科目：</div><div class="input"><input v-model.trim="subject"type="text"placeholder="请输入科目"/></div></div><div class="form-item"><div class="label">分数：</div><div class="input"><input v-model.number="score"type="text"placeholder="请输入分数"/></div></div><div class="form-item"><div class="label"></div><div class="input"><button @click="add" class="submit" >添加</button></div></div></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {list: [{ id: 1, subject: '语文', score: 20 },{ id: 7, subject: '数学', score: 80 },{ id: 12, subject: '英语', score: 70 },],subject: '',score: ''},methods: {del (id) {// 判断id，进行过滤不需要删除的项，然后将新数组重新赋值给listthis.list = this.list.filter(item => item.id !== id)// 这句代码的含义就是，当我对数组一次遍历，当前项的id不等于我传过来的全部过滤放到新数组，然后重新赋值，相等的不过滤，就不会再渲染他，===删除。},add () {// 在v-model双向绑定后，我们获取到数据后，使用unshift在数组前面增加即可，因为v-for会自动检测数据个数然后动态渲染this.list.unshift({// 切记，list对象里面的格式是怎样的，这里也需要保持一致id: +new Date(),subject: this.subject,score: this.score})}},computed: {// 这里不需要修改，所有我们直接使用简单的计算属性写法即可，注意差值使用属性，不要写成调用方法totalCount () {// 属性是可以直接通过this访问，甚至都不需要声明return  this.list.reduce((sum,item) => sum + item.score ,0)// 求和后有返回值，用变量total接受，然后使用return返回给函数，哪里使用我们该函数，就能访问到结果，切记计算属性里面的函数，可以理解为调用函数，但是不要加小括号，切记},averageCount () {// 解决品均分为 NaN的问题，数组没有分数操作会显示，这里判断，如果长度为0，直接返回0 且终止后面代码。if (this.list.length === 0) {return 0}// 将返回值，通过return暴露出去，谁使用我们的计算属性名，谁就能得到结果。return (this.totalCount / this.list.length).toFixed(2)}}})</script>

08_watch 监听器 （监视器）

作用
  1. 作用：监视数据变化，执行一些 业务逻辑 或 异步操作。
语法

  1. 语法

    1. 简单写法 --> 简单类型数据，直接监视

    2. 完整写法 --> 添加额外的配置项（监视多个）

      depp: true 对复杂数据类型的深度监视

      immediate：true 初始化立即执行一次 handler方法

简单写法和完整写法就和计算属性一样，根据需求来写，能写简单的就不必写完整的哈！

这里那需求为例，展开啦学习

需求
  • 输入内容，实时翻译
核心步骤

    1. 接口地址：https://applet-base-api-t.itheima.net/api/translate

    2. 请求方式：get

    3. 请求参数：

      (1）words：需要被翻译的文本（必传）

      （2）lang： 需要被翻译成的语言（可选）默认值-意大利

代码示例
  <div id="app"><!-- 条件选择框 --><div class="query"><span>翻译成的语言：</span><select><option value="italy">意大利</option><option value="english">英语</option><option value="german">德语</option></select></div><!-- 翻译框 --><div class="box"><div class="input-wrap"><textarea v-model="obj.words"></textarea><span><i>⌨️</i>文档翻译</span></div><div class="output-wrap"><div class="transbox">{{ result }}</div></div></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>const app = new Vue({el: '#app',data: {// words: ''obj: {words: ''},// 翻译结果result: '',// 延迟器的id名字,this表示的就是我们的Vue实例对象，可以直接this.属性名，当对象使用即可。// timer: null},// 方法实现：(1) watch语法 (2) 具体业务实现watch: {// 改方法会再数据变化时 调用执行// newValue新值，oldValue老值（一般不用）'obj.words'(newValue) {   //配置对象中，访问对象里面的属性要用引号哦！不然报错// console.log('变化了', newValue)// 做防抖节流// 每次有新的值输入，都清除延迟器，什么时候不输入并且达到延迟时间在发请求clearTimeout(this.timer)this.timer = setTimeout(async() => {const res = await axios({url: 'https://applet-base-api-t.itheima.net/api/translate',params: {words: newValue}})this.result = res.data.dataconsole.log(res.data.data)}, 300);}}})</script>

09_watch 监听器 -完整写法

完整写法可以理解为监视一个对象里面的所有子属性

语法

  1. 完整写法 --> 添加额外的配置项

    depp: true 对复杂数据类型的深度监视（监视多个），（对对象里面的所有子属性进行监视）

    immediate：true 初始化立即执行一次 handler方法，（一进入页面，handler就立即执行一次）

需求：输入内容，修改语言，以及一进页面就执行一次，都实时翻译。

代码示例
<script>
const app = new Vue({el: '#app',data: {// words: ''obj: {words: 'Vue',lang: 'italy'},// 翻译结果result: '',// 延迟器的id名字,this表示的就是我们的Vue实例对象，可以直接this.属性名，当对象使用即可。// timer: null},// 方法实现：(1) watch语法 (2) 具体业务实现watch: {obj: {deep: true,  //深度监视（对对象里面的所有子属性进行监视）immediate: true,   // 立刻执行  （一进入页面，handler就立即执行一次）handler(newValue) {console.log('对象被修改了', newValue)// 改方法会再数据变化时 调用执行// newValue新值，oldValue老值（一般不用）//配置对象中，访问对象里面的属性要用引号哦！不然报错// console.log('变化了', newValue)// 做防抖节流// 每次有新的值输入，都清除延迟器，什么时候不输入并且达到延迟时间在发请求clearTimeout(this.timer)this.timer = setTimeout(async() => {const res = await axios({url: 'https://applet-base-api-t.itheima.net/api/translate',params: newValue   //因为newValue是一个对象，刚好包含携带的查询参数。})this.result = res.data.dataconsole.log(res.data.data)}, 300);}}</script>

完整写法可以理解为监视一个对象里面的所有子属性，需要监视的都放在改对象里面，然后使用deep：true深度监视，记得进页面就执行一次immediate: true；记得别忘了使用 v-model 将数据视图双向绑定。这样watch监听器才可以实时监测到变化，同时还需要加上防抖节流。

10_ 水果购物车业务

需求说明
  1. 渲染功能
  2. 删除功能
  3. 修改功能
  4. 全选反选功能
  5. 统计 选中的 总价 和 总数量
  6. 持久化到本地
业务技术点总结：
  1. 渲染功能： v-if/v-else v-for :class
  2. 删除功能： 点击传参 filter过滤覆盖原数组
  3. 修改个数： 点击传参 find找对象
  4. 全选反选：计算属性computed 完整写法 get/set
  5. 总价和总数量： 计算属性 computed reduce条件求和
  6. 持久化到本地： watch监视，localStorage，JSON.stringify存 ，JSON.parse读取
代码示例
<scritp> 
const defaultArr = [{id: 1,icon: 'http://autumnfish.cn/static/火龙果.png',isChecked: true,num: 2,price: 6,},{id: 2,icon: 'http://autumnfish.cn/static/荔枝.png',isChecked: false,num: 7,price: 20,},{id: 3,icon: 'http://autumnfish.cn/static/榴莲.png',isChecked: false,num: 3,price: 40,},{id: 4,icon: 'http://autumnfish.cn/static/鸭梨.png',isChecked: true,num: 10,price: 3,},{id: 5,icon: 'http://autumnfish.cn/static/樱桃.png',isChecked: false,num: 20,price: 34,},]const app = new Vue({el: '#app',data: {// 水果列表fruitList: JSON.parse(localStorage.getItem('list')) || defaultArr,},computed: {// 计算属性默认只能获取，需要设置需要写完整写法isAll: {// 所有的小选框的选中状态，全选才选中get() {return this.fruitList.every(item => item.isChecked)},set(value) {// 基于拿到的value布尔值，要让所有的小选框， 同步状态this.fruitList.forEach(item => item.isChecked = value)},},// 统计选中的总数   reducetotalCount() {return this.fruitList.reduce((sum, item) => {if (item.isChecked) {// 选中  需要累加return sum + item.num} else {// 没选中 不需要累加 返回sum即可return sum}}, 0)},// 统计选中的总价totalPrice() {return this.fruitList.reduce((sum, item) => {// 选中   需要价格if (item.isChecked) {return sum + item.num * item.price} else {return sum}},0)}},methods: {del(id) {this.fruitList = this.fruitList.filter(item => item.id !== id)},reduce(id) {// 1. 根据id 找到数组中的对应项const fruit = this.fruitList.find(item => item.id === id)// 2. 操作 num 数量fruit.num--},add(id) {// 1. 根据id 找到数组中的对应项const fruit = this.fruitList.find(item => item.id === id)// 2. 操作 num 数量fruit.num++}},// 监视器，监视所有数据是否发生变化watch: {fruitList: {deep: true,handler (newValue) {// 需要将变化后的   newValue  存入本地  （存进去前需要转 JSON）localStorage.setItem('list',JSON.stringify(newValue))}}}})</script>

当前购物车业务，除了没有使用axios与服务器存储交互以及支付功能。其他的都完成了

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

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

相关文章

基于差分进化优化随机森林的多分类预测，基于DA-RF的分类预测

基于差分进化优化随机森林的多分类预测，基于DA-RF的分类预测

目录 背影 摘要 随机森林的基本定义 随机森林实现的步骤 差分进化算法原理 差分算法主要参数 差分算法流程图 差分算法优化测试函数代码 完整代码包含数据下载链接： https://download.csdn.net/download/abc991835105/88179071 基于差分进化算法改进的bp神经网络的心理状况评估…
阅读更多...
SpringCloud Gateway获取请求响应body大小

SpringCloud Gateway获取请求响应body大小

前提 本文获取请求、响应body大小方法的前提 : 网关只做转发逻辑&#xff0c;不修改请求、相应的body内容。 SpringCloud Gateway内部的机制类似下图&#xff0c;HttpServer&#xff08;也就是NettyServer&#xff09;接收外部的请求&#xff0c;在Gateway内部请求将会通过Htt…
阅读更多...
RISC-V基础之函数调用（四）非叶函数调用（包含实例）

RISC-V基础之函数调用（四）非叶函数调用（包含实例）

叶函数是指不调用其他函数&#xff0c;也不改变任何非易失性寄存器的函数2。叶函数通常是一些简单的操作&#xff0c;如数学运算或逻辑判断。叶函数的特点是可以通过模拟返回来展开&#xff0c;即不需要保存或恢复寄存器的状态。 非叶函数是指调用其他函数或改变非易失性寄存器…
阅读更多...
电力巡检无人机助力迎峰度夏，保障夏季电力供应

电力巡检无人机助力迎峰度夏，保障夏季电力供应

夏季是电力需求量较高的时期&#xff0c;随着高温天气的来临&#xff0c;风扇、空调和冰箱等电器的使用量也大大增加&#xff0c;从而迎来夏季用电高峰期&#xff0c;电网用电负荷不断攀升。为了保障夏季电网供电稳定&#xff0c;供电公司会加强对电力设施设备的巡检&#xff0…
阅读更多...
ATF(TF-A)安全通告汇总

ATF(TF-A)安全通告汇总

目录计划如下&#xff0c;相关内容补充中&#xff0c;待完成后进行超链接&#xff0c;敬请期待&#xff0c;欢迎您的关注 1、Advisory TFV-1 (CVE-2016-10319) 2、Advisory TFV-2 (CVE-2017-7564) 3、Advisory TFV-3 (CVE-2017-7563) 4、Advisory TFV-4 (CVE-2017-9607) 5、Ad…
阅读更多...
❤ vue3中的RouteRecordRaw

❤ vue3中的RouteRecordRaw

❤ vue3中的RouteRecordRaw RouteRecordRaw 是 Vue Router 4.x 中新增的类型&#xff0c;用于定义路由配置。它是一个 TypeScript 类型 import { RouteRecordRaw } from vue-routerconst routes: Array<RouteRecordRaw> [{path: /,name: Home,component: () > impo…
阅读更多...
opencv基础-34 图像平滑处理-2D 卷积 cv2.filter2D()

opencv基础-34 图像平滑处理-2D 卷积 cv2.filter2D()

2D卷积是一种图像处理和计算机视觉中常用的操作&#xff0c;用于在图像上应用滤波器或卷积核&#xff0c;从而对图像进行特征提取、平滑处理或边缘检测等操作。 在2D卷积中&#xff0c;图像和卷积核都是二维的矩阵或数组。卷积操作将卷积核在图像上滑动&#xff0c;对每个局部区…
阅读更多...
瑞数系列及顶像二次验证LOGS

瑞数系列及顶像二次验证LOGS

瑞数商标局药监局专利局及顶像二次验证 日期&#xff1a;20230808 瑞数信息安全是一个专注于信息安全领域的公司&#xff0c;致力于为企业和个人提供全面的信息安全解决方案。他们的主要业务包括网络安全、数据安全、应用安全、云安全等方面的服务和产品。瑞数信息安全拥有一支…
阅读更多...
Python爬虫之JsonPath详解

Python爬虫之JsonPath详解

简介 JsonPath是一种信息抽取类库&#xff0c;是从JSON文档中抽取指定信息的工具 文档 官方文档 JSONPath - XPath for JSON 语法规则 $ 根节点 现行节点 .or[] 取子节点 n/a 取父节点&#xff0c;Jsonpath未支持 .. 就是不管位置&#xff0c;选择所有符…
阅读更多...
【资料分享】全志科技T507工业核心板硬件说明书(一）

【资料分享】全志科技T507工业核心板硬件说明书(一）

目 录 前言 1硬件资源 1.1CPU 1.2ROM 1.3RAM 1.4时钟系统 1.5电源 1.6LED
阅读更多...
现在转行搞嵌入式找工作难不难啊？

现在转行搞嵌入式找工作难不难啊？

对于应届生来说&#xff0c;嵌入式开发的经验不会有太多&#xff0c;所以要求也不会太高。 嵌入式开发常用的是C语言&#xff0c;所以需要你有扎实的功底&#xff0c;这一点很重要&#xff0c;数据结构算法&#xff0c;指针&#xff0c;函数&#xff0c;网络编程 有了上面的基…
阅读更多...
web题型

web题型

0X01 命令执行 漏洞原理 没有对用户输入的内容进行一定过滤直接传给shell_exec、system一类函数执行 看一个具体例子 cmd1|cmd2:无论cmd1是否执行成功&#xff0c;cmd2将被执行 cmd1;cmd2:无论cmd1是否执行成功&#xff0c;cmd2将被执行 cmd1&cmd2:无论cmd1是否执行成…
阅读更多...
源码分析——ConcurrentHashMap源码+底层数据结构分析

源码分析——ConcurrentHashMap源码+底层数据结构分析

文章目录 1. ConcurrentHashMap 1.71. 存储结构2. 初始化3. put4. 扩容 rehash5. get 2. ConcurrentHashMap 1.81. 存储结构2. 初始化 initTable3. put4. get 3. 总结 1. ConcurrentHashMap 1.7 1. 存储结构 Java 7 中 ConcurrentHashMap 的存储结构如上图&#xff0c;Concurr…
阅读更多...
winform控件 datagridview分页功能

winform控件 datagridview分页功能

主要实现页面跳转、动态改变每页显示行数、返回首末页、上下页功能&#xff0c;效果图如下&#xff1a; 主代码如下&#xff1a; namespace Paging {public partial class Form1 : Form{public Form1(){InitializeComponent();}private int currentPageCount;//记录当前页行数…
阅读更多...
一个竖杠在python中代表什么,python中一竖代表什么

一个竖杠在python中代表什么,python中一竖代表什么

大家好&#xff0c;小编来为大家解答以下问题&#xff0c;一个竖杠在python中代表什么&#xff0c;python中一竖代表什么&#xff0c;今天让我们一起来看看吧&#xff01; 维基百科页面是错误的&#xff0c;我已经更正了。|和&不是布尔运算符&#xff0c;即使它们是急切运算…
阅读更多...
GODOT游戏引擎简介，包含与unity性能对比测试，以及选型建议

GODOT游戏引擎简介，包含与unity性能对比测试，以及选型建议

GODOT&#xff0c;是一个免费开源的3D引擎。本文以unity作对比&#xff0c;简述两者区别和选型建议。由于是很久以前写的ppt&#xff0c;技术原因视频和部分章节丢失了。建议当做业务参考。 GODOT目前为止遇到3个比较重大的基于&#xff0c;第一个是oprea的合作奖&#xff0c;…
阅读更多...
13-把矩阵看作是对系统的描述

13-把矩阵看作是对系统的描述

探索矩阵乘法&#xff1a;更深刻的理解与应用视角 &#x1f9e9;&#x1f50d; 引言 &#x1f4d6; 在我们进一步探讨矩阵乘法之前&#xff0c;让我们从不同的角度来理解什么是矩阵&#xff0c;以及如何将矩阵视为一个系统。我们之前已经介绍了矩阵的基本概念和运算&#xff…
阅读更多...
手搓 自然语言模型 LLM 拆分em结构设计 网络参数对比

手搓 自然语言模型 LLM 拆分em结构设计 网络参数对比

数据 数据集 新的em编码参数表 voc_sizehidden_sizetotaltotal Bmax_lensecondsdays65536512374865920.03749B10242560.2655361024828375040.08284B20485120.5655362048<
阅读更多...
公检系统创新：利用校对软件优化法律文书流程

公检系统创新：利用校对软件优化法律文书流程

公检系统可以通过利用校对软件来优化法律文书的流程&#xff0c;从而提高效率和准确性。以下是在创新方面利用校对软件的一些方法&#xff1a; 1.自动校对和修正&#xff1a;校对软件可以与公检系统集成&#xff0c;自动检测文书中的拼写、语法和标点符号错误&#xff0c;并提供…
阅读更多...
quill 富文本编辑器 @提及

quill 富文本编辑器 @提及

使用插件quill-mention&#xff0c;实现在quill 富文本编辑器使用或#提及用户。 1. 安装 npm install quill-mention --save2. 官方给的示例quill-mention import "quill-mention";const atValues [{ id: 1, value: "Fredrik Sundqvist" },{ id: 2, va…
阅读更多...
最新文章

Copyright @ 2022~2023