最近做的乙個部落格的小例子(一)

2021-09-25 10:21:29 字數 1243 閱讀 3575

這個部落格的功能雖然挺少,但是使用起來還是對vue的理解有了一點的進步。

這個小專案的技術棧為:vue,vue cli3,vue router,axios,fire base。

編輯器是使用的vs code。

首先先建立vue的腳手架,使用命令:vue create . 。在乙個我建立好的目錄之下建立腳手架。

之後把腳手架中預設的內容去掉。

首先我的部落格的常規布局需要用到四個元件。

1、頂部導航欄。(公共元件)

2、增加部落格的元件。

3、展現總部落格的元件。

4、展現單獨部落格的元件。

首先定義的肯定不是頂部導航欄,導航欄的作用就是連通著各個元件的樞紐。元件都還沒建立起來,怎麼會先建立起樞紐呢?

一開始先建立的應該是「增加部落格的元件」

如下直接繫結@click.prevent="post"入button內。 將他預設的方法也給了post方法(這樣可以取消他的預設行為,應為使用axios更新資料是不用重新整理頁面的,但是click的方法的預設行為便是重新整理網頁,這樣會讓使用者產生不好的使用體驗,這裡將他的預設行為也給改了。當然,如果你不想取消預設行為也是可以的。這樣將不會很酷。)。

然後在下面的方法內定義乙個名字為post的方法。

這樣乙個寫部落格的頁面就暫時大功告成了。

總感覺還少了點什麼……對了,你寫完乙個部落格並且傳送成功肯定是要再看一看部落格總覽的吧!例如……

這樣的。

很好辦,只要我們將其的內容輸出到頁面上就行了,我們可以使用vue的}來進行頁面資料的雙向繫結!

等等等等………你的部落格怎麼會有乙個show的屬性的東西。

其實也可以沒有,但是我為了讓他看起來很酷,所以我就 設定了乙個名字為show的屬性。

我們可以使用這個show的屬性繫結在html的標籤上(v-if)這樣如果他是true,就會顯示,如果是false那就會消失不見。

我們可以把改變他的狀態的方法也繫結在post上,這樣就顯得比較完美了。一旦post將我們的資料傳送成功,那麼編輯框會因為show的true值改變成了false值而消失,顯示框會變成true顯示出來,這樣就令我們的部落格看起來非常酷。

最後,部落格如何將資料傳送至fire base的我會留在下次和你們詳細說一說

回見~!

文字的乙個小例子

自然語言文字預處理 導入庫 import pandas as pd import jieba 結巴分詞 from sklearn.feature extraction.text import tfidfvectorizer 基於tf idf的詞頻轉向量庫 分詞函式 def jieba cut str...

ViewPager的乙個小例子

早就聽說有這個viewpager控制項,專案要中使用的也多,viewpager也是更新到了viewpager2。但是我一直沒有使用過,現在記錄一下簡單的使用方法。它的使用和recycleview listview的使用大同小異。也需要介面卡和監聽事件。相信用過這些控制項的同學一定不陌生。上 acti...

最近寫的乙個小軟體

工具實現的功能很簡單,實現 查詢指定資料夾 及其下屬資料夾 的檔案中包含指定字串,或替換成其他字串的功能.介面如下 其實寫這個軟體的目的是因為 1.我正在看的乙個電子書 非 哈哈 中間都有大量網頁資訊廣告資訊的插入,非常不爽 2.日常操作經常想在一堆檔案中找到以前的某個語法的例子,卻苦於無現成工具....