兩萬塊的Vue

來自專欄 Learn JavaScript4 人贊了文章

搞基hub上有個代碼很有趣；

是用Vue寫的，有兩萬多個贊；

那麼假如一個贊一塊錢，這個項目至少值兩萬塊了；

好的，那麼接下來看看兩萬塊的Vue吧；

項目拉下來是這個樣子的；

elm文件夾是編譯後的文件，screenshots是一些截圖；

那麼其他部分基本和其他Vue一樣了；

繼續往裡看；

可以看到，他的項目里，樣式頁面配置圖片插件等等都分了文件夾，

這種分文件夾的做法能夠讓文件管理更加的清晰，不會出現文件亂成一團的情況；

所以值得學習與稱讚，不愧是兩萬塊的Vue；

隨便打開一個組件：

可以看到這個彈出提示框組件；

上半部分很好理解

和普通HTML差不多，不過Vue里採用的 模版用@click 來綁定了點擊事件；

接下來這個data里return出來的對象，裡面的鍵值對是可以在模版里使用{{ }}這樣的形式來插值的；

同樣可以插值的還有props

而這個props的值是由調用的時候傳入的，比如這種寫法，一個叫做alertText的props被傳進去這個組件了；

嗯，大家有不理解的可以提問；

嗯嗯，這個文件基本上也就看完了；

還有一個methods欄位；

這裡面放一個對象，

這個對象里，放了很多函數，或者叫做很多方法；

不要問為啥要這樣做；

因為這個框架作者喜歡這樣做；

這裡有個closeTip方法；

如果對這個寫法不理解可以參考這裡；

那麼這個連起來就是，當用戶去點擊這個div的時候，去執行了closeTip方法，

而closeTip方法里做了啥？

裡面調用了this的$emit方法;

大概的意思就是他觸發了一個叫做closeTip的事件； this.$emit(closeTip)

因為名字都一樣，這樣說也容易搞混；

哎；

這裡也可以看看文檔；

文件的下部分是一段scss

如同大多數編程語言，import就是import，洋話導入的意思；

進入這個文件看

我根本沒有學過scss，

看這個文件里有變數有前綴；

雖然我完全沒學過這個，但是一看就顯而易見；

在被引入文件里，加了前綴的css名可以在這裡加include前綴來使用，並傳入參數；

另外，scss還可以根據縮進來區分css層級關係，

這個看起來挺好玩的；

哈哈；

如果好評多的話，我會繼續看這個兩萬塊的Vue項目；

有任何問題可以提出來噢；

推薦閱讀：