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