快捷導(dǎo)航

vue項(xiàng)目中的類使用方式

更新時(shí)間：2024年03月04日 08:56:08 作者：左直拳

這篇文章主要介紹了vue項(xiàng)目中的類使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue項(xiàng)目中的類

如題所示，vue項(xiàng)目中想提供類，該怎么寫？

js其實(shí)并沒有類，它只能用function來模擬類。如果用原生的js，要寫一個(gè)類，可以這樣寫：

//類 
function Hi(){
	let hi = "hello world!";
	
	this.say = function(){
		console.log(hi);
	}
}

//使用類
let hi = new Hi();
hi.say();//hello world!

那在vue中怎么寫呢？

原生js的寫法，我已經(jīng)十分習(xí)慣了，用得很溜。

但vue里面的寫法，有點(diǎn)古怪：

1）定義

/src/utils/index.js

export class Hi {
  #hi;//#代表私有,不寫就是公有，問你怕未
  constructor() {
    this.#hi = "hello world!";
  }

  say = () => {
    return this.#hi;
  };
}

2）調(diào)用

//類定義位于文件 /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實(shí)現(xiàn)大文件切片上傳的示例詳解
前端上傳文件很大時(shí),會(huì)出現(xiàn)各種問題,比如連接超時(shí)了,網(wǎng)斷了,都會(huì)導(dǎo)致上傳失敗,這個(gè)時(shí)候就需要將文件切片上傳,下面我們就來學(xué)習(xí)一下如何使用vue實(shí)現(xiàn)大文件切片上傳吧
2023-11-11
Vue中的scoped實(shí)現(xiàn)原理及穿透方法
這篇文章主要介紹了Vue中的scoped實(shí)現(xiàn)原理及穿透方法,本文通過實(shí)例文字相結(jié)合的形式給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2018-05-05
vue-cli3項(xiàng)目展示本地Markdown文件的方法
這篇文章主要介紹了vue-cli3項(xiàng)目展示本地Markdown文件的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06
一文詳解如何用Three.js和Vue?3實(shí)現(xiàn)3D商品展示
Three.js是一個(gè)基于JavaScript的開源庫(kù),用于在網(wǎng)頁上創(chuàng)建和顯示3D圖形,這篇文章主要介紹了如何用Three.js和Vue?3實(shí)現(xiàn)3D商品展示的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-07-07
vue+iview實(shí)現(xiàn)分頁及查詢功能
這篇文章主要為大家詳細(xì)介紹了vue+iview實(shí)現(xiàn)分頁及查詢功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-11-11
淺析vue 函數(shù)配置項(xiàng)watch及函數(shù) $watch 源碼分享
這篇文章主要介紹了vue 函數(shù)配置項(xiàng)watch及函數(shù) $watch 源碼分享 ,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-11-11
基于Vue3實(shí)現(xiàn)高性能拖拽指令
在現(xiàn)代前端開發(fā)中,拖拽功能是增強(qiáng)用戶體驗(yàn)的重要手段之一,本文將詳細(xì)介紹如何在Vue3中封裝一個(gè)拖拽指令并通過實(shí)戰(zhàn)例子演示其實(shí)現(xiàn)過程,希望對(duì)大家有所幫助
2024-11-11
Vue.js組件tabs實(shí)現(xiàn)選項(xiàng)卡切換效果
這篇文章主要為大家詳細(xì)介紹了Vue.js組件tabs實(shí)現(xiàn)選項(xiàng)卡切換效果的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
如何在Vue3中使用視頻庫(kù)Video.js實(shí)現(xiàn)視頻播放功能
在Vue3項(xiàng)目中集成Video.js庫(kù),可以創(chuàng)建強(qiáng)大的視頻播放功能,這篇文章主要介紹了如何在Vue3中使用視頻庫(kù)Video.js實(shí)現(xiàn)視頻播放功能,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-09-09
Vue實(shí)現(xiàn)拖放排序功能的實(shí)例代碼
本文通過實(shí)例代碼給大家介紹了Vue中實(shí)現(xiàn)拖放排序功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-07-07