vue中的$含義及其用法詳解($xxx引用的位置)
看了各個(gè)帖子的描述,還是未能參透$在vue中所想發(fā)揮的本意,將一些一知半解的理解摘抄下來,順帶附上自己常見的用法,以加深理解和記憶。
摘抄
這些只是Vue的命名規(guī)則,為了區(qū)分普通變量屬性,避免我們自己聲明或者添加自定義屬性導(dǎo)致覆蓋
$event 是 vue 提供的傳遞實(shí)踐的參數(shù)。
$是在vue中所有實(shí)例中都可用的一個(gè)簡(jiǎn)單約定,這樣做會(huì)避免和已被定義的數(shù)據(jù),方法,計(jì)算屬性產(chǎn)生沖突。
$是在vue中所有實(shí)例中都可用的一個(gè)簡(jiǎn)單約定,這樣做會(huì)避免和已被定義的數(shù)據(jù),方法,計(jì)算屬性產(chǎn)生沖突。
另一個(gè)好問題!如果你寫成:Vue.prototype.appName = ‘My App';那么你希望下面的代碼輸出什么呢?
new Vue({ data: { // 啊哦,appName 也是一個(gè)我們定義的實(shí)例屬性名! appName: ‘The name of some other app' }, beforeCreate: function () { console.log(this.appName) }, created: function () { console.log(this.appName) } })日志中會(huì)先出現(xiàn) “My App”,然后出現(xiàn) “The name of some other app”,
因?yàn)?this.appName 在實(shí)例被創(chuàng)建之后被 data 覆寫了。
我們通過 $ 為實(shí)例屬性設(shè)置作用域來避免這種事情發(fā)生。
你還可以根據(jù)你的喜好使用自己的約定,諸如 $_appName 或 ΩappName,
來避免和插件或未來的插件相沖突。
這里附上一個(gè)消息彈窗功能的外部鏈接:this.$toast() 了解一下?
結(jié)合這個(gè)案例可以更直觀和形象的理解vue中的$,當(dāng)時(shí)初看這篇文章對(duì)我受益匪淺,有時(shí)間也會(huì)另起一篇文章來講對(duì)這個(gè)案例自己的一些理解與拓展
運(yùn)用
很多初學(xué)者不知道項(xiàng)目中的$xxx是哪來的,具體有啥用,這里就來帶大家順藤摸瓜。(順帶一提像i18n國際化里的 $t或其他一些專有的 $event在項(xiàng)目中是找不到的,這是某些引用庫自己的專有寫法)

例如項(xiàng)目中用到的這個(gè) $dic和 $dimension,我們就全局搜索Vue.prototype. $dic和Vue.prototype.$dimension,果不其然在main.js里:


繼續(xù)順藤摸瓜找到dimension.js,就可以看到 $dimension掛載的內(nèi)容和方法了
總結(jié)
到此這篇關(guān)于vue中$含義及其用法詳解的文章就介紹到這了,更多相關(guān)vue中$含義及用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue3中shallowRef和shallowReactive的性能優(yōu)化
Vue3中shallowRef和shallowReactive是淺層響應(yīng)式API,用于性能優(yōu)化,僅追蹤對(duì)象或數(shù)組第一層屬性的變化,本文就來詳細(xì)的介紹一下具體的使用,感興趣的可以了解一下2024-09-09
vue實(shí)現(xiàn)點(diǎn)擊隱藏與顯示實(shí)例分享
在本篇文章中小編給大家分享了vue如何實(shí)現(xiàn)點(diǎn)擊隱藏與顯示的相關(guān)內(nèi)容,有需要的朋友們跟著學(xué)習(xí)下。2019-02-02
Vue數(shù)據(jù)監(jiān)聽方法watch的使用
這篇文章主要介紹了Vue數(shù)據(jù)監(jiān)聽方法watch的使用,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
解決vue中無法動(dòng)態(tài)修改jqgrid組件 url地址的問題
下面小編就為大家分享一篇解決vue中無法動(dòng)態(tài)修改jqgrid組件 url地址的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue.js 點(diǎn)擊按鈕顯示/隱藏內(nèi)容的實(shí)例代碼
下面小編就為大家分享一篇Vue.js 點(diǎn)擊按鈕顯示/隱藏內(nèi)容的實(shí)例代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Vue實(shí)現(xiàn)Excel本地下載及上傳的方法詳解
相信大家在項(xiàng)目中經(jīng)常會(huì)遇到一些上傳下載文件的相關(guān)功能。這篇文章將為大家介紹一下Vue實(shí)現(xiàn)Excel本地下載及上傳的示例代碼,需要的可以參考一下2022-07-07
基于vue實(shí)現(xiàn)動(dòng)態(tài)Tab標(biāo)簽頁功能
這篇文章主要介紹了如何基于vue實(shí)現(xiàn)動(dòng)態(tài)Tab標(biāo)簽頁功能,文中通過代碼示例和圖文結(jié)合的方式給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-09-09

