淺學VUE心得

都已經5202年了，經典的javascript dom進行前端開發感覺有億點點小小的麻煩，特別是標籤創建方面，如果我想要添加的item非常的複雜，就少不了一堆createElement方法和setAttribute方法的使用

這種重複的工作非常的影響開發效率，所以為了跟上時代的潮流，也讓我多活幾天，我把目光投向了Vue，一個現代的前端框架，今天也是淺淺學了下，做了個小項目

Vite是一個為Vue前端開發設計的構建工具，對我來說就是規範了項目目錄，官網說使用了熱加載啥的，對於超大項目可以更高效開發，我們這小破項目綽綽有餘了，反正我不用再這裡一個js哪個一個html了，就比較整潔，很舒服

帶大夥瞅瞅看項目目錄，只說說我個人感覺有有點用的，dist我後面再說吧，

public存放一些靜態文件，而且不會被Vite等構建工具處理或者優化，

assets也是存靜態文件的，不過它會被構建工具優化，

component存放的是vue組件，簡單說就是模塊化，每個組件分別開發再進行組合

App.vue｜index.html

App.vue個人感覺是負責將component中的組件進行整合的，而index.html教程說是負責將App.vue掛載到頁面上的，我感覺就是建房子的地基

最後來說下dist，Vite是個構建工具可以進行打包操作，dist就是打包後文件存放的地方，Vite的打包會把.vue文件和依賴的包等全部整合成.js，.html，.css三個文件，這樣在部署的時候只需要加載這三個文件就行了，就不用擔心公共cdn崩了導致網站無法正常加載了

再來說下.vue文件，跟分為三個部分，script，template和style，script就是js腳本的部分，style就是樣式文件css的部分，不過style部分也允許其他格式的樣式文件

template模板部分，這個就很有意思了

上面我不是提到了appendChild很麻煩，vue提供了一種template模板寫法，允許在模板中直接訪問變量，允許使用循環和判斷等寫法（django也有類似的寫法叫jinja模板，不過我一般用不到）

再簡單說說參數傳遞，我給的需求就是點擊一個列表條目，然後右邊的頁面文字更改

如果在原來的js中我可能會設計一個點擊函數傳入索引再給一堆elements.contentText傳入參數，但是Vue是一套新方法，在構建列表item的時候把每個book的數據傳進去了

要想實現這個操作，我可能會添加一堆attribute再封裝一個方法去實現，好麻煩，不過vue就一行的事，可以看到點擊後對應的book數據會傳入一個函數onBookSelect中

defineEmits用於聲明自定義事件，用於給父組件傳參數，我們設置了一個叫selectBook的事件，回調函數會觸發這個事件並傳遞book參數

現在看父組件，框住的部分selectBook是我們剛剛聲明的事件，handleSelectBook是我們定義的回調函數，selectBook事件觸發，會調用handleSelectBook函數並傳入對應的book參數，回調函數則是改變了bookData的值

bookData是一個字典，不過我們用ref函數給括起來了，這個ref函數很有意思，我目前個人的理解就是，比如一個p標籤用模板引用了{{ bookData.author }}我們將bookData變量裡的author從 那個男人 改成 Nage. NanR，p標籤裡的也會改變，說叫什麼雙向性，對我來說反正不用再封裝一堆函數賦值了

總結：Vue真是好東西

聲明：個人片面的理解，有誤還請指出