Vue3基础1

news2024/12/28 20:12:25

1、optionsApi 与 Composition Api

选项式与组合式

组合就是一个一个 的函数 ，每个函数里都有 data，methods，compute 等等

2、拉开序幕的setup

setup执行时机 在 beforeCreate之前

<template>
  <div class="person">
    <h2>姓名:{{ name }}</h2>
    <h2>年龄:{{ age }}</h2>

    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>

<script lang="ts">
export default {
  name: "Person",
  setup() {
    //setup 函数中的this是undefined vue3中已经弱化this了
    //数据，原来是写在data中的,此时的name，age，tel都不是响应式的数据
    //数据
    let name = "张三";//注意此时的name不是响应式的
    let age = 13;//注意此时的age不是响应式的
    let tel = "123123123";

    function changeName() {
      name = "李四";//注意这样修改name,页面是没有变化的,因为name不是响应式的
    }

    function changeAge() {
      age = 20;
    }

    function showTel() {
      alert(tel);
    }

    return {
      name,
      age,
      changeName,
      changeAge,
      showTel,
    };
  },
  //选项式，配置式写法
  //   data() {
  //     return {
  //       name: "张三",
  //       age: 18,
  //       tel: "123456",
  //     };
  //   },
  //   methods: {
  //     changeAge() {
  //       this.age = 13;
  //     },
  //     changeName() {
  //       this.name = "zhang-san";
  //     },
  //     showTel() {
  //       alert(this.tel);
  //     },
  //   },
};
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>

3.Setup语法糖

<template>
  <div class="person">
    <h2>姓名:{{ name }}</h2>
    <h2>年龄:{{ age }}</h2>

    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>

  </div>
</template>

<script lang="ts">
export default {
  name: "Person",
 
  
};
</script>

<script  lang="ts" setup>
    

let name = "张三"; //注意此时的name不是响应式的
let age = 13; //注意此时的age不是响应式的
let tel = "123123123";

function changeName() {
  name = "李四"; //注意这样修改name,页面是没有变化的,因为name不是响应式的
}

function changeAge() {
  age = 20;
}

function showTel() {
  alert(tel);
}



</script>



<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>

但还是太麻烦，为了一个名字多写几行代码

我们安装一个插件

npm i  vite-plugin-vue-setup-extend -D

-D 代表是开发时用的插件， 打包以后就不用了

在配置文件里面配置一下插件

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    VueSetupExtend()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})


<template>
  <div class="person">
    <h2>姓名:{{ name }}</h2>
    <h2>年龄:{{ age }}</h2>

    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>

  </div>
</template>



<!-- 会自动暴露出去 -->
<script  lang="ts" setup  name="Person123">
    

let name = "张三"; //注意此时的name不是响应式的
let age = 13; //注意此时的age不是响应式的
let tel = "123123123";

function changeName() {
  name = "李四"; //注意这样修改name,页面是没有变化的,因为name不是响应式的
}

function changeAge() {
  age = 20;
}

function showTel() {
  alert(tel);
}



</script>



<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>

 4.ref响应式数据(定义基本类型数据)

<template>
  <div class="person">
    <h2>姓名:{{ name }}</h2>
    <h2>年龄:{{ age }}</h2>

    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>



<!-- 会自动暴露出去 -->
<script  lang="ts" setup  name="Person">
import { ref } from "vue";

let name = ref("张三"); //注意此时的name不是响应式的
let age = ref(13); //注意此时的age不是响应式的
let tel = "123123123";

function changeName() {
  name.value = "李四"; //注意这样修改name,页面是没有变化的,因为name不是响应式的
}

function changeAge() {
  age.value = 20;
}

function showTel() {
  alert(tel);
}
</script>



<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>

5.reactive （引用类型的数据）

<template>
  <div class="person">
    <div>一辆{{ car.brand }}车,价值{{ car.price }}万</div>
    <button @click="changePrice">修改汽车的价格</button>
    <hr />
    <h2>游戏列表</h2>
    <ul>
      <li v-for="game in games" :key="game.id">
        {{ game.name }}
      </li>
    </ul>
    <button @click="changeGame">改变第三个游戏的名字</button>
  </div>
</template>



<!-- 会自动暴露出去 -->
<script  lang="ts" setup  name="Person">
import { reactive } from "vue";
let car = reactive({ brand: "奔驰", price: 100 });
let games = reactive([
  { id: "001", name: "LOL" },
  { id: "002", name: "CS" },
  { id: "003", name: "CF" },
]);

function changePrice() {
  car.price += 10;
}

function changeGame() {
  games[2].name = '逆战';
}
</script>



<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>

 6.ref 定义对象类型的数据

<template>
  <div class="person">
    <div>一辆{{ car.brand }}车,价值{{ car.price }}万</div>
    <button @click="changePrice">修改汽车的价格</button>
    <hr />
    <h2>游戏列表</h2>
    <ul>
      <li v-for="game in games" :key="game.id">
        {{ game.name }}
      </li>
    </ul>
    <button @click="changeGame">改变第三个游戏的名字</button>
  </div>
</template>



<!-- 会自动暴露出去 -->
<script  lang="ts" setup  name="Person">
import { ref } from "vue";
let car = ref({ brand: "奔驰", price: 100 });
let games = ref([
  { id: "001", name: "LOL" },
  { id: "002", name: "CS" },
  { id: "003", name: "CF" },
]);

function changePrice() {
  car.value.price += 10;
}

function changeGame() {
  games.value[2].name = '逆战';
}
</script>



<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>

7.ref对比reactive

这个开启能让ref自动加上 value

8.计算属性

<template>
  <div class="person">

    姓: <input type="text" v-model="firstName"><br>
    名: <input type="text" v-model="lastName"><br>
    <button @click="changeFullName">将全名改为li-4</button>
    全名: <span>{{ fullName }}</span>
  </div>
</template>



<!-- 会自动暴露出去 -->
<script  lang="ts" setup  name="Person">
 import { ref ,computed} from 'vue'

 let firstName = ref('张');
 let lastName = ref('三');

 //这么定义的fullName 是只读的不允许修改的
//  let fullName = computed(()=>{
//    return firstName.value +'-'+ lastName.value;
//  })

//也是一个ref响应式数据
 let fullName = computed({
   get(){
     return firstName.value +'-'+ lastName.value;
   },
   set(value){
      const [first,last] = value.split('-')
      firstName.value = first;
      lastName.value = last;
   }
 })


function changeFullName(){
  console.log(fullName.value);
  fullName.value = 'li-4';
  
  
}


</script>



<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>

9.监听WatchEffect

<template>
  <div class="person">
    <h2>需求:当水温达到60度，或水位达到80cm 时,给服务器发请求</h2>
    <h2>当前水温为{{ tmp }} ℃</h2>
    <h2>当前水位为{{ height }} cm</h2>
    <button @click="changeTmp">水温+10</button>
    <button @click="changeHeight">水位+10</button>
  </div>
</template>



<!-- 会自动暴露出去 -->
<script  lang="ts" setup  name="Person">
import { ref, watch, watchEffect } from "vue";

const tmp = ref(10);
const height = ref(0);

function changeTmp() {
  tmp.value += 10;
}
function changeHeight() {
  height.value += 10;
}
//watch实现
// watch([tmp,height],(value)=>{
//  // 从value中获取最新的temp值、height值
//  const [newTemp,newHeight] = value
//     // 室温达到60℃，或水位达到80cm，立刻联系服务器
//     if(newTemp >= 60 || newHeight >= 80){
//       console.log('联系服务器')
//     }

// })

//watchEffect实现 一上来会执行一遍
watchEffect(() => {
  console.log("@");
  //这两个数据变化的时候，这个函数的回调会执行一次
  if (tmp.value >= 60 || height.value >= 80) {
    console.log("联系服务器");
  }
});
</script>



<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>

10.ref属性

Person组件 

<template>
  <div class="person">
      <h1>中国</h1>
      <h2 ref="titie2">北京</h2>
      <h3>尚硅谷</h3>

      <button @click="showLog">点我输出H2</button>
  </div>
</template>



<!-- 会自动暴露出去 -->
<script  lang="ts" setup  name="Person">

import { ref ,defineExpose} from "vue";
//创建一个 title2,用于存储ref标记的内容

let titie2 = ref();
let a = ref(1);
let b = ref(2);
let c = ref(3);
  function showLog(){
      // console.log(document.getElementById('titie2'));
      console.log(titie2.value);
      
      

  }

  //要暴露出去，父组件才能看到子组件实例暴露的数据
  defineExpose({
      a,
      b,
      c
  })
  

</script>



<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>

 App组件

<template>
    <h2 ref="title2">你好</h2>
    <button @click="showLog">点击输出Person组件</button>
     <Person ref="ren"/>
</template>

<script lang="ts" setup name="App">
//js 或 ts
import Person from './components/Person.vue';
import {ref,watchEffect} from 'vue';

let title2 = ref();
let ren = ref();

function showLog(){
    console.log(ren.value);
}


</script>

<style scoped>
/* css */
.app{
    background-color: #ddd;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
</style>

11.回顾TS 接口 类 泛型 

但是得在 

{
  "compilerOptions": {
    // ...
    "baseUrl": "./",  // 这里需要配置
    "paths": {
      "@/*": ["./src/*"]  // 这里需要配置
    }
    // 如果baseUrl设置为'src',那paths就应该配置为{"@/*": "./*"},如下：
    // "baseUrl": "src",
    // "paths": {
    //  "@/*": ["./*"]
    // }
    // 相关baseUrl，paths说明请查看官方文档
  },
  // include也需要配置以下：
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules"]
}

加上上面的配置 ，这样 @/ 是 src 目录 而且不会飘红

回顾

<template>
  <div class="person">???</div>
</template>



<!-- 会自动暴露出去 -->
<script  lang="ts" setup  name="Person">
import { type PersonInter,type PersonS } from "@/types";

// let person: PersonInter = {
//   id: "01",
//   name: "张三",
//   age: 18,
// };

// let personList: Array<PersonInter> = [
//   {
//     id: "01",
//     name: "张三",
//     age: 18,
//   },
//   {
//     id: "02",
//     name: "李四",
//     age: 19,
//   },
// ];

 
let personList: PersonS = [
  {
    id: "01",
    name: "张三",
    age: 18,
  },
  {
    id: "02",
    name: "李四",
    age: 19,
  },
];







</script>



<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>

 

//定义了一个接口,用于限制person对象的具体属性
export  interface PersonInter{
    id:string,
    name:string,
    age:number
}

// export type PersonS = Array<PersonInter>

export type PersonS = PersonInter[]
{
  "compilerOptions": {
    // ...
    "baseUrl": "./",  // 这里需要配置
    "paths": {
      "@/*": ["./src/*"]  // 这里需要配置
    }
    // 如果baseUrl设置为'src',那paths就应该配置为{"@/*": "./*"},如下：
    // "baseUrl": "src",
    // "paths": {
    //  "@/*": ["./*"]
    // }
    // 相关baseUrl，paths说明请查看官方文档
  },
  // include也需要配置以下：
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules"]
}

12.props 使用

<template>
  <div class="person">
    <ul>
      <li v-for="item in personList" :key="item.id">
        {{ item.id }} -- {{ item.name }} -- {{ item.age }}
      </li>
    </ul>
  </div>
</template>



<!-- 会自动暴露出去 -->
<script  lang="ts" setup  name="Person">
//带有 define开头的函数不用引入 在 vue3 里叫做宏函数 可以直接使用
  import {defineProps,withDefaults} from 'vue'
  import {type PersonS} from '@/types'

  //第一种写法 接受list,a 同时将props保存起来
//  let x = defineProps(['personList','a'])

// 第二种写法 限制类型
// let x = defineProps<{
//   personList?:PersonS,//可空
//   a:string
// }>()

//第三种写法 接受list+限制类型+限制必要性+指定默认值

 
let x = withDefaults(defineProps<{
  personList?:PersonS,//可空
  a:string
}>(),{
  personList:()=>
    [{
    id:'009',
    name:'王五',
    age:20
  }],
  a:'哈哈哈'
  
})
 console.log(x.a);
 


</script>



<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>
<template>
     <Person :person-list="personList" :a="'哈哈'"/>
</template>

<script lang="ts" setup name="App">
//js 或 ts
import Person from './components/Person.vue';
import {type PersonS} from '@/types';
import {reactive} from 'vue';

//可以传入泛型
let personList = reactive<PersonS>([
     {
          id:'001',
          name:'张三',
          age:18
     },
     {
          id:'002',
          name:'李四',
          age:19
     }
     ,
     {
          id:'003',
          name:'王五',
          age:20,
     }

])

</script>

<style scoped>

</style>

13.生命周期

<template>
  <div class="person">
    <h2>当前求和为:{{ sum }}</h2>
    <button @click="add">点我加一</button>
  </div>
</template>



<!-- 会自动暴露出去 -->
<script  lang="ts" setup  name="Person">
import {
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from "vue";

let sum = ref(0);

//创建 beforeCreate created
console.log("创建");

//挂载之前
onBeforeMount(() => {
  console.log("挂载之前");
});

//挂载完毕
onMounted(() => {
  console.log("挂载完毕");
});
//更新之前
onBeforeUpdate(() => {
  console.log("更新之前");
});

//更新完毕
onUpdated(() => {
  console.log("更新完毕");
});

//卸载之前
onBeforeUnmount(() => {
  console.log("卸载之前");
});

//卸载完毕
onUnmounted(() => {
  console.log("卸载完毕");
});

function add() {
  sum.value++;
}
</script>



<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>

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

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

相关文章

Qt：玩转QPainter序列四补充(裁剪家族)

Qt：玩转QPainter序列四补充(裁剪家族)

前言 本文补充上篇缺失的裁剪家族。 正文 9.裁剪家族 QRegion clipRegion() const; 功能&#xff1a;返回当前的剪裁区域 (clip region)。剪裁区域限制了绘制操作的范围&#xff0c;只有在剪裁区域内的部分才会被绘制。返回值&#xff1a;一个 QRegion 对象&#xff0c;表…
阅读更多...
【c语法】##__VA_ARGS__与__VA_ARGS__

【c语法】##__VA_ARGS__与__VA_ARGS__

欢迎来到 破晓的历程的 博客 ⛺️不负时光&#xff0c;不负己✈️ 文章目录 引言__VA_ARGS__ 引言 在调试过程中&#xff0c;我们经常会自定义打印&#xff0c;比如日志信息的输出&#xff0c;这时就会用VA_ARGS,接下来详细讲解&#xff01; VA_ARGS __VA_ARGS__是C语言设定…
阅读更多...
数据展现新方式，Excel子弹图制作全攻略！

数据展现新方式，Excel子弹图制作全攻略！

在做数据汇报时&#xff0c;如何让你的报告脱颖而出&#xff0c;瞬间吸引老板和同事的注意力&#xff1f;答案就是子弹图&#xff01;今天&#xff0c;我们就来教你如何利用Excel这个强大的工具&#xff0c;轻松制作出专业又美观的子弹图&#xff0c;不论你是数据小白还是职场老…
阅读更多...
sqli-labs靶场通关攻略(31-35关）

sqli-labs靶场通关攻略(31-35关）

第31关&#xff08; ") 闭合&#xff09; 查数据库 ?id") union select 1,2,database() -- 查表 ?id") union select 1,2,group_concat(table_name) from information_schema.tables where table_schemasecurity-- 查列 ?id") union select 1,2,gro…
阅读更多...
量化交易backtrader实践(四)_评价统计篇(2)_评价输出

量化交易backtrader实践(四)_评价统计篇(2)_评价输出

上节回顾 上一节我们对backtrader内置的一堆评价指标进行了实践&#xff0c;从视觉上对这些评价指标的输出参数有了个大概的了解。接下来&#xff0c;我们在循环对多支股票或多个策略进行回测的时候&#xff0c;就可以将评价的一些值进行输出了&#xff0c;这样就能对于股票和…
阅读更多...
建筑企业如何搭建数据仓库？做好这三步，大幅节约企业成本！

建筑企业如何搭建数据仓库？做好这三步，大幅节约企业成本！

在当今这个数据驱动的时代&#xff0c;建筑企业正面临着前所未有的挑战和机遇。随着项目规模的扩大和市场环境的复杂化&#xff0c;如何有效管理和分析海量数据&#xff0c;已经成为提升企业竞争力的关键。数据仓库作为企业数据管理的核心&#xff0c;不仅能够整合分散的数据资…
阅读更多...
攻防世界 reverse_re3

攻防世界 reverse_re3

前言&#xff1a;做题笔记。 下载解压 查壳。 64ida 打开 查找字符并跟进 wasd一看&#xff0c;这题就是关于迷宫的题。跟进看看。 懵。。。不过还是得仔细看看。 观察发现。 进去看看。 然后最开始&#xff0c;因为数据太多把我卡住了。。。 回过头仔细看看。 猜测dword_202…
阅读更多...
企业建站技术路线探索

企业建站技术路线探索

前言 企业站是指企业或公司创建的官方网站&#xff0c;用于展示企业信息、产品和服务。它通常包括公司简介、产品或服务介绍、联系方式、新闻更新等内容。企业站的目的是提升品牌形象、提供客户服务和促进业务发展。在跨境贸易中&#xff0c;企业建站尤为关键&#xff0c;因为…
阅读更多...
数据库集群技术

数据库集群技术

源码安装mysql mysql.com [https://downloads.mysql.com/archives/community/]: 官网下载 安装依赖性&#xff1a; [rootmysql-node2 ~]# dnf install cmake gcc-c openssl-devel \ ncurses-devel.x86_64 libtirpc-devel-1.3.3-8.el9_4.x86_64.rpm rpcgen.x86_64 下载并解压源…
阅读更多...
Netty系列-1 NioEventLoopGroup和NioEventLoop介绍

Netty系列-1 NioEventLoopGroup和NioEventLoop介绍

背景 从本文开始开启一个新的专题Netty系列&#xff0c;用于收集Netty相关的文章&#xff0c;内容包含Netty的使用方式、运行原理等。 基于io.netty:netty-all:4.1.49.Final版本进行介绍 1.NioEventLoopGroup 介绍NioEventLoopGroup之前&#xff0c;有几个相关的组件需要提前…
阅读更多...
idea导入maven项目（别人的项目）爆红

idea导入maven项目（别人的项目）爆红

作为一个经常学习交流的人&#xff0c;或者工作需要&#xff0c;我们都或多或少会把别人写好的代码拷贝过来学习或编辑&#xff0c;大多数时候都是把整个项目拿过来;但是往往把代码拿到之后放在自己电脑用 idea 打开的时候就会出现 pom.xml 文件红线报错&#xff0c;然后倒入的…
阅读更多...
大模型企业应用落地系列》基于大模型的对话式推荐系统》技术架构设计全攻略

大模型企业应用落地系列》基于大模型的对话式推荐系统》技术架构设计全攻略

注&#xff1a;此文章内容均节选自充电了么创始人&#xff0c;CEO兼CTO陈敬雷老师的新书《自然语言处理原理与实战》&#xff08;人工智能科学与技术丛书&#xff09;【陈敬雷编著】【清华大学出版社】 文章目录 大模型企业应用落地系列全貌基于大模型的对话式推荐系统》技术架…
阅读更多...
如何使用ssm实现投稿系统+vue

如何使用ssm实现投稿系统+vue

TOC ssm231论文投稿系统vue 系统概述 1.1 研究背景 如今互联网高速发展&#xff0c;网络遍布全球&#xff0c;通过互联网发布的消息能快而方便的传播到世界每个角落&#xff0c;并且互联网上能传播的信息也很广&#xff0c;比如文字、图片、声音、视频等。从而&#xff0c;…
阅读更多...
软件测试 | 概念（1）

软件测试 | 概念（1）

目录 前言 需求的概念 开发模型 软件的生命周期 常见开发模型 瀑布模型 螺旋模型 增量模型&#xff0c;迭代模型 敏捷模型 Scrum模型 测试模型 V模型 W模型&#xff08;双V模型&#xff09; 前言 测试&#xff1a;验证软件的特性是否满足用户的需求。 用户的需求…
阅读更多...
vue3前端界面布置到服务器，使用户能用网址访问到界面

vue3前端界面布置到服务器，使用户能用网址访问到界面

1.下载Nginx&#xff1a; nginx: download 2.下载好的Nginx解压缩&#xff0c; 在解压缩的文件夹下找到conf > nginx.conf&#xff0c;修改nginx.conf中的server&#xff0c;配置服务器的ip地址和端口号 3.执行npm run build命令&#xff0c;vue生成的dist下的文件全部放置在…
阅读更多...
基于微信小程序的行李寄存管理系统的设计与实现(论文+源码)_kaic

基于微信小程序的行李寄存管理系统的设计与实现(论文+源码)_kaic

基于微信小程序的行李寄存管理系统的设计与实现(论文源码)_kaic 摘 要 人们外出旅行的时候&#xff0c;经常会需要到行李寄存的服务。行李寄存处在全国各地都很常见。现存的行李寄存方式很传统&#xff0c;适合小规模的行李寄存&#xff0c;当行李数量较多时&#xff0c;就…
阅读更多...
【领域驱动设计 打通DDD最小闭环】三 模型的建立-领域建模

【领域驱动设计 打通DDD最小闭环】三 模型的建立-领域建模

本篇BLOG为DDD流程的第二步&#xff0c;在模型的建立阶段&#xff0c;领域专家与技术人员通过领域建模来完成更为细致的模型建立讨论 领域建模的目的 领域建模主要有两个目的&#xff1a; 将知识可视化&#xff0c;准确、深刻地反映领域知识&#xff0c;并且在业务和技术人…
阅读更多...
神经网络——非线性激活

神经网络——非线性激活

1 非线性激活 1.1 几种常见的非线性激活&#xff1a; ReLU (Rectified Linear Unit)线性整流函数 Sigmoid 1.2代码实战&#xff1a; 1.2.1 ReLU import torch from torch import nn from torch.nn import ReLUinputtorch.tensor([[1,-0.5],[-1,3]])inputtorch.reshape(…
阅读更多...
HT97226 160mW免输出耦合电容的立体声耳机放大器

HT97226 160mW免输出耦合电容的立体声耳机放大器

特点&#xff1a; 输出无需隔直流电容 卓越的低音效果 无咔嗒/噼噗声&#xff0c;50uV (typical) Vos 低THDN:最低0.002% 低噪声,VN: 8.5uV 支持单端输入和全差分输入 2.5V至6V较宽的电源工作范围 输出功率:80mW(fIN1kHz,VDD3.6V,RL32Ω, THDN1%) 160mW(PVDD5V,fIN1kHz,RL32Ω…
阅读更多...
Java中的抽象类 abstract

Java中的抽象类 abstract

抽象方法&#xff1a; 将共性的行为&#xff08;方法&#xff09;抽取到父类之后。由于每一个子类执行的内容不一样&#xff0c;所以&#xff0c;在父类中不能确定具体的方法体。该方法就可以定义为抽象方法。 抽象类 如果一个类中存在抽象方法&#xff0c;那么该类就必须声…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023