大家好，我來了，本期為大家帶來的前端開發知識是”前端開發：Vue項目實戰-Music“，有興趣做前端的朋友，和我一起來看看吧！

主要內容

項目環境搭建

路由導航實現

ListView列表

網絡請求

第三方組件-輪播圖

自定義組件-tabs

回到頂部

Iconfont引入

歌曲詳情頁

歌曲播放

歌詞處理

學習目標

第一節 Music項目環境第一部分

Vue

本屆作業

聊一聊React和Vue的區別

老版本的項目環境如何創建項目

第二節 Vue API 第二部分

模板語法

文本

數據綁定最常見的形式就是使用“Mustache”語法 (雙大括號) 的文本插值：

Mustache 標簽將會被替代為對應數據對象上 msg 屬性的值。無論何時，綁定的數據對象上 msg屬性發生了改變，插值處的內容都會更新。

通過使用 v-once 指令，你也能執行一次性地插值，當數據改變時，插值處的內容不會更新。但請留心這會影響到該節點上的其它數據綁定：

原始HTML

雙大括號會將數據解釋為普通文本，而非 HTML 代碼。為了輸出真正的 HTML，你需要使用 v-html 指令：

這個 span 的內容將會被替換成為屬性值 rawHtml，直接作為 HTML——會忽略解析屬性值中的數據綁定。注意，你不能使用 v-html 來復合局部模板，因為 Vue 不是基于字符串的模板引擎。反之，對于用戶界面 (UI)，組件更適合作為可重用和可組合的基本單位。

特性

Mustache 語法不能作用在 HTML 特性上，遇到這種情況應該使用 v-bind 指令：

使用JavaScript表達式

迄今為止，在我們的模板中，我們一直都只綁定簡單的屬性鍵值。但實際上，對于所有的數據綁定，Vue.js 都提供了完全的 JavaScript 表達式支持。

這些表達式會在所屬 Vue 實例的數據作用域下作為 JavaScript 被解析。有個限制就是，每個綁定都只能包含單個表達式，所以下面的例子都不會生效。

縮寫

v- 前綴作為一種視覺提示，用來識別模板中 Vue 特定的特性。當你在使用 Vue.js 為現有標簽添加動態行為 (dynamic behavior) 時，v- 前綴很有幫助，然而，對于一些頻繁用到的指令來說，就會感到使用繁瑣。同時，在構建由 Vue 管理所有模板的單頁面應用程序 (SPA - single page application)時，v- 前綴也變得沒那么重要了。因此，Vue 為 v-bind 和 v-on 這兩個最常用的指令，提供了特定簡寫：

v-bind 縮寫

v-on縮寫

它們看起來可能與普通的 HTML 略有不同，但 : 與 @ 對于特性名來說都是合法字符，在所有支持 Vue 的瀏覽器都能被正確地解析。而且，它們不會出現在最終渲染的標記中。縮寫語法是完全可選的，但隨著你更深入地了解它們的作用，你會慶幸擁有它們

條件渲染

v-if

v-if 指令用于條件性地渲染一塊內容。這塊內容只會在指令的表達式返回 truthy 值的時候被渲染。

也可以用 v-else 添加一個“else 塊”：

在 <template> 元素上使用 v-if 條件渲染分組

因為 v-if 是一個指令，所以必須將它添加到一個元素上。但是如果想切換多個元素呢？此時可以把一個 <template> 元素當做不可見的包裹元素，并在上面使用 v-if。最終的渲染結果將不包含 <template> 元素。

v-else

你可以使用 v-else 指令來表示 v-if 的“else 塊”

v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的后面，否則它將不會被識別。

v-else-if

v-else-if，顧名思義，充當 v-if 的“else-if 塊”，可以連續使用：

v-show

另一個用于根據條件展示元素的選項是 v-show 指令。用法大致一樣：

不同的是帶有 v-show 的元素始終會被渲染并保留在 DOM 中。v-show 只是簡單地切換元素的 CSS 屬性 display。

v-if vs v-show

v-if 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。

v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊。

相比之下，v-show 就簡單得多——不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于 CSS 進行切換。

一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。

列表渲染

用 v-for 把一個數組對應為一組元素

我們可以用 v-for 指令基于一個數組來渲染一個列表。v-for 指令需要使用 item in items 形式的特殊語法，其中 items 是源數據數組，而 item 則是被迭代的數組元素的別名。

在 v-for 里使用對象

你也可以用 v-for 來遍歷一個對象的屬性。

數組更新檢測

變異方法

Vue 將被偵聽的數組的變異方法進行了包裹，所以它們也將會觸發視圖更新。這些被包裹過的方法包括：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

替換數組

變異方法，顧名思義，會改變調用了這些方法的原始數組。相比之下，也有非變異 (non-mutating method) 方法，例如 filter()、concat() 和 slice() 。它們不會改變原始數組，而總是返回一個新數組。當使用非變異方法時，可以用新數組替換舊數組：

你可能認為這將導致 Vue 丟棄現有 DOM 并重新渲染整個列表。幸運的是，事實并非如此。Vue 為了使得 DOM 元素得到最大范圍的重用而實現了一些智能的啟發式方法，所以用一個含有相同元素的數組去替換原來的數組是非常高效的操作。

對象變更檢測注意事項

還是由于 JavaScript 的限制，Vue 不能檢測對象屬性的添加或刪除：

你還可以使用 vm.$set 實例方法，它只是全局 Vue.set 的別名：

本屆作業

模板語法中可以存在的語句有那些

說出v-if和v-show的區別

編寫代碼，實現給定數組的列表渲染內容:[10,20,30,40]

第三節 Vue API第一部分

事件處理

監聽事件

可以用 v-on 指令監聽 DOM 事件，并在觸發時運行一些 JavaScript 代碼。

事件處理方法

然而許多事件處理邏輯會更為復雜，所以直接把 JavaScript 代碼寫在 v-on 指令中是不可行的。因此 v-on 還可以接收一個需要調用的方法名稱

內聯處理器中的方法

除了直接綁定到一個方法，也可以在內聯 JavaScript 語句中調用方法

有時也需要在內聯語句處理器中訪問原始的 DOM 事件。可以用特殊變量 $event 把它傳入方法：

事件修飾符

在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。盡管我們可以在方法中輕松實現這點，但更好的方式是：方法只有純粹的數據邏輯，而不是去處理 DOM 事件細節。

為了解決這個問題，Vue.js 為 v-on 提供了事件修飾符。之前提過，修飾符是由點開頭的指令后綴來表示的。

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

計算屬性和偵聽器

計算屬性

模板內的表達式非常便利，但是設計它們的初衷是用于簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。例如：

在這個地方，模板不再是簡單的聲明式邏輯。你必須看一段時間才能意識到，這里是想要顯示變量 message 的翻轉字符串。當你想要在模板中多次引用此處的翻轉字符串時，就會更加難以處理。

所以，對于任何復雜邏輯，你都應當使用計算屬性。

你可以像綁定普通屬性一樣在模板中綁定計算屬性。Vue 知道 vm.reversedMessage 依賴于 vm.message，因此當 vm.message 發生改變時，所有依賴 vm.reversedMessage 的綁定也會更新。而且最妙的是我們已經以聲明的方式創建了這種依賴關系：計算屬性的 getter 函數是沒有副作用 (side effect) 的，這使它更易于測試和理解。

計算屬性緩存 vs 方法

你可能已經注意到我們可以通過在表達式中調用方法來達到同樣的效果：

我們可以將同一函數定義為一個方法而不是一個計算屬性。兩種方式的最終結果確實是完全相同的。然而，不同的是計算屬性是基于它們的響應式依賴進行緩存的。只在相關響應式依賴發生改變時它們才會重新求值。這就意味著只要 message 還沒有發生改變，多次訪問 reversedMessage 計算屬性會立即返回之前的計算結果，而不必再次執行函數。

偵聽器

雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的偵聽器。這就是為什么 Vue 通過 watch 選項提供了一個更通用的方法，來響應數據的變化。當需要在數據變化時執行異步或開銷較大的操作時，這個方式是最有用的。

在這個示例中，使用 watch 選項允許我們執行異步操作 (訪問一個 API)，限制我們執行該操作的頻率，并在我們得到最終結果前，設置中間狀態。這些都是計算屬性無法做到的。

Class與Style綁定

操作元素的 class 列表和內聯樣式是數據綁定的一個常見需求。因為它們都是屬性，所以我們可以用 v-bind 處理它們：只需要通過表達式計算出字符串結果即可。不過，字符串拼接麻煩且易錯。因此，在將 v-bind 用于 class 和 style 時，Vue.js 做了專門的增強。表達式結果的類型除了字符串之外，還可以是對象或數組。

綁定 HTML Class

對象語法

我們可以傳給 v-bind:class 一個對象，以動態地切換 class：

上面的語法表示 active 這個 class 存在與否將取決于數據屬性 isActive 的 truthiness。

你可以在對象中傳入更多屬性來動態切換多個 class。此外，v-bind:class 指令也可以與普通的 class 屬性共存。當有如下模板:

和如下 data：

結果渲染為：

當 isActive 或者 hasError 變化時，class 列表將相應地更新。例如，如果 hasError 的值為 true，class 列表將變為 "static active text-danger"。

數組語法

我們可以把一個數組傳給 v-bind:class，以應用一個 class 列表：

綁定內聯樣式

對象語法

v-bind:style 的對象語法十分直觀——看著非常像 CSS，但其實是一個 JavaScript 對象。CSS 屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用引號括起來) 來命名：

直接綁定到一個樣式對象通常更好，這會讓模板更清晰：

數組語法

v-bind:style 的數組語法可以將多個樣式對象應用到同一個元素上：

表單輸入與綁定

你可以用 v-model 指令在表單 <input>、<textarea> 及 <select> 元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。盡管有些神奇，但 v-model 本質上不過是語法糖。它負責監聽用戶的輸入事件以更新數據，并對一些極端場景進行一些特殊處理。

v-model 在內部為不同的輸入元素使用不同的屬性并拋出不同的事件：

• text 和 textarea 元素使用 value 屬性和 input 事件；
• checkbox 和 radio 使用 checked 屬性和 change 事件；
• select 字段將 value 作為 prop 并將 change 作為事件。

文本

修飾符

.lazy

在默認情況下，v-model 在每次 input 事件觸發后將輸入框的值與數據進行同步 (除了上述輸入法組合文字時)。你可以添加 lazy 修飾符，從而轉變為使用 change 事件進行同步

.number

如果想自動將用戶的輸入值轉為數值類型，可以給 v-model 添加 number 修飾符：

這通常很有用，因為即使在 type="number" 時，HTML 輸入元素的值也總會返回字符串。如果這個值無法被 parseFloat() 解析，則會返回原始的值。

.trim

如果要自動過濾用戶輸入的首尾空白字符，可以給 v-model 添加 trim 修飾符：

本節作業

實現列表數據的點擊事件

實現點擊事件阻止冒泡

實現文本的雙向數據綁定

第四節 Vue 組件

單文件組件

文件擴展名為 .vue 的 single-file components(單文件組件) 為以上所有問題提供了解決方法，并且還可以使用 webpack 或 Browserify 等構建工具。

這是一個文件名為 Hello.vue 的簡單實例：

組件復用

你可以將組件進行任意次數的復用：

注意當點擊按鈕時，每個組件都會各自獨立維護它的 count。因為你每用一次組件，就會有一個它的新實例被創建。

data 必須是一個函數

當我們定義這個 <button-counter> 組件時，你可能會發現它的 data 并不是像這樣直接提供一個對象：

取而代之的是，一個組件的 data 選項必須是一個函數，因此每個實例可以維護一份被返回對象的獨立的拷貝：

如果 Vue 沒有這條規則，點擊一個按鈕就可能會像如下代碼一樣影響到其它所有實例：

Props

早些時候，我們提到了創建一個博文組件的事情。問題是如果你不能向這個組件傳遞某一篇博文的標題或內容之類的我們想展示的數據的話，它是沒有辦法使用的。這也正是 prop 的由來。

Prop 是你可以在組件上注冊的一些自定義特性。當一個值傳遞給一個 prop 特性的時候，它就變成了那個組件實例的一個屬性。為了給博文組件傳遞一個標題，我們可以用一個 props 選項將其包含在該組件可接受的 prop 列表中：

一個組件默認可以擁有任意數量的 prop，任何值都可以傳遞給任何 prop。在上述模板中，你會發現我們能夠在組件實例中訪問這個值，就像訪問 data 中的值一樣。

一個 prop 被注冊之后，你就可以像這樣把數據作為一個自定義特性傳遞進來：

然而在一個典型的應用中，你可能在 data 里有一個博文的數組：

并想要為每篇博文渲染一個組件：

如上所示，你會發現我們可以使用 v-bind 來動態傳遞 prop。這在你一開始不清楚要渲染的具體內容，比如從一個 API 獲取博文列表的時候，是非常有用的。

本節作業

單文件組件的重要性

解釋為什么Data必須是一個函數

Props如何傳遞數據

本次為大家帶來的前端文章內容”前端開發：前端開發：Vue項目實戰-Music“到此結束了，對前端開發有興趣的朋友，關注我，我們下期再見！

總結

以上是生活随笔為你收集整理的vue 动态添加class_前端开发：Vue项目实战-Music的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。