vue點(diǎn)擊項(xiàng)目唯一id生成器nanoid的使用方式
更新時(shí)間：2022年05月24日 10:26:18 作者：每一天，每一步
這篇文章主要介紹了vue點(diǎn)擊項(xiàng)目唯一id生成器nanoid的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
點(diǎn)擊項(xiàng)目唯一id生成器nanoid使用
UUID是軟件開發(fā)中最常用的通用標(biāo)識(shí)符之一。
nanoid庫(kù)和uuid庫(kù)一樣都可以生成uuid，但是nanoid相比uuid要更輕量級(jí)。
nanoid的安裝
npm i nanoid? // 或者 yarn add nanoid
nanoid的使用
import { nanoid } from 'nanoid'?
let id = nanoid()
?
//也可以指定生成字符串的長(zhǎng)度
//let id = nanoid(5)前端常用庫(kù)——nanoid
nanoid庫(kù)和uuid庫(kù)一樣都可以生成uuid，但是nanoid相比uuid要更輕量級(jí)，下面就來(lái)演示一下如何在項(xiàng)目中使用nanoid。
1.在項(xiàng)目目錄下打開終端,下載安裝nanoid庫(kù)
npm i nanoid
或者，如果你安裝了yarn可以使用：
yarn add nanoid
2.引入nanoid庫(kù)
nanoid庫(kù)中用分別暴露的方式暴露了一個(gè)函數(shù)nanoid
import {nanoid} from 'nanoid'3.使用nanoid生成uuid
直接調(diào)用nanoid()，即可生成一個(gè)uuid
import React, { Component } from 'react'
import {nanoid} from 'nanoid'
import "./index.css"
export default class Header extends Component {
handleKeyUp = (event) => {
const {keyCode, target} = event;
// 判斷是否是回車
if (keyCode !== 13) return
if (target.value.trim() === '') {
alert("輸入不能為空")
return
}
const todoObj = {id:nanoid(),name:target.value,done:false}
this.props.addTodo(todoObj)
target.value = ''
}
render() {
return (
<div className="todo-header">
<input onKeyUp={this.handleKeyUp} type="text" placeholder="請(qǐng)輸入你的任務(wù)名稱，按回車鍵確認(rèn)"/>
</div>
)
}
}
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue-cli配置flexible過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
正常情況下Vue推薦用props向子組件參數(shù),但是在特定場(chǎng)景下,使用$attrs會(huì)更方便,下面這篇文章主要給大家介紹了關(guān)于vue2.x中$attrs使用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
手把手教你使用electron將vue項(xiàng)目打包成exe
Electron相當(dāng)于一個(gè)瀏覽器的外殼,可以把現(xiàn)有的vue程序嵌入到殼里面,下面這篇文章主要給大家介紹了關(guān)于如何使用electron將vue項(xiàng)目打包成exe的相關(guān)資料,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了Vue中的Tree-Shaking是什么,通過(guò)Tree-shaking，將沒有使用的模塊代碼移除掉，這樣來(lái)達(dá)到刪除無(wú)用代碼的目，本文結(jié)合實(shí)例代碼詳解詳解，需要的朋友可以參考下2023-04-04
vue項(xiàng)目報(bào)錯(cuò)Uncaught runtime errors的解決方案
使用vue-cli的vue項(xiàng)目,出現(xiàn)編譯錯(cuò)誤或警告時(shí),在瀏覽器中顯示全屏覆蓋,提示報(bào)錯(cuò)Uncaught runtime errors,本文給大家介紹了vue項(xiàng)目報(bào)錯(cuò)Uncaught runtime errors的解決方案,需要的朋友可以參考下2024-01-01
vue2中如何更改el-dialog出場(chǎng)動(dòng)畫(el-dialog彈窗組件)
el-dialog是一個(gè)十分好用的彈窗組件，但是出場(chǎng)動(dòng)畫比較單調(diào)，于是決定自定義一個(gè)出場(chǎng)動(dòng)畫，本文通過(guò)實(shí)例代碼圖文相結(jié)合給大家敘述下實(shí)現(xiàn)思路，感興趣的朋友一起看看吧2022-06-06
這篇文章主要為大家詳細(xì)介紹了Vue-cli項(xiàng)目的搭建方法，文中圖片介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
Vue.js組件tree實(shí)現(xiàn)省市多級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了Vue.js組件tree實(shí)現(xiàn)省市多級(jí)聯(lián)動(dòng)的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
Vue中img的src屬性綁定與static文件夾實(shí)例
本篇文章中主要介紹了Vue中img的src屬性綁定與static文件夾實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-05-05
解決vue+ element ui 表單驗(yàn)證有值但驗(yàn)證失敗問(wèn)題
這篇文章主要介紹了vue+ element ui 表單驗(yàn)證有值但驗(yàn)證失敗，本文通過(guò)實(shí)例代碼給大家分享解決方案，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01