【VUE】第一期——初使用、基本语法

目录

0 前言

1 准备工作

1.1 创建vue实例

1.2 vue开发者工具

2 插值表达式

2.1 基本用法

3 常用指令

3.1 内容渲染指令

3.1.1 v-text

3.1.2 v-html

3.2 条件渲染指令

3.2.1 v-show

3.2.2 v-if

3.2.3 v-else 和 v-else-if

3.3 事件绑定指令

3.3.1 内联语句

3.3.2 事件处理函数

3.3.3 给事件处理函数传参

3.4 属性绑定指令

3.5 列表渲染指令

3.5.1 key

3.6 双向绑定指令（v-model）

4 指令修饰符

4.1 按键修饰符

4.2 v-model修饰符

4.3 事件修饰符

5 属性绑定指令操控样式

5.1 :class

5.1.1 对象

5.1.2 数组

5.2 :style

6 computed 计算属性

6.1 完整写法

6.2 computed计算属性 VS methods方法

6.2.1 computed计算属性

6.2.2 methonds方法

6.2.3 计算属性的优势

6.2.4 总结

7 watch监视器

7.1 简单写法

7.2 完整写法

0 前言

黑马程序员视频地址：前端最新Vue2+Vue3基础入门到实战项目全套教程

本章从vue2学起，vue3内容将在后期专门用一章来讲述

本篇只记录大纲及要点，具体请看黑马程序员视频及其提供的md笔记

vue2官网：Vue.js

vue3官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js

1 准备工作

1.1 创建vue实例

  1. 准备容器 (Vue所管理的范围)
  2. 引包 (开发版本包 / 生产版本包) 官网
  3. 创建实例
  4. 添加配置项 => 完成渲染 

<body>

<div id="app">
  <!-- 这里将来会编写一些用于渲染的代码逻辑 -->
  <h1>{{ msg }}</h1>
  <a href="#">{{ count }}</a>
</div>


<!-- 引入的是开发版本包 - 包含完整的注释和警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>


<script>
  // 一旦引入 VueJS核心包，在全局环境，就有了 Vue 构造函数
  const app = new Vue({
    // 通过 el 配置选择器，指定 Vue 管理的是哪个盒子
    el: '#app',
    // 通过 data 提供数据
    data: {
      msg: 'Hello World！',
      count: 666
    }
  })

</script>

  
</body>

1.2 vue开发者工具

安装网站：极简插件官网_Chrome插件下载_Chrome浏览器应用商店

注意查看插件是否支持vue2

安装之后可以F12后看到多一个Vue的调试面板

2 插值表达式

2.1 基本用法

{{表达式}}

表达式：

money + 100
money - 100
money * 10
money / 10 
price >= 100 ? '真贵':'还行'
obj.name
arr[0]
fn()
obj.fn()

示例：

<h3>{{title}}<h3>

<p>{{nickName.toUpperCase()}}</p>

<p>{{age >= 18 ? '成年':'未成年'}}</p>

<p>{{obj.name}}</p>

<p>{{fn()}}</p>

2.2 注意事项

1.在插值表达式中使用的数据 必须在data中进行了提供
<p>{{hobby}}</p>  //如果在data中不存在 则会报错

2.支持的是表达式，而非语句，比如：if   for ...
<p>{{if}}</p>

3.不能在标签属性中使用 {{  }} 插值 (插值表达式只能标签中间使用)
<p title="{{username}}">我是P标签</p>

3 常用指令

vue 中的指令按照不同的用途可以分为如下 6 大类：

  • 内容渲染指令（v-html、v-text）

  • 条件渲染指令（v-show、v-if、v-else、v-else-if）

  • 事件绑定指令（v-on）

  • 属性绑定指令 （v-bind）

  • 列表渲染指令（v-for）

  • 双向绑定指令（v-model）

3.1 内容渲染指令

3.1.1 v-text

  • 使用语法：<p v-text="uname">hello</p>，意思是将 uame 值渲染到 p 标签中

  • 类似 innerText，使用该语法，会覆盖 p 标签原有内容

3.1.2 v-html

  • 使用语法：<p v-html="intro">hello</p>，意思是将 intro 值渲染到 p 标签中

  • 类似 innerHTML，使用该语法，会覆盖 p 标签原有内容

  • 类似 innerHTML，使用该语法，能够将HTML标签的样式呈现出来。

3.2 条件渲染指令

3.2.1 v-show

  1. 作用： 控制元素显示隐藏

  2. 语法： v-show = "表达式" 表达式值为 true 显示， false 隐藏

  3. 原理： 切换 display:none 控制显示隐藏

  4. 场景：频繁切换显示隐藏的场景

3.2.2 v-if

  1. 作用： 控制元素显示隐藏（条件渲染）

  2. 语法： v-if= "表达式" 表达式值 true显示， false 隐藏

  3. 原理： 基于条件判断，是否创建 或 移除元素节点

  4. 场景： 要么显示，要么隐藏，不频繁切换的场景

3.2.3 v-else 和 v-else-if

  1. 作用：辅助v-if进行判断渲染

  2. 语法：v-else v-else-if="表达式"

  3. 需要紧接着v-if使用

3.3 事件绑定指令

  • <button v-on:事件名="内联语句">按钮</button>

  • <button v-on:事件名="处理函数">按钮</button>

  • <button v-on:事件名="处理函数(实参)">按钮</button>

  • v-on: 简写为 @

3.3.1 内联语句

<div id="app">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button v-on:click="count++">+</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 100
      }
    })
  </script>

3.3.2 事件处理函数

注意：

  • 事件处理函数应该写到一个跟data同级的配置项（methods）中

  • methods中的函数内部的this都指向Vue实例

3.3.3 给事件处理函数传参

如果不传递任何参数，则方法无需加小括号；methods方法中可以直接使用 e 当做事件对象

<body>
  <div id="app">
    <!-- 绑定事件处理函数，不加小括号 -->
    <button @click="handleClick">点击我</button>
  </div>
  <script>
    new Vue({
      el: '#app',
      methods: {
        handleClick(e) {
          // e 就是事件对象
          console.log('事件对象:', e);
          console.log('点击的元素:', e.target);
        }
      }
    });
  </script>
</body>

 如果传递了参数，则需额外传一个实参 $event 表示事件对象

<body>
  <div id="app">
    <!-- 传递额外参数，同时使用 $event 表示事件对象 -->
    <button @click="handleClickWithParams('额外参数', $event)">点击我</button>
  </div>
  <script>
    new Vue({
      el: '#app',
      methods: {
        handleClickWithParams(param, e) {
          // param 是传递的额外参数
          console.log('传递的额外参数:', param);
          // e 是事件对象
          console.log('事件对象:', e);
          console.log('点击的元素:', e.target);
        }
      }
    });
  </script>
</body>

注意：如果在内联事件处理中只传递一个参数而不使用 $event 来显式传递事件对象，那么在 methods 中定义的方法里第二个形参将无法接收到事件对象

3.4 属性绑定指令

  1. 作用：动态设置html的标签属性 比如：src、url、title

  2. 语法：v-bind:属性名=“表达式”

  3. v-bind:可以简写成 => :

比如，有一个图片，它的 src 属性值，是一个图片地址。这个地址在数据 data 中存储。

则可以这样设置属性值：

- <img v-bind:src="url" />
- <img :src="url" />   （v-bind可以省略）

3.5 列表渲染指令

v-for 指令需要使用 (item, index) in arr 形式的特殊语法，其中：

  • item 是数组中的每一项

  • index 是每一项的索引，不需要可以省略

  • arr 是被遍历的数组

此语法也可以遍历对象和数字

//遍历对象
<div v-for="(value, key, index) in object">{{value}}</div>
value:对象中的值
key:对象中的键
index:遍历索引从0开始

//遍历数字
<p v-for="item in 10">{{item}}</p>
item从1 开始

3.5.1 key

语法： key="唯一值"

作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。

为什么加key：Vue 的默认行为会尝试原地修改元素（就地复用）

<ul>
  <li v-for="(item, index) in booksList" :key="item.id">
    <span>{{ item.name }}</span>
    <span>{{ item.author }}</span>
    <button @click="del(item.id)">删除</button>
  </li>
</ul>

注意：

  1. key 的值只能是字符串 或 数字类型

  2. key 的值必须具有唯一性

  3. 推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）  

3.6 双向绑定指令（v-model）

作用： 给表单元素（input、radio、select）使用，双向绑定数据，可以快速 获取 或 设置 表单元素内容

语法：v-model="变量

如：

输入框  input:text   ——> value
文本域  textarea     ——> value
复选框  input:checkbox  ——> checked
单选框  input:radio   ——> checked
下拉菜单 select    ——> value
... 

<body>

  <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: "2",
        cityId: '102',
        desc: ""
      }
    })
  </script>
</body>

4 指令修饰符

指令修饰符就是通过“.”指明一些指令后缀 不同的后缀封装了不同的处理操作 —> 简化代码

4.1 按键修饰符

类似：@keyup.enter —>当点击enter键的时候才触发

除了enter，其他的也可以 

4.2 v-model修饰符

  • v-model.trim —>去除首位空格

  • v-model.number —>转数字

4.3 事件修饰符

  • @事件名.stop —> 阻止冒泡

  • @事件名.prevent —>阻止默认行为

  • @事件名.stop.prevent —>可以连用 即阻止事件冒泡也阻止默认行为

注意：不一定严格按照上述分类使用，如果能有相应效果，也可以自由搭配使用

5 属性绑定指令操控样式

为了方便开发者进行样式控制， Vue 扩展了 v-bind 的语法，可以针对 class 类名 和 style 行内样式 进行控制

5.1 :class

语法： 

<div> :class = "对象/数组">这是一个div</div>

5.1.1 对象

当class动态绑定的是对象时，键就是类名，值就是布尔值，如果值是true，就有这个类，否则没有这个类

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

适用场景：一个类名，来回切换

示例：


  <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>
</body>

5.1.2 数组

当class动态绑定的是数组时 → 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表

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

使用场景:批量添加或删除类

5.2 :style

语法： 

<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>

示例：操作进度条

<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>
</body>

6 computed 计算属性

基于现有的数据，计算出来的新属性。 依赖的数据变化，自动重新计算

语法：

  1. 声明在 computed 配置项中，一个计算属性对应一个函数

  2. 使用起来和普通属性一样使用 {{ 计算属性名}}

注意：

  1. computed配置项和data配置项是同级的

  2. computed中的计算属性虽然是函数的写法，但他依然是个属性

  3. computed中的计算属性不能和data中的属性同名

  4. 使用computed中的计算属性和使用data中的属性是一样的用法

  5. computed中计算属性内部的this依然指向的是Vue实例

示例：

<body>

  <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 实例
          // console.log(this.list)

          // 需求：对 this.list 数组里面的 num 进行求和 → reduce
          let total = this.list.reduce((sum, item) => sum + item.num, 0)
          return total
        }
      }
    })
  </script>
</body>

6.1 完整写法

 

6.2 computed计算属性 VS methods方法

6.2.1 computed计算属性

作用：封装了一段对于数据的处理，求得一个结果

语法：

1.写在computed配置项中

2.作为属性，直接使用

  • js中使用计算属性： this.计算属性

  • 模板中使用计算属性：{{计算属性}}

6.2.2 methonds方法

作用：给Vue实例提供一个方法，调用以处理业务逻辑

语法：

1.写在methods配置项中

2.作为方法调用

  • js中调用：this.方法名()

  • 模板中调用 {{方法名()}} 或者 @事件名=“方法名”

6.2.3 计算属性的优势

  1. 缓存特性（提升性能）

    计算属性会对计算出来的结果缓存，再次使用直接读取缓存，

    依赖项变化了，会自动重新计算 → 并再次缓存

  2. methods没有缓存特性

6.2.4 总结

1.computed有缓存特性，methods没有缓存

2.当一个结果依赖其他多个值时，推荐使用计算属性

3.当处理业务逻辑时，推荐使用methods方法，比如事件的处理函

7 watch监视器

监视数据变化，执行一些业务逻辑或异步操作

watch同样声明在跟data同级的配置项中

7.1 简单写法

data: { 
  words: '苹果',
  obj: {
    words: '苹果'
  }
},

watch: {
  // 该方法会在数据变化时，触发执行
  数据属性名 (newValue, oldValue) {
    一些业务逻辑 或 异步操作。 
  },
  '对象.属性名' (newValue, oldValue) {
    一些业务逻辑 或 异步操作。 
  }
}

示例：

  <body>
    <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">mela</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>
      // 接口地址：https://applet-base-api-t.itheima.net/api/translate
      // 请求方式：get
      // 请求参数：
      // （1）words：需要被翻译的文本（必传）
      // （2）lang： 需要被翻译成的语言（可选）默认值-意大利
      // -----------------------------------------------
      
      const app = new Vue({
        el: '#app',
        data: {
          // words: ''
          obj: {
            words: ''
          }
        },
        // 具体讲解：(1) watch语法 (2) 具体业务实现
        watch: {
          // 该方法会在数据变化时调用执行
          // newValue新值, oldValue老值（一般不用）
          // words (newValue) {
          //   console.log('变化了', newValue)
          // }

          'obj.words' (newValue) {
            console.log('变化了', newValue)
          }
        }
      })
    </script>
  </body>

7.2 完整写法

添加额外配置：

  1. deep:true 对复杂类型进行深度监听

  2. immdiate:true 初始化，立刻执行一次

data: {
  obj: {
    words: '苹果',
    lang: 'italy'
  },
},

watch: {// watch 完整写法
  对象: {
    deep: true, // 深度监视
    immdiate:true,//立即执行handler函数
    handler (newValue) {
      console.log(newValue)
    }
  }
}

示例：

  <body>
    <div id="app">
      <!-- 条件选择框 -->
      <div class="query">
        <span>翻译成的语言：</span>
        <select v-model="obj.lang">
          <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>
      // 需求：输入内容，修改语言，都实时翻译

      // 接口地址：https://applet-base-api-t.itheima.net/api/translate
      // 请求方式：get
      // 请求参数：
      // （1）words：需要被翻译的文本（必传）
      // （2）lang： 需要被翻译成的语言（可选）默认值-意大利
      // -----------------------------------------------
   
      const app = new Vue({
        el: '#app',
        data: {
          obj: {
            words: '小黑',
            lang: 'italy'
          },
          result: '', // 翻译结果
        },
        watch: {
          obj: {
            deep: true, // 深度监视
            immediate: true, // 立刻执行，一进入页面handler就立刻执行一次
            handler (newValue) {
              clearTimeout(this.timer)
              this.timer = setTimeout(async () => {
                const res = await axios({
                  url: 'https://applet-base-api-t.itheima.net/api/translate',
                  params: newValue
                })
                this.result = res.data.data
                console.log(res.data.data)
              }, 300)
            }
          }
        }
      })
    </script>
  </body>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

大数据学习（57）-DataX基础

大数据学习（57）-DataX基础

&&大数据学习&& &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 承认自己的无知&#xff0c;乃是开启智慧的大门 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4dd;支持一下博主哦&#x1f91…
阅读更多...
【DeepSeek】Ubuntu快速部署DeepSeek（Ollama方式）

【DeepSeek】Ubuntu快速部署DeepSeek（Ollama方式）

文章目录 人人都该学习的DeepSeekDeepSeek不同版本功能差异DeepSeek与硬件直接的关系DeepSeek系统兼容性部署方式选择部署步骤&#xff08;Ollama方式&#xff09;1.选定适合的deepseek版本2.环境准备3.安装Ollama4.部署deepseek5.测试使用 人人都该学习的DeepSeek DeepSeek 作…
阅读更多...
Go加spy++隐藏窗口

Go加spy++隐藏窗口

最近发现有些软件的窗口就像狗皮膏药一样&#xff0c;关也关不掉&#xff0c;一点就要登录&#xff0c;属实是有点不爽了。 窗口的进程不能杀死&#xff0c;但是窗口我不想要。思路很简单&#xff0c;用 spy 找到要隐藏的窗口的句柄&#xff0c;然后调用 Windows 的 ShowWindo…
阅读更多...
最新版本TOMCAT+IntelliJ IDEA+MAVEN项目创建（JAVAWEB）

最新版本TOMCAT+IntelliJ IDEA+MAVEN项目创建（JAVAWEB）

前期所需&#xff1a; 1.apache-tomcat-10.1.18-windows-x64&#xff08;tomcat 10.1.8版本或者差不多新的版本都可以&#xff09; 2.IntelliJ idea 24年版本 或更高版本 3.已经配置好MAVEN了&#xff08;一定先配置MAVEN再搞TOMCAT会事半功倍很多&#xff09; 如果有没配置…
阅读更多...
【大学生体质】智能 AI 旅游推荐平台(Vue+SpringBoot3)-完整部署教程

【大学生体质】智能 AI 旅游推荐平台(Vue+SpringBoot3)-完整部署教程

智能 AI 旅游推荐平台开源文档 项目前端地址 ☀️项目介绍 智能 AI 旅游推荐平台&#xff08;Intelligent AI Travel Recommendation Platform&#xff09;是一个利用 AI 模型和数据分析为用户提供个性化旅游路线推荐、景点评分、旅游攻略分享等功能的综合性系统。该系统融合…
阅读更多...
Android Flow操作符分类

Android Flow操作符分类

Flow操作符分类
阅读更多...
linux 系统内核查询

linux 系统内核查询

1. 使用uname命令 uname命令可以用来显示系统信息&#xff0c;包括内核版本。 查看完整的内核版本信息&#xff1a;uname -a [rootlocalhost ~]# uname -a Linux localhost.localdomain 4.18.0-448.el8.x86_64 #1 SMP Wed Jan 18 15:02:46 UTC 2023 x86_64 x86_64 x86_64 GN…
阅读更多...
静态时序分析：报告命令report_timing详解

静态时序分析：报告命令report_timing详解

相关阅读 静态时序分析https://blog.csdn.net/weixin_45791458/category_12567571.html?spm1001.2014.3001.5482 目录 指定时序路径起点 指定时序路径经过点 指定时序路径终点 指定不报告的路径 指定路径类型 指定延迟类型 指定每个终点报告的最大时序路径数 指定每个时序组的…
阅读更多...
DeepSeek 助力 Vue3 开发：打造丝滑的弹性布局（Flexbox）

DeepSeek 助力 Vue3 开发：打造丝滑的弹性布局（Flexbox）

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享一篇文章&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495; 目录 Deep…
阅读更多...
qt 播放pcm音频

qt 播放pcm音频

一、获取PCM音频 ffmpeg -i input.mp3 -acodec pcm_s16le -ar 44100 -ac 2 -f s16le output.pcm -acodec pcm_s16le&#xff1a;指定16位小端PCM编码格式&#xff08;兼容性最佳&#xff09;-ar 44100&#xff1a;设置采样率为CD标准44.1kHz&#xff08;可替换为16000/8000等&a…
阅读更多...
OpenCV计算摄影学（15）无缝克隆（Seamless Cloning）调整图像颜色的函数colorChange()

OpenCV计算摄影学（15）无缝克隆（Seamless Cloning）调整图像颜色的函数colorChange()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 cv::colorChange 是 OpenCV 中用于调整图像颜色的函数。它允许你通过乘以不同的系数来独立地改变输入图像中红色、绿色和蓝色通道的强度&#xf…
阅读更多...
WPS AI+office-ai的安装、使用

WPS AI+office-ai的安装、使用

** 说明&#xff1a;WPS AI和OfficeAI是两个独立的AI助手&#xff0c;下面分别简单讲下如何使用 ** WPS AI WPS AI是WPS自带AI工具 打开新版WPS&#xff0c;新建文档后就可以看到菜单栏多了一个“WPS AI”菜单&#xff0c;点击该菜单&#xff0c;发现下方出现很多菜单&#xf…
阅读更多...
绝美焦糖暖色调复古风景画面Lr调色教程，手机滤镜PS+Lightroom预设下载！

绝美焦糖暖色调复古风景画面Lr调色教程，手机滤镜PS+Lightroom预设下载！

调色教程 通过 Lr 软件丰富的工具和功能&#xff0c;对风景照片在色彩、影调等方面进行调整。例如利用基本参数调整选项&#xff0c;精准控制照片亮度、对比度、色温、色调等基础要素&#xff1b;运用 HSL 面板可对不同色彩的色相、饱和度以及明亮度进行单独调节&#xff1b;利…
阅读更多...
【Manus资料合集】激活码内测渠道+《Manus Al：Agent应用的ChatGPT时刻》（附资源）

【Manus资料合集】激活码内测渠道+《Manus Al：Agent应用的ChatGPT时刻》（附资源）

DeepSeek 之后&#xff0c;又一个AI沸腾&#xff0c;冲击的不仅仅是通用大模型。 ——全球首款通用AI Agent的破圈启示录 2025年3月6日凌晨&#xff0c;全球AI圈被一款名为Manus的产品彻底点燃。由Monica团队&#xff08;隶属中国夜莺科技&#xff09;推出的“全球首款通用AI…
阅读更多...
团队学习—系统思考

团队学习—系统思考

3月的团队学习将继续深入&#xff0c;与海外顾问共同探讨系统思考和心智模式的核心内容。回顾过去&#xff0c;这些每月一次的学习不仅成为我们审视思维框架的常规途径&#xff0c;更成为揭示潜在问题与盲点的高效工具。尤其是那些“我不知道我不知道”的领域&#xff0c;外部顾…
阅读更多...
使用LVGL驱动三色墨水屏，Arduino

使用LVGL驱动三色墨水屏，Arduino

一、基本情况 本文代码基于以下软件版本&#xff1a; Arduino2.X LVGL8.3.11 GXEPD1.6.2 epdpaint---微雪EPD驱动的一部分&#xff0c;你可以在微雪的官网下载到 硬件&#xff1a; MCU&#xff1a;ESP32-S3-N16R8 屏幕&#xff1a;GDEY042Z98黑白红三色墨水屏&#xff0c;某…
阅读更多...
DeepSeek未来发展趋势：开创智能时代的新风口

DeepSeek未来发展趋势：开创智能时代的新风口

DeepSeek未来发展趋势&#xff1a;开创智能时代的新风口 随着人工智能&#xff08;AI&#xff09;、深度学习&#xff08;DL&#xff09;和大数据的飞速发展&#xff0c;众多创新型技术已经逐渐走向成熟&#xff0c;而DeepSeek作为这一领域的新兴力量&#xff0c;正逐步吸引越…
阅读更多...
Go红队开发—编解码工具

Go红队开发—编解码工具

文章目录 开启一个项目编解码工具开发Dongle包Base64编解码摩斯密码URL加解密AES加解密 MD5碰撞工具开发 开启一个项目 这作为补充内容&#xff0c;可忽略直接看下面的编解码&#xff1a; 一开始用就按照下面的步骤即可 1.创建一个文件夹&#xff0c;你自己定义名字(建议只用…
阅读更多...
算法·搜索

算法·搜索

搜索问题 搜索问题本质也是暴力枚举&#xff0c;一般想到暴力也要想到利用回溯枚举。 排序和组合问题 回溯法 去重问题&#xff1a;定义全局变量visited还是局部变量visited实现去重&#xff1f; 回溯问题 图论中的搜索问题 与一般的搜索问题一致&#xff0c;只不过要多…
阅读更多...
常见的限流算法有哪些？

常见的限流算法有哪些？

好的&#xff0c;关于这个问题&#xff0c;我会从几个方面来回答。 首先&#xff0c;限流算法是一种系统保护策略&#xff0c;主要是避免在流量高峰导致系统被压垮&#xff0c;造成系统不可用的问题。 常见的限流算法有 5 种。 1. &#xff08;如图&#xff09;计数器限流&a…
阅读更多...
最新文章

Copyright @ 2022~2023