第一次使用Vue

2022-01-11 19:26:50 字數 1032 閱讀 1221

接觸前端時,一直在想,網頁中那麼多資料,怎麼一次性渲染到頁面中?通過js可以實現,但是比較繁瑣,需要組合字串,很麻煩。還有更好的辦法嗎?

直到我遇見了vue......

總的來說,vue可以把網頁中的各種資料集中到一起,用陣列的方式呼叫,並且還支援迴圈這樣的方式呼叫(當然,目前我還是小白,更高階的功能需要進一步探索)。

正好我的部落格需要寫乙個能夠快速新增部落格友鏈的功能,希望能夠做到,當有新的友鏈要新增時,只需要維護基礎資料即可,而不再像以前一樣,又重新寫html各種div。

}

new vue(,

, ]}})

vue採取的是json格式的資料儲存方式:

friends: [

, ,

]

首先要告訴vue要在**解析,一般用下面的格式包裹需要執行vue的html,然後在script中建立vue例項。

這裡因為要在部落格正文裡執行指令碼,而是不能執行的(因為script標籤會被解析沒了),我們採取了改標籤的方式,用**執行其中的內容。

資料呼叫一般採用json格式,用兩對花括號}包裹起來,放到呼叫的位置(一般是div內部的文字內容):

}
:href="friend.blogurl"
在前面加乙個:,然後呼叫的資料不用花括號包裹。

迴圈呼叫時,只需要在迴圈的父div標籤裡新增下面的內容:

v-for="friend in friends"
其中前面的friend是自己定義的臨時變數,in相當於迴圈語法,friends是資料中的名字

經過一番折騰,終於實現了前面所說的要求。點此檢視。

值得注意的時,在開啟介面時,會有一定的延時,看得到還沒解析成功的那些字元,不過這不影響使用。

第一次使用

本markdown編輯器使用stackedit修改而來,用它寫部落格,將會帶來全新的體驗哦 markdown 是一種輕量級標記語言,它允許人們使用易讀易寫的純文字格式編寫文件,然後轉換成格式豐富的html頁面。維基百科 使用簡單的符號標識不同的標題,將某些文字標記為粗體或者斜體,建立乙個鏈結等,詳細...

第一次使用

test 你好!這是你第一次使用markdown編輯器所展示的歡迎頁。如果你想學習如何使用markdown編輯器,可以仔細閱讀這篇文章,了解一下markdown的基本語法知識。全新的介面設計,將會帶來全新的寫作體驗 在創作中心設定你喜愛的 高亮樣式,markdown將 片顯示選擇的高亮樣式進行展示 ...

第一次使用

第一次使用!你好!這是你第一次使用markdown編輯器所展示的歡迎頁。如果你想學習如何使用markdown編輯器,可以仔細閱讀這篇文章,了解一下markdown的基本語法知識。全新的介面設計,將會帶來全新的寫作體驗 在創作中心設定你喜愛的 高亮樣式,markdown將 片顯示選擇的高亮樣式進行展示...