一篇文章认识Vue3

news2024/10/7 6:47:49

Vue 3 介绍

  1. Vue3 于 2022 年 2 月 7 日星期一成为新的默认版本！
  2. Vue3 性能更高，体积更小
  3. Vue3 在经过一年的迭代后，越来越好用。

官方文档：

  • vue3官方文档：vuejs.org/
  • vue3中文文档：v3.cn.vuejs.org/
  • vue3预发布版文档：staging-cn.vuejs.org/

目前已支持 vue3 的UI组件库:

  • element-plus

    element-plus.gitee.io/#/zh-CN (PC组件库)

    Element Plus，一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库。

  • vant

    vant-contrib.gitee.io/vant/v3/#/z…

    轻量、可靠的移动端 Vue 组件库。

    Vant 是有赞前端团队开源的移动端组件库，于 2016 年开源，已持续维护 4 年时间。

    目前 Vant 已完成了对 Vue 3.0 的适配工作，并发布了 Vant 3.0 版本

  • ant-design-vue (PC组件库)

    antdv.com/docs/vue/in…

    ant-design-vue 是 Ant Design 的 Vue 实现，组件的风格与 Ant Design 保持同步。

Vue3 动机 和 新特性

Vue3 设计理念 vue3js.cn/vue-composi…

动机与目的:

  1. 更好的 逻辑复用 与 代码组织 (composition组合式api)

    options 选项API(旧) => composition 组合API（新）, 效果: 代码组织更方便了, 逻辑复用更方便了 非常利于维护!!

  2. 更好的类型推导 (typescript支持)

    vue3 源码用 ts 重写了, vue3 对 ts 的支持更友好了 (ts 可以让代码更加稳定, 类型检测! )

vue3 新特性：

  1. 数据响应式原理重新实现 (ES6 proxy 替代了 ES5 的 Object.defineProperty)

    解决了: 例如数组的更新检测等bug, 大大优化了响应式监听的性能

    (原来检测对象属性的变化, 需要一个个对属性递归监听) proxy 可以直接对整个对象劫持

  2. 虚拟DOM - 新算法 (更快 更小)

  3. 提供了composition api, 可以更好的逻辑复用

  4. 模板可以有多个根元素

  5. 源码用 typescript 重写, 有更好的类型推导 (类型检测更为严格, 更稳定)

    …

小结： vue3 性能更高, 体积更小, 更利于复用, 代码维护更方便

vite介绍

Vite 官方中文文档：vitejs.cn/

Vite（法语意为 “快速的”，发音 /vit/，发音同 “veet”)是一种新型前端构建工具

优势

  • 💡 极速的服务启动，使用原生 ESM 文件，无需打包
  • ⚡️ 轻量快速的热重载，始终极快的模块热重载（HMR）
  • 🛠️丰富的功能，对 TypeScript、JSX、CSS 等支持开箱即用
  • 📦等等

Vite的优势？

传统方式

  • 基于打包器的方式启动，必须优先抓取并构建你的整个应用，然后才能提供服务。
  • 更新速度会随着应用体积增长而直线下降。

image-20220212224001104.png

vite 方式

  • Vite 以 原生 ESM 方式提供源码。这实际上是让浏览器接管了打包程序的部分工作。
  • Vite 只需要在浏览器请求源码时进行转换并按需提供源码。
  • 根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。

image-20220212224054798.png

Vite 的基本使用

目标：能够使用vite创建一个vue3的项目

（1）使用vite创建项目

npm create vite
# or
yarn create vite

（2）输入项目名字，默认为vite-project

image-20220212224535365.png

（3）选择创建的项目类型，选择vue即可

image-20220212224709912.png

（4）选择创建的vue项目类型， 不选ts

image-20220212224735340.png

（5）启动项目

image-20220212224801574.png

vite快捷使用

如果想要快速创建一个vue3项目，可以使用如下命令

  • 创建普通vue项目
yarn create vite vite-demo --template vue
  • 创建基于ts模板的项目
yarn create vite vite-demo-ts --template vue-ts

Vue3.0项目介绍

  • 删除src下所有的文件和代码
  • 创建App.vue
<template>
  <div>我是App组件</div>
</template>
​
  • 创建main.js文件
import { createApp } from 'vue'
import App from './App.vue'
​
createApp(App).mount('#app')

vscode插件说明

  • vue2中需要安装插件vetur，可以实现组件高亮。但是vue3的一些语法在vetur中报错。
  • vue3中需要安装插件volar，提供了更加强大的功能。
  • 所以，使用功能vue3，需要禁用或卸载vetur插件，安装volar插件。

image-20220212230447148.png

组合式API

composition API vs options API

  1. vue2 采用的就是 options API

    (1) 优点:易于学习和使用, 每个代码有着明确的位置 (例如: 数据放 data 中, 方法放 methods中)

    (2) 缺点: 相似的逻辑, 不容易复用, 在大项目中尤为明显

    (3) 虽然 optionsAPI 可以通过mixins 提取相同的逻辑, 但是也并不是特别好维护

  2. vue3 新增的就是 composition API

    (1) compositionAPI 是基于 逻辑功能 组织代码的, 一个功能 api 相关放到一起

    (2) 即使项目大了, 功能多了, 也能快速定位功能相关的 api

    (3) 大大的提升了 代码可读性 和 可维护性

  3. vue3 推荐使用 composition API, 也保留了options API

    即就算不用composition API, 用 vue2 的写法也完全兼容!!

setup 函数

composition api 的使用, 需要配置一个 setup 函数

  1. 从生命周期角度来看, setup 会在 beforeCreate 钩子函数之前执行
  2. setup 中不能使用 this, this 指向 undefined
  3. 在模版中需要使用的数据和函数，需要在 setup 返回。
  4. setup 函数是一个新的组件选项, 作为组件中 compositionAPI 的起点
<template>
  <div class="container">
    <h1 @click="say()">{{msg}}</h1>
  </div>
</template>

<script>
export default {
  setup () {
    console.log('setup执行了')
    console.log(this)
    // 定义数据和函数
    const msg = 'hi vue3'
    const say = () => {
      console.log(msg)
    }

    return { msg , say}
  },
  beforeCreate() {
    console.log('beforeCreate执行了')
    console.log(this)
  }
}
</script>

reactive 函数

前置说明:

  1. setup 需要有返回值, 只有返回的值才能在模板中使用
  2. 默认普通的数据, 不是响应式的

作用: 传入一个复杂数据类型，将复杂类型数据, 转换成响应式数据 （返回该对象的响应式代理）

<template>
  <div>{{ obj.name }}</div>
  <div>{{ obj.age }}</div>
  <button @click="obj.name = 'ls'">改值</button>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup () {
    // 1. setup 需要返回值, 返回的值才能在模板中使用
    // 2. 默认的普通的值不是响应式的, 需要用 reactive 函数
    const obj = reactive({
      name: 'zs',
      age: 18
    })

    return { obj }
  }
}
</script>

总结： 通常是用来定义响应式 对象数据

ref 函数

reactive 处理的数据, 必须是复杂类型, 如果是简单类型无法处理成响应式, 所以有 ref 函数!

作用: 对传入的数据（一般简单数据类型），包裹一层对象, 转换成响应式。

  1. ref 函数接收一个的值, 返回一个ref 响应式对象, 有唯一的属性 value
  2. 在 setup 函数中, 通过 ref 对象的 .value 属性, 可以访问到值
  3. 在模板中, ref 属性会自动解套, 不需要额外的 .value
  4. ref函数也支持传入复杂类型，传入复杂类型，也会做响应式处理
<template>
  <div>{{ money }}</div>
  <button @click="money++">改值</button>
</template>

<script>
import { reactive, ref } from 'vue'
export default {
  setup() {
    let money = ref(100)
    money.value++
    return {
      money
    }
  }
}
</script>

ref 和 reactive 的最佳使用方式：

  • 明确的对象，明确的属性，用 reactive，其他用 ref
  • 从vue3.2之后，更推荐使用 ref

script setup 语法(★)

script setup 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。相比于普通的 script 语法更加简洁

要使用这个语法，需要将 setup attribute 添加到 <script> 代码块上：

<script setup>
console.log('hello script setup')
</script>

顶层的绑定会自动暴露给模板，所以定义的变量，函数和import导入的内容都可以直接在模板中直接使用

<template>
  <div>
    <h3>根组件</h3>
    <div>点击次数：{{ count }}</div>
    <button @click="add">点击修改</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)
const add = () => {
  count.value++
}
</script>

计算属性 computed 函数

computed 函数调用时, 要接收一个处理函数, 处理函数中, 需要返回计算属性的值

<template>
  <div>我今年的年纪 <input type="text" v-model="age" /></div>
  <div>我明年的年龄 {{ nextAge }}</div>
  <div>我后年的年龄 <input type="text" v-model="nextAge2" /></div>
</template>

<script setup>
import { computed, ref } from 'vue'
const age = ref(10)
// 不带set的计算属性
const nextAge = computed(() => {
  return +age.value + 1
})

// 带set的计算属性
const nextAge2 = computed({
  get() {
    return +age.value + 2
  },
  set(value) {
    age.value = value - 2
  },
})
</script>

侦听器watch函数

watch监视, 接收三个参数
1. 参数1: 监视的数据源
2. 参数2: 回调函数
3. 参数3: 额外的配置

// 监听单个ref
const money = ref(100)
watch(money, (value, oldValue) => {
  console.log(value)
})

// 监听多个ref
const money = ref(100)
const count = ref(0)
watch([money, count], (value) => {
  console.log(value)
})

// 监听ref复杂数据
const user = ref({
  name: 'zs',
  age: 18,
})
watch(
  user,
  (value) => {
    console.log('user变化了', value)
  },
  {
    // 深度监听，，，当ref的值是一个复杂数据类型，需要深度监听
    deep: true,
    // 立即执行
    immediate: true
  }
)

// 监听对象的某个属性的变化
const user = ref({
  name: 'zs',
  age: 18,
})
watch(
  () => user.value.name,
  (value) => {
    console.log(value)
  }
)

钩子函数的使用

生命周期函数 vue3 中的生命周期函数, 需要在 setup 中调用

import { onMounted, onUpdated, onUnmounted } from 'vue'

const MyComponent = {
  setup() {
    onMounted(() => {
      console.log('mounted!')
    })
    onUpdated(() => {
      console.log('updated!')
    })
    onUnmounted(() => {
      console.log('unmounted!')
    })
  }
}

image-20220213225003030.png

组件通讯-父传子

目标：能够实现组件通讯中的父传子组件通讯

步骤：

  1. 父组件提供数据
  2. 父组件将数据传递给子组件
  3. 子组件通过 defineProps 进行接收
  4. 子组件渲染父组件传递的数据

核心代码：

父组件

<script setup>
import { ref } from 'vue'
// 在setup语法中，组件导入之后就能够直接使用，不需要使用components进行局部注册
import Son from './components/Son.vue'

const money = ref(100)
const car = ref('玛莎拉蒂')
</script>

<template>
  <div>
    <h1>我是父组件</h1>
    <div>金钱：{{ money }}</div>
    <div>车辆：{{ car }}</div>
    <hr />
    <Son :money="money" :car="car"></Son>
  </div>
</template>

子组件

<script setup>
import { computed } from 'vue'

// defineProps: 接收父组件传递的数据
const props = defineProps({
  money: Number,
  car: String,
})

const myMoney = computed(() => {
  return props.money + 100
})
</script>

<template>
  <div>
    <h3>我是子组件</h3>
    <div>{{ money }} --- {{ car }}</div>
  </div>
</template>

注意：如果使用defineProps接收数据，这个数据只能在模板中渲染，如果想要在script中也操作props属性，应该接收返回值。

组件通讯-子传父

目标：能够实现组件通讯中的子传父

步骤：

  1. 子组件通过 defineEmits 获取 emit 对象（setup中没有this)
  2. 子组件通过emit触发事件，并且传递数据
  3. 父组件提供方法
  4. 父组件通过自定义事件的方式给子组件注册事件

核心代码

子组件

<script setup>
defineProps({
  money: Number,
  car: String,
})

const emit = defineEmits(['changeMoney'])

const change = () => {
  emit('changeMoney', 10)
}
</script>

父组件

<script setup>
import { ref } from 'vue'
// 在setup语法中，组件导入之后就能够直接使用，不需要使用components进行局部注册
import Son from './components/Son.vue'

const money = ref(100)
const car = ref('玛莎拉蒂')
const changeMoney = (num) => {
  money.value = money.value - num
}
</script>


<Son :money="money" :car="car" @changeMoney="changeMoney"></Son>

依赖注入 - provide 和 inject

依赖注入, 可以非常方便的实现 跨层级的 组件通信

image-20220213110153307.png

父组件利用 provide 提供数据

<script setup>
import { provide, ref } from 'vue'
import Son from './components/Son.vue'
const money = ref(100)
provide('money', money)
</script>

<template>
  <div>
    <h1>我是父组件</h1>
    <div>金钱：{{ money }}</div>
    <hr />
    <Son></Son>
  </div>
</template>

子组件 (子孙后代, 都可以拿到这个数据)

<script setup>
import { inject } from 'vue'

const money = inject('money')
</script>

<template>
  <div>
    <h3>我是子组件--{{ money }}</h3>
    <button>修改数据</button>
  </div>
</template>

如果希望子传父, 可以 provide 传递一个方法

父组件

<script setup>
import { provide, ref } from 'vue'
import Son from './components/Son.vue'
const money = ref(100)
const changeMoney = (num) => {
  money.value = money.value - num
}
provide('money', money)
provide('changeMoney', changeMoney)
</script>

子组件

<script setup>
import { inject } from 'vue'

const money = inject('money')
const changeMoney = inject('changeMoney')
</script>

模板中 ref 的使用

联想之前的 ref 和 $refs， 获取模板的元素（dom元素，组件）

1 创建 ref => const hRef = ref(null)

2 模板中建立关联 => <h1 ref="hRef">钩子函数-----123</h1>

3 使用 => hRef.value

<script setup>
import { ref } from 'vue'

const hRef = ref(null)  
const clickFn = () => {
  hRef.value.innerText = '我不是标题'
}
</script>

<template>
  <div>
    <h1 ref="hRef">我是标题</h1>
    <button @click="clickFn">操作DOM</button>
  </div>
</template>

ref操作组件

<script setup>
import { ref } from 'vue'
import Form from './components/Form.vue'

// 1. 提供一个ref
const formRef = ref(null)

const fn = () => {
  console.log(formRef.value.count)
  formRef.value.sayHi()
}
</script>

<template>

  <Form ref="formRef"></Form>
</template>

需要配合defineExpose

<script setup>
import { ref } from 'vue'

const count = ref(0)
const sayHi = () => {
  console.log('表单校验方法')
}
// 暴露属性给外部组件使用
defineExpose({
  sayHi,
})
</script>

<template>
  <h3>我是Form组件</h3>
</template>

vue3 中废弃了过滤器

vue3.0 中不能使用过滤器，直接使用函数进行替代

<template>
  <h1>ref的使用</h1>
  <h3>我是一个h3的内容 {{ formatTime(now) }}</h3>
  <h3>{{ formatTime(other) }}</h3>
  <hr />
</template>

<script>
import moment from 'moment'
export default {
  setup() {
    // 过滤器
    const now = new Date()
    const other = new Date('2020-11-12 12:00:00')
    const formatTime = (value) => {
      return moment(value).format('YYYY-MM-DD')
    }
    
    return {
      now,
      formatTime,
      other,
    }
  },
}
</script>

补充-toRefs 函数

使用场景: 如果对一个响应数据, 进行解构 或者 展开, 会丢失他的响应式特性!

原因: vue3 底层是对 对象 进行监听劫持

作用: 对一个响应式对象的所有内部属性, 都做响应式处理

  1. reactive/ref的响应式功能是赋值给对象的, 如果给对象解构或者展开, 会让数据丢失响应式的能力
  2. 使用 toRefs 可以保证该对象展开的每个属性都是响应式的
<template>
  <div>{{ money }}</div>
  <div>{{ car }}</div>
  <div>{{ name }}</div>
  <button @click="money++">改值</button>
</template>

<script setup>
import { reactive, ref, toRefs } from 'vue'
const user = ref({
  name: 'zs',
  age: 18,
})
const { name, age } = toRefs(user.value)
</script>

vue-router4

vue升级vue3之后，配套的vue-router也升级为vue-router@4.x版本

vue-router4的语法和3的版本语法基本一致，但是有一些细微的修改。

vue-router官网：router.vuejs.org/

vue@2 + vue-router@3 + vuex@3   options api

vue@3 + vue-router@4 + vuex@4    composition api

基本使用

(0)安装vue-router

yarn add vue-router
or
npm install vue-router

(1)创建组件Home.vue和Login.vue

(2)创建文件router/index.js

import {
  createRouter,
  createWebHashHistory,
  createWebHistory,
} from 'vue-router'

// 1. 创建路由
const router = createRouter({
  // 创建history模式的路由
  // history: createWebHistory(),
  // 创建hash模式的路由
  history: createWebHashHistory(),
  // 配置路由规则
  routes: [
    { path: '/home', component: () => import('../pages/Home.vue') },
    { path: '/login', component: () => import('../pages/Login.vue') },
  ],
})

export default router

（3）在main.js中引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

(4)App.vue中使用

<template>
  <ul>
    <li>
      <router-link to="/home">首页</router-link>
    </li>
    <li>
      <router-link to="/login">登陆</router-link>
    </li>
  </ul>

  <!-- 路由出口 -->
  <router-view></router-view>
</template>

组件中使用route与router

由于组件中无法访问this,因为无法访问this.route与this.route与this.route与this.router

（1）通过useRoute()可以获取route信息

<script>
import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    console.log(route.path)
    console.log(route.fullPath)
  },
}
</script>

（2）通过useRouter()可以获取router信息

<script>
import { useRouter } from 'vue-router'

export default {
  setup() {
    const router = useRouter()
    const login = () => {
      router.push('/home')
    }
    return {
      login,
    }
  },
}
</script>

vuex4

基本使用

  1. 安装依赖包
yarn add vuex
or
npm install vuex
  1. 创建文件 store/index.js
import { createStore } from 'vuex'

const store = createStore({
  state: {
    money: 100,
  },
  mutations: {
    changeMoney(state) {
      state.money += 10
    },
  },
  actions: {
    changeMoneyAsync(context) {
      setTimeout(() => {
        context.commit('changeMoney')
      }, 1000)
    },
  },
  getters: {
    double(state) {
      return state.money * 2
    },
  },
})

export default store
  1. 在main.js中关联store
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
const app = createApp(App)

app.use(router)
app.use(store)
app.mount('#app')

在组件中使用vuex

const store = useStore()

const money = computed(() => store.state.money)
const double = computed(() => store.getters.double)


// mapState  mapMutations mapActions mapGetters  需要配合options api才能使用

总结：vuex4 在vue3项目中能用，但是不好用,推荐pinia，上一篇文章有介绍🎈

新增内置组件：Teleport 传送门组件

拓展阅读：官方文档

Vue3 官方文档中提到同样的定位问题：

当在初始 HTML 结构中使用这个组件时，会有一些潜在的问题：

  • position: fixed 能够相对于视口放置的条件是：没有任何祖先元素设置了 transform、perspective 或者 filter 样式属性。而如果我们想要用 transform 为祖先节点设置动画，则会破坏模态框的布局结构！
  • 模态框的 z-index 被包含它的元素所制约。

基本用法

  • 传送门 to 属性可以指定传送到某个节点。
 <template>
  <!-- 🔔 Teleport 的内容会传送到 body 标签中 -->
  <div style="transform:translate(0) ;">
  <Teleport to="body">
        <h1>传送内容</h1>
  </Teleport>
 </template>
  
  <style lang="less" scoped>
  .box{
    position: fixed;
    width: 200px;
    margin-left: 500px;
    margin-top: 100px;
  }
</style>

image.png

传送到指定结构

  • 准备一个结构接收。
<template>
   <div id="transfer"></div>
   
   <div style="transform:translate(0) ;">
   <Teleport to="#transfer">
          <div class="box">传送内容</div>
   </Teleport>
   </div>
</template>

<style lang="less" scoped>
  .box{
    position: fixed;
    width: 200px;
    margin-left: 500px;
    margin-top: 100px;
}
</style>

image.png

  • 如果要传送到指定结构，结构需要提前准备，否则报错。🚨

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

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

相关文章

挂耳式耳机什么牌子的好？年度最值得入手的挂耳式耳机推荐

挂耳式耳机什么牌子的好？年度最值得入手的挂耳式耳机推荐

近年来耳机市场发展迅猛&#xff0c;蓝牙耳机品类日益增多。而挂耳式耳机尤其火爆&#xff0c;得益于其出色的佩戴体验&#xff0c;赢得了众多消费者的青睐。市场上挂耳式耳机的品牌种类繁多&#xff0c;让许多消费者在选择时感到困惑&#xff0c;挂耳机耳机什么牌子的好&#…
阅读更多...
【React】redux状态管理、react-redux状态管理高级封装模块化

【React】redux状态管理、react-redux状态管理高级封装模块化

【React】react组件传参、redux状态管理 一、redux全局状态管理1、redux概述2、redux的组成1.1 State-状态1.2 Action-事件1.3 Reducer1.4 Store 3、redux入门案例1.1 前期准备1.2 构建store1.2.1 在src下新建store文件夹1.2.2 在store文件夹下新建index.ts文件1.2.3 在index.t…
阅读更多...
用的到的linux-删除文件-Day3

用的到的linux-删除文件-Day3

前言&#xff1a; 上一节&#xff0c;我们讲到了怎么去移动文件&#xff0c;其中使用到两大类的脚本命令即cp和mv。各两种命令都可以完成移动&#xff0c;但是cp是复制粘贴的方式&#xff0c;可以选择原封不动的复制粘贴过来&#xff0c;即不修改文件及文件夹的创建时间等&…
阅读更多...
SSH免密切换服务器案例-ssh协议（公钥和私钥）

SSH免密切换服务器案例-ssh协议（公钥和私钥）

公钥和私钥理解 公钥提供加密&#xff0c;私钥解密&#xff0c;公钥可以共享&#xff0c;私钥不可以。举例公钥相当于锁头&#xff0c;可以给别人用&#xff0c;钥匙相当于私钥&#xff0c;只能开自己发出去的锁头&#xff0c;也就是私钥和公钥成对&#xff0c;私钥只能解密对…
阅读更多...
如何做报表? 如何建立指标体系

如何做报表? 如何建立指标体系

如何制作报表呢&#xff1f; 通过下面5步来制作报表。 如何建立指标体系? 很多数据分析招聘的要求里会写“构建指标体系”&#xff0c;所以建立指标体系是数据分析人员的一项基本技能。下面从4个问题出发&#xff0c;系统介绍指标体系&#xff1a; &#xff08;1&#xf…
阅读更多...
编译器的实用调试技巧

编译器的实用调试技巧

目录 一. 什么是bug 二.调试的基本步骤 三.Debug和Release 四.常用快捷键 注意&#xff1a;如果你的快捷键被系统占用&#xff0c;那么可以尝试用&#xff1a;FN快捷键 F10和F11的区别 &#xff1a; F5和F9配合使用 五.如果要观察某个成员 六.断点的使用 F5和F9配合…
阅读更多...
【Gephi项目实战-带数据集】利用gephi绘制微博肖战超话120位用户关系图，并计算整体网络指标与节点指标

【Gephi项目实战-带数据集】利用gephi绘制微博肖战超话120位用户关系图，并计算整体网络指标与节点指标

数据集在评论区&#xff0c;B站演示视频在评论区&#xff01; 简介 最近2天需要用到gephi做社会网络分析&#xff0c;于是从0开始接触gephi并摸索出了gephi的基本使用指南。下面将结合真实的节点文件与边文件&#xff0c;利用gephi绘制社会网络并计算相关测量指标。整个过程会…
阅读更多...
BC1.2 SDP/CDP/DCP介绍

BC1.2 SDP/CDP/DCP介绍

参考&#xff1a;文章链接 Microchip Lightning Support 问题 Q1.) 在Microchip产品的数据表中提到了电池充电技术&#xff0c;但以下术语是什么意思: BC1.2? SDP? CDP? DCP? “SE1”? Q2.) 如何配置Microchip Hub以启用这些功能&#xff1f; Q3.) 如何在我的硬件上物…
阅读更多...
Profinet转CANopen主站网关与堡盟编码器通讯案例

Profinet转CANopen主站网关与堡盟编码器通讯案例

Profinet转CANopen主站网关(XD-COPNm20)为CPU与堡盟编码器的通讯提供了CANopen协议向Profinet协议转换互通的桥梁。CANopen是一种基于CAN总线的通讯协议&#xff0c;它被广泛应用于工业自动化领域&#xff0c;而Profinet是一种以太网协议&#xff0c;其优点是高速传输和广泛的可…
阅读更多...
python-题库篇-数学

python-题库篇-数学

文章目录 求最大公约数和最小公倍数斐波那契数列求和运算求前n阶乘的和求年龄 求最大公约数和最小公倍数 两个数的最大公约数是两个数的公共因子中最大的那个数&#xff1b;两个数的最小公倍数 则是能够同时被两个数整除的最小的那个数。 输入&#xff1a;&#xff08;120 和…
阅读更多...
Vue-easy-tree封装及使用

Vue-easy-tree封装及使用

1.使用及安装 下载依赖 npm install wchbrad/vue-easy-tree引入俩种方案 1.在main.js中引入 import VueEasyTree from "wchbrad/vue-easy-tree"; import "wchbrad/vue-easy-tree/src/assets/index.scss" Vue.use(VueEasyTree)2.当前页面引入 import VueEa…
阅读更多...
红队渗透靶机:LORD OF THE ROOT: 1.0.1

红队渗透靶机:LORD OF THE ROOT: 1.0.1

目录 信息收集 1、arp 2、nmap 3、knock 4、nikto 目录探测 1、gobuster 2、dirsearch WEB sqlmap 爆库 爆表 爆列 爆字段 hydra爆破 ssh登录 提权 信息收集 内核提权 信息收集 1、arp ┌──(root㉿ru)-[~/kali] └─# arp-scan -l Interface: eth0, ty…
阅读更多...
Redis（三）主从架构、Redis哨兵架构、Redis集群方案对比、Redis高可用集群搭建、Redis高可用集群之水平扩展

Redis（三）主从架构、Redis哨兵架构、Redis集群方案对比、Redis高可用集群搭建、Redis高可用集群之水平扩展

转自 极客时间 Redis主从架构 redis主从架构搭建&#xff0c;配置从节点步骤&#xff1a; 1、复制一份redis.conf文件2、将相关配置修改为如下值&#xff1a; port 6380 pidfile /var/run/redis_6380.pid # 把pid进程号写入pidfile配置的文件 logfile "6380.log" …
阅读更多...
使用代理IP有风险吗？如何安全使用代理IP?

使用代理IP有风险吗？如何安全使用代理IP?

代理IP用途无处不在。它们允许您隐藏真实IP地址&#xff0c;从而实现匿名性和隐私保护。这对于保护个人信息、绕过地理受限的内容或访问特定网站都至关重要。 然而&#xff0c;正如任何技术工具一样&#xff0c;代理IP地址也伴随着潜在的风险和威胁。不法分子可能会滥用代理IP…
阅读更多...
【计算机学院寒假社会实践】——走进社区，共建美好家园

【计算机学院寒假社会实践】——走进社区，共建美好家园

为了加强社区基层党组织建设和改进社区工作&#xff0c;推动更多资源向社区倾斜&#xff0c;曲阜师范大学计算机学院“青年扎根基层&#xff0c;服务走进社区”实践队员饶子恒在2024年1月27日来到了山东省菏泽市郓城县唐塔社区&#xff0c;对社区卫生进行清洁工作。 图为实践队…
阅读更多...
pdf高亮显示

pdf高亮显示

现在前端pdf需求越来越多&#xff0c;比如发票的显示&#xff0c;文件的显示&#xff0c;怎么实现具体步骤百度一下吧&#xff0c;这里不做详细介绍&#xff0c;主要记录下遇到的问题 1.页面pdf已经看到了&#xff0c;但是 iframe.contentWindow.PDFViewerApplication显示unde…
阅读更多...
Python中的while循环，知其然知其所以然

Python中的while循环，知其然知其所以然

文章目录 while循环结构1.用循环打印1 ~ 100步骤解析2. 1 ~ 100的累加和3.死循环1. 用死循环的方法实现 1 ~ 100累加和 4. 单向循环(1)打印 一行十个小星星*(2)通过打印一个变量的形式,展现一行十个小星星(3)一行十个换色的星星 ★☆★☆★☆★☆★☆(4)用一个循环,打印十行十列…
阅读更多...
JAVA中的object类

JAVA中的object类

一、equals方法 1.和equals的比较 既可以判断基本类型有可以判断引用类型 如果判断基本类型&#xff0c;判断的值是否相等 int num1 10; double num2 10.0; System.out.println(num1 num2); 如果判断引用类型&#xff0c;判断的地址是否相等&#xff0c;即判断是不是同一…
阅读更多...
【教程】一个比较良心的C++代码混淆器

【教程】一个比较良心的C++代码混淆器

这是一个比较良心的C代码混淆器&#xff0c;用于信息竞赛训练和保护代码免受抄袭。本文将介绍这个混淆器的使用方法、混淆效果和已知的一些bug。同时&#xff0c;我们也会给出一些示例来演示混淆器的具体操作。 引言 在信息竞赛训练和实际开发中&#xff0c;保护代码的安全性和…
阅读更多...
HomeAssistant系统添加HACS插件商店与远程控制家中智能家居

HomeAssistant系统添加HACS插件商店与远程控制家中智能家居

文章目录 基本条件一、下载HACS源码二、添加HACS集成三、绑定米家设备 ​ 上文介绍了如何实现群晖Docker部署HomeAssistant&#xff0c;通过内网穿透在户外控制家庭中枢。本文将介绍如何安装HACS插件商店&#xff0c;将米家&#xff0c;果家设备接入 Home Assistant。 基本条件…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023