vue項(xiàng)目中的類(lèi)使用方式
更新時(shí)間：2024年03月04日 08:56:08 作者：左直拳
這篇文章主要介紹了vue項(xiàng)目中的類(lèi)使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue項(xiàng)目中的類(lèi)
如題所示，vue項(xiàng)目中想提供類(lèi)，該怎么寫(xiě)？
js其實(shí)并沒(méi)有類(lèi)，它只能用function來(lái)模擬類(lèi)。如果用原生的js，要寫(xiě)一個(gè)類(lèi)，可以這樣寫(xiě)：
//類(lèi)
function Hi(){
let hi = "hello world!";
this.say = function(){
console.log(hi);
}
}
//使用類(lèi)
let hi = new Hi();
hi.say();//hello world!
那在vue中怎么寫(xiě)呢？
原生js的寫(xiě)法，我已經(jīng)十分習(xí)慣了，用得很溜。
但vue里面的寫(xiě)法，有點(diǎn)古怪：
1）定義
/src/utils/index.js
export class Hi {
#hi;//#代表私有,不寫(xiě)就是公有，問(wèn)你怕未
constructor() {
this.#hi = "hello world!";
}
say = () => {
return this.#hi;
};
}
2）調(diào)用
//類(lèi)定義位于文件 /src/utils/index.js import * as tools from "@/utils"; const hi = new tools.Hi(); hi.say();
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文介紹Vue組件間通信方式，Vue組件間通信一直是個(gè)重要的話(huà)題，雖然官方推出的Vuex狀態(tài)管理方案可以很好的解決組件之間的通信問(wèn)題，但是在組件庫(kù)內(nèi)部使用Vuex往往會(huì)比較重，本文將系統(tǒng)的羅列出幾種不使用Vuex，比較實(shí)用的組件間的通信方式，希望能幫助到大家2022-09-09
這篇文章主要給大家介紹了關(guān)于vue-router懶加載的3種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
關(guān)于vue3 vuex4 store的響應(yīng)式取值問(wèn)題解決
這篇文章主要介紹了vue3 vuex4 store的響應(yīng)式取值問(wèn)題，在實(shí)際生活中遇到這樣一個(gè)問(wèn)題:在頁(yè)面中點(diǎn)擊按鈕,數(shù)量增加,值是存在store中的,點(diǎn)擊事件值沒(méi)變,如何解決這個(gè)問(wèn)題，本文給大家分享解決方法，需要的朋友可以參考下2022-08-08
VUE:vuex 用戶(hù)登錄信息的數(shù)據(jù)寫(xiě)入與獲取方式
今天小編就為大家分享一篇VUE:vuex 用戶(hù)登錄信息的數(shù)據(jù)寫(xiě)入與獲取方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
詳解vuex 中的 state 在組件中如何監(jiān)聽(tīng)
本篇文章主要介紹了詳解vuex 中的 state 在組件中如何監(jiān)聽(tīng)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
html2canvas.js是一款可以在網(wǎng)頁(yè)上實(shí)現(xiàn)頁(yè)面截圖的js,它使用了html5和css3的一些新功能特性,實(shí)現(xiàn)了在客戶(hù)端對(duì)網(wǎng)頁(yè)進(jìn)行截圖的功能,這篇文章主要給大家介紹了關(guān)于html2canvas使用的相關(guān)資料,需要的朋友可以參考下2024-03-03
capture事件修飾符的作用是給元素添加一個(gè)監(jiān)聽(tīng)器，當(dāng)元素發(fā)生冒泡時(shí)，先觸發(fā)帶有該修飾符的元素。這篇文章給大家介紹了Vue 事件修飾符capture 的使用，需要的朋友參考下吧2017-12-12
Vue開(kāi)發(fā)實(shí)例探究key的作用詳解
這篇文章主要為大家介紹了Vue開(kāi)發(fā)實(shí)例探究key的作用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
本篇文章主要介紹了使用vue-cli編寫(xiě)vue插件的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
從零開(kāi)始在NPM上發(fā)布一個(gè)Vue組件的方法步驟
這篇文章主要介紹了從零開(kāi)始在NPM上發(fā)布一個(gè)Vue組件的方法步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12