淺入深出Vue:資料渲染
今天來正式開始 vue的學習,首當其衝的當然是資料的渲染。畢竟資料就是拿來看的,看看如果使用 vue來展示資料。
為什麼渲染
俗話說 "人靠衣裝馬靠鞍", 那咱們的程式碼就是得靠 UI 來展現了。實現的程式碼規不規範,表不標準那是後話。但必須要好看~(開個玩笑,程式碼同樣要注意整潔與優雅噢)
資料無論放在後臺、資料庫還是快取,對於使用者而言都不知情。使用者能夠感受到的,就是 UI,因此我們的資料是需要渲染在頁面上顯示出來給使用者看的。
題外話:很久之前,老師就經常提起一句話,文不如字,字不如表,表不如圖。細來想想,這句話也是可以放在程式設計中的,尤其是面向使用者的層面。
如何渲染
在 vue 中,自帶了模板渲染,而模板的語法也非常簡潔易懂。
在此之前,先來看看要做哪些準備工作。
- 渲染的語法是
{{ 要渲染的內容 }}
,要渲染的內容被兩對花括號包了起來。 - 要渲染的資料必須是
this
作用域可訪問到的,簡單的使用我們可以換一句話來約束:要渲染的資料請放在data()
中(此描述僅為簡化在初學之時涉及知識過廣的問題,現在只專注於渲染)。
簡單渲染
我們首先在 data()
中定義我們需要渲染的欄位,並給其賦一個初始值。
data() {
return {
msg: 'hello vue'
}
}
接下來在頁面中,使用我們已經定義的欄位,將其渲染在頁面上。
{{ msg }}
程式碼如下:
<template>
<div>
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
msg: 'hello vue'
}
}
}
</script>
效果如下:
優點:
- 程式碼簡單
缺點:
- 只能直接渲染
表示式渲染
當我們的資料需要某種單獨的處理時,簡單渲染就不能滿足我們的要求了。
此時我們可以選擇使用 "表示式" 進行渲染。
比如說在渲染列表項時,我們需要顯示序號。而陣列的下標是從 0 開始,但是顯示序號又是從 1 開始的。
此時我們可以進行如下操作:
<h1>{{ index + 1 }}</h1>
此時所有的序號就是從 1 開始的了,很完美。
在文中例子基礎上,在渲染的資料前面顯示提示性文字 "標題:"。
<h1>{{ "標題:" + msg }}</h1>
效果如下:
優點:
- 對資料進行多樣化的處理
缺點:
造成大量的硬編碼,不利於維護和重構
相同處理邏輯會產生大量重複程式碼。
函式渲染
使用表示式渲染適合某類需要特殊處理的資料,並且這個處理不具備通用性。
那麼針對表示式渲染的缺點,尤其是重複程式碼的問題,我們可以對其進行封裝。
現在我們有一個時間型別的欄位:
data() {
return {
time: new Date()
}
}
看看簡單渲染的效果:
這好像和我們想的不太一樣啊,一般顯示的格式是:
2019-07-01 20:54:45
這兩個差距有點大啊,先用表示式渲染來處理一下達到要求的格式:
{{ time.getFullYear() + "-" + time.getMonth() + "-" + time.getDate() + " " + time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds() }}
這麼長一串的程式碼,看看能否達到要求的效果:
不是很完美!月和日這裡沒有做填充處理,所以不是很好的匹配要求。
這個時候,你發現系統中還有 n 個頁面需要格式化時間!!!難道要一個個複製?那可能下一個維護程式碼的人要掏出他30米長的大刀來找你了。
面對這種具備通用性或者是大量重複的處理邏輯,就可以將其抽成一個函式:
methods: {
formatTime: function(date) {
return date.getFullYear() + "-" + date.getMonth() + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
}
}
這裡要注意,在 vue中,函式需要定義在 methods物件內,才能在作用域內呼叫。
下面來看看效果,和上面的一樣:
優點:
邏輯可封裝,利於維護和重構。
寫法簡單。
缺點:
- 都能用函數了,還要啥自行車。
能不能寫js邏輯呢,不如說if?
百聞不如一見?讓我們看看下面的程式碼會顯示什麼:
<h1>{{ if(msg == '1') return time }}</h1>
當設定 msg 的值為 1 的時候, 返回時間?
嗯,顯示的內容很出乎意料,報錯了~
畢竟 vue 官方文件在最開始就說了,這是一個簡潔的模板語法,可以支援函式和表示式渲染,已經能解決絕大多數的問題了。至於在渲染時帶邏輯? 那可能需要好好看看 vue文件了,官方有對策噢。
相關推薦
淺入深出Vue:資料渲染
今天來正式開始 vue的學習,首當其衝的當然是資料的渲染。畢竟資料就是拿來看的,看看如果使用 vue來展示資料。 為什麼渲染 俗話說 "人靠衣裝馬靠鞍", 那咱們的程式碼就是得靠 UI 來展現了。實現的程式碼規不規範,表不標準那是後話。但必須要好看~(開個玩笑,程式碼同樣要注意整潔與優雅噢
淺入深出Vue:資料繫結
上一篇我們使用了簡單的資料渲染,那麼如果說我們想要動態渲染標籤的 class 可以這麼操作麼? 為什麼繫結 簡單的資料渲染,包括表示式、函式在內。其實都只是在標籤中渲染,如果遇到以下情況怎麼辦呢: 需要在標籤內部進行某種 "騷操作" 。 需要控制流來控制不同資料下的不同渲染效果。 需要渲
淺入深出Vue:子元件與資料傳遞
上一篇瞭解了元件的概念及在使用中需要注意的地方。在面對單個元件邏輯複雜需要拆分時,難免會遇到父子元件之間資料傳遞的問題。那麼我們來了解一下在父子元件之間進行資料傳遞時需要遵循哪些約定,以及要注意哪些問題。 如何傳遞 父元件向子元件在進行傳遞時,使用的是 prop特性進行傳遞。 約定 老規矩, 在使用前我們首先
淺入深出Vue:事件處理
上一篇的最後留下了一個 v-on的思考,也就是本章的主題:事件處理 為什麼需要事件處理 在前端開發中,經常要面對各種表單、按鈕。而這裡面就住著一個事件:點選 (click)。 前端童鞋們肯定不陌生它,因為經常會出現。比如說: 表單提交 各式各樣的按鈕 列表多級選單摺疊 v-on支援監聽原生的 DOM事件,
淺入深出Vue:路由
路由的概念在計算機界中的歷史大概可以追溯到OSI模型中的資料鏈路層與網路層中的定義。這裡的定義大意是:在轉發資料包時,根據資料包的目的地址進行定址,從而將資料包發往指定的目的地。 在 Web開發中同樣存在著路由的概念,在各式各樣的前端 mvvm框架出來之前,普遍存在於後端。通俗的說法也就是 [module/]
淺入深出Vue:元件
元件在 vue開發中是必不可少的一環,用好元件這把屠龍刀,就能解決不少問題。 元件是什麼 官方的定義: 元件是可複用的 Vue 例項,並且可帶有一個名字。 官方的定義已經非常簡明瞭,元件就是一個例項。 如何使用元件 在具體編寫元件例項程式碼前,我們先來如下幾個約定: 所有元件基於單檔案元件,即一個 .v
淺入深出Vue:註冊
基本佈局已經有了, 現在我們來開始做我們的註冊頁面~ 當然需要註冊才能發表文章啊(糟老頭子壞得很, 我可以只有我一個人能發啊)。 這裡我們設定只有註冊才能發表文章,也就淡化了管理員這個概念。在開發中先將原型做出來,然後再對其進行迭代、重構來達到我們最終想要的效果。 準備 新建 vue 元件,編寫註冊頁面的程
淺入深出Vue:釋出專案
專案完成之後,當然不能滿足於在我們的開發環境下跑一跑。我們可以打包釋出到伺服器上,讓大家一起來欣賞一下你的作品。 那麼 vue 專案如何打包釋出呢,新建的專案目錄下通常都有一個 README.md 的檔案,裡面就描述了釋出的步驟: 下面這個是 vue-cli 3.x 建立的專案中的 README.md 檔案內
淺入深出Vue:程式碼整潔之封裝
深入淺出vue系列文章已經更新過半了,在入門篇中我們實踐了一個小小的專案。 《程式碼整潔之道》一書中提到過一句話: 神在細節中 這句話來自20世紀中期註明現代建築大師 路德維希·密斯·範·德·羅所說,他秉承的是少即是多的建築設計哲學,玻璃幕牆等現代建築結構便是由他締造的。 而這句話也對軟體開發領域產生了不
淺入深出Vue:程式碼整潔之去重
在開始本篇的主題之前,讓我們把上次遺留下來的問題都清理一下: 將其他元件中 axios 請求的地方封裝起來。 這裡就不把程式碼放在開頭了,相關程式碼都放在文末,有興趣瞭解的童鞋可以先往下翻。 好了, 我們現在把上篇剩下的任務給完成了,接下來我們來正式開始本篇內容吧。 去重是什麼 字面上意思:去除重複,在專
淺入深出Vue:自動化路由
在軟體開發的過程中,"自動化"這個詞出現的頻率是比較高的。自動化測試,自動化資料對映以及各式的程式碼生成器。這些詞語的背後,也說明了在軟體開發的過程中,對於那些重複、千篇一律的事情。人們總是想讓它自己完成,來解放我們的雙手。 “懶惰”是進步的動力 為什麼要自動化路由 路由自動化在於解決以下
淺入深出之Java集合框架(上)
不重復 系統 left 子類 log 兩個 示例 c語言 重要 Java中的集合框架(上) 由於Java中的集合框架的內容比較多,在這裏分為三個部分介紹Java的集合框架,內容是從淺到深,如果已經有java基礎的小夥伴可以直接跳到<淺入深出之Java集合框架(下)&
『淺入深出』MySQL 中事務的實現
一點 隨著 保留 partially 並不會 它的 事件 all previous 在關系型數據庫中,事務的重要性不言而喻,只要對數據庫稍有了解的人都知道事務具有 ACID 四個基本屬性,而我們不知道的可能就是數據庫是如何實現這四個屬性的;在這篇文章中,我們將對事務的實現進
Java 註解 (Annotation)淺入深出
Java 註解 (Annotation)淺入深出 本文主要參考與借鑑frank909 文章,但更為簡單,詳細。 Annotation 中文譯過來就是註解、標釋的意思。Annotation是一種應用於類、方法、引數、變數、構造器及包宣告中的特殊修飾符。它是一種由JSR-175標準選擇用來描述元資料的一種工具
vue狀態管理vuex從淺入深詳細講解
1、vuex簡介以及建立一個簡單的倉庫 vuex是專門為vue框架而設計出的一個公共資料管理框架,任何元件都可以通過狀態管理倉庫資料溝通,也可以統一從倉庫獲取資料,在比較大型的應用中,資料互動龐大的情況下,推薦使用vuex管理。Vuex狀態管理有五個核心的概念,分別為state、getters、actions
從淺入深詳解獨立ip網站域名惡意解析的解決方案
網站 pos 靜態 tac 規則 來源 代碼 功能 解析 立IP空間的好處想必大家都能耳熟聞詳,穩定性強,利於seo等讓大家選擇了鼎峰網絡香港獨立IP空間。那麽, 網站獨享服務器IP地址,獨立IP空間利於百度收錄和權重的積累、不受牽連、穩定性強等諸多優勢為一身。然而,這些優
JavaScript基礎知識從淺入深理解(一)
isn argument javascrip turn console bom || 將不 函數聲明 JavaScript的簡介 javascript是一門動態弱類型的解釋型編程語言,增強頁面動態效果,實現頁面與用戶之間的實時動態的交互。 javascript是
VUE:條件渲染和列表渲染
條件渲染 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head>
netty之NIO從淺入深、詳細解析。
BIO:同步、阻塞 NIO:同步、非阻塞 AIO:非同步、非阻塞 在學習NIO之前,需要大家先了解一些簡單的概念: 1.cache(快取記憶體)和buffer(緩衝區): cache快取區和buffer緩衝區都是臨時儲存區。 buffer緩衝區主要存在於RA
學習網站專案學習 - Django & Vue - 前端資料渲染、前端帶參轉跳
目錄 一、前端資料展示 二、前端帶參跳轉,後端獲取引數 2-1 前端程式碼 2-2 後端程式碼 2-3 前端展示 三、路由跳轉引數顯示設定 一、前端資料展示 思路總結: 前端mounte