vue :class 動态綁定樣式_Vue從入土到被埋（一）

Vue.js最強大的教程當然是官方文檔，本文主要概述Vue中一些基礎核心概念。

• 環境搭建
• 模闆文法
• 計算屬性
• 類與樣式
• 條件、清單渲染
• 事件
• 元件
  • 元件的定義
  • 父元件向子元件傳值
  • 子元件向父元件傳值
  • slot插槽
• 自定義指令
• Vue-Router
• Vuex

關鍵是自己多看Vue官方文檔！

01

環境搭建

官方文檔提供了多種安裝方式。

1. 直接用 引入

1. 使用NPM安裝腳手架工具

npm install -g @vue/cliORyarn global add @vue/cli
           

如果以為網速問題安裝失敗，可以考慮使用cnpm來進行安裝。

在安裝成功之後，就可以使用vue指令了。

此時使用

vue -V

檢視版本号。

如果有上述傳回，那麼就可以使用vue指令來建立第一個vue項目了。

> vue create vue-projectVue CLI v4.3.1┌─────────────────────────────────────────┐│                                         ││   New version available 4.3.1 → 4.4.5   ││    Run npm i -g @vue/cli to update!     ││                                         │└─────────────────────────────────────────┘? Please pick a preset: default (babel, eslint)? Pick the package manager to use when installing dependencies: NPMVue CLI v4.3.1✨  Creating project in E:\code\vue-****.�  Initializing git repository...⚙️  Installing CLI plugins. This might take a while.........$  Successfully created project vue-learn.$  Get started with the following commands: $ cd vue-learn $ npm run serve
           

按照最後兩行給出的指令，即可将該項目啟動了。

在浏覽器中通路給出的位址。

localhost:8080

用于本地通路，另一個帶IP的位址用于區域網路内通路。

浏覽器通路得到如上結果，則說明你的第一個vue項目建立成功了。

02

模闆文法

打開之前建立的vue項目，可以看到每一個vue檔案中都存在

template

與

script

兩個部分。(此處我删除了

template

中多餘的代碼，以及

style

的内容)。

模闆文法最直覺的概述其實就是用于template标簽中的文法。

1. 文本綁定

在上述圖例中，

{{ }}

可以實作資料綁定，将data或者props中定義的變量動态綁定到指定位置。

props中是聲明變量，指定變量類型。data是一個函數，傳回一個對象，其中包含已經完成指派的變量，如下圖(props，data不能重複)。

浏覽器通路效果如下：

props隻是聲明了msg的類型為String，為了對HelloWorld元件的msg指派，可以由該元件的使用者來傳入，方式如下圖。

在script中import我們的自定義元件，然後在components中加入該元件。

在使用

{{ }}

完成綁定後，綁定的文本值發生了變化，插入的内容也會同步變化。除非你對使用

{{ }}

插值的标簽添加

v-once

指定，此時綁定内容改變時該标簽也不會發生變化。

1. 原始Html插入

使用

{{ }}

插值的方式會由vue自動進行轉移，插入的HTML文本隻會以文本的方式顯示，為此，可以使用

v-html

指令插入HTML節點。

1. 特性

可能你會想到使用

{{ }}

來綁定标簽的id元件或者value等值，不過vue不支援這種方式。

vue提供了使用v-bind:id的方式來綁定id值。

1. 表達式

在模闆中，除了直接使用

{{ }}

來綁定props以及data中的值，vue還支援在

{{ }}

中使用JavaScript的表達式。

{{ number + 1 }}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}
           

bind:id="'list-' + id"></div>

03

計算屬性

計算屬性的核心在于擁有依賴關系的資料互相監聽，當一個值發生改變時就觸發其計算屬性，來獲得其依賴相關的資料值并且更新。

來看一個簡單的Demo。

如上圖，我們添加一個動态綁定的msg值，并且在button中添加每次點選加一的效果。

在computed計算屬性中定義a方法，并且在a方法中依賴msg的值。

此時當msg發生變化時，依賴它的a方法也會同時調用，更新div中a的值。

此處計算屬性所完成的功能其實由表達式也可以完成，但在實際業務場景中，值的變化可能有更複雜的方式，無法由表達式一行來實作，這就是計算屬性的好處了。

04

類與樣式

與上文id綁定相同，想要關聯class,style屬性，需要使用v-bind，如下圖。

此外還可以使用object對象以及Boolean的方式來實作。

class="static"

v-bind:

>div>

data: {

isActive: true,

hasError: false

}

結果如下：

class="static active">div>

05

條件、清單渲染

條件渲染

vue中條件指令是v-show，當值為true時顯示，為false時不會顯示。

檢視DOM可以發現，該标簽隻是添加了

display: none;

的style樣式。

另一種方式是使用v-if，當值為true時渲染，為false時不會渲染。

v-if與v-show不同，v-if為false時該DOM節點根本不會出現。

清單渲染

vue中可以使用v-for指令來進行清單渲染。

舉一個簡單的Demo。

在v-for中指定周遊list，每一項為item。

v-bind:key的作用是為了在list發生變化時，根據key得到哪些項是沒有發生變化的，進而去重新渲染改變的項，保證性能。

06

事件

vue中使用v-on來指定事件的處理方法，支援click，reset，input，cancel，change等類型。

一個簡單的Demo。

上圖中第一個Button是v-on指定方法的示例，第二個Button則是指定了需要執行的表達式。

對于需要v-on指令監聽的事件，需要在methods中對事件方法進行實作。

通常我們需要在事件觸發的情況下傳遞參數給事件處理方法，vue支援内聯的方式傳遞參數。

說完參數傳遞，在開發中還有一個常見的問題就是事件的冒泡反應，vue支援事件修飾符，來處理冒泡等問題。

.stop

.prevent

.capture

.self

.once

.passive

07

元件

01

元件的定義

vue官網文檔中給出了一種元件的定義方式。

利用Vue執行個體來定義一個元件，相對比我們之前所寫的元件，這種方式複用性并不高，個人推薦之前的寫法。

使用一個vue檔案來定義元件。

其核心在于必須有一個template包裹的元件實作，而script等内容可以省略。

template中的标簽必須統一由一個标簽包裹，也就是一個template下不能出現兩個同級的标簽。

如果要使用這個元件，就需要在父元件的script中引入該元件，并且在components中聲明，具體如下。

02

父元件向子元件傳值

我們在引用元件時往往需要傳入特定的資料，比如說id，title等來展示我們想要的資料，vue支援通過props來對子元件傳值。

03

子元件向父元件傳值

在vue中，資料的流向是由父元件到達子元件的，父元件想要将資料傳達到子元件需要在子元件props中聲明特定的變量。那麼子元件如何将資料傳遞給父元件呢？

子元件可以使用$emit調用父元件的自定義事件。

如上圖，我們可以在子元件的button的點選事件中添加一個表達式，該表達式調用emit來調用父元件的parentClick自定義事件。

在父元件中，可以使用v-on:parentClick指令(可簡寫為@parentClick)來指定父元件中調用的方法。

04

Slot插槽

你可能嘗試過在你的父元件引用子元件時，在子元件的閉合标簽中添加内容，但是顯示結果卻沒有這部分内容。

這時就需要引入slot插槽的概念了，這是vue對w3c的Web Components規範草案的實作之一，将slot元素作為承載分發内容的出口。

你可以在子元件中添加slot标簽，來承載父元件在引用時閉合标簽内插入的值。

此時

标簽中的hello就會顯示在這個slot的位置。

當然子元件中不一定隻有一個slot，為了區分

中插入的多個HTML标簽到底放入哪個slot中，你可以給每一個slot添加一個name，并且在插入時的标簽上指定slot。

08

自定義指令

之前你可能用過很多次

v-

字首的vue指令了，比如v-on,v-bind,v-model,v-html,v-for等等。

vue提供了一個directive的接口讓使用者自己去定義指令。

來看一個簡單的Demo。

這裡我使用directive定義了一個叫做antzuhl的指令，并且在button中使用了它。

在定義時directive支援傳入多個鈎子函數，由于被添加該指令的元件特定條件下觸發。

圖中我添加了一個inserted的函數，在添加antzuhl指令的标簽被插入到DOM後執行。

directive還支援bind，update，componentUpdated，unbind這幾個鈎子函數。

bind：隻調用一次，指令第一次綁定到元素時調用。在這裡可以進行一次性的初始化設定。

inserted：被綁定元素插入父節點時調用 (僅保證父節點存在，但不一定已被插入文檔中)。

update：所在元件的 VNode 更新時調用，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前後的值來忽略不必要的模闆更新。

componentUpdated：指令所在元件的 VNode 及其子 VNode 全部更新後調用。

unbind：隻調用一次，指令與元素解綁時調用。

此處較為核心的是bind，inserted，update三個。

鈎子函數支援傳入參數，主要是el以及binding兩個。

el是指令所綁定的元素，可以用來直接操作DOM。

将之前的自定義指令略作修改，列印參數資訊。

binding是一個對象，包含以下資訊：

name：指令名，不包括 v- 字首。

value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值為 2。

oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鈎子中可用。無論值是否改變都可用。

expression：字元串形式的指令表達式。例如 v-my-directive="1 + 1" 中，表達式為 "1 + 1"。

arg：傳給指令的參數，可選。例如 v-my-directive:foo 中，參數為 "foo"。

modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。

09

Vue-Router

VueRouter是Vue官方的路由管理器，也是Vue學習中的核心點。

在Vue項目中安裝vue-router。

然後需要配置路由資訊，此處我們添加一個route.js來儲存路由資訊。

首先需要使用Vue的use方法将VueRouter引入，之後建立一個路由表，配置路由和對應頁面執行個體。

執行個體化路由對象，傳入路由表資訊(18行)。

最後将該路由對象導出。

在main.js中的Vue全局執行個體初始化中，我們還需要将路由執行個體添加。

這樣router就添加完成了，但是每個頁面的跳轉中我們還需要渲染路由的比對元件，為此我們可以将它添加在全局的模闆HTML中。

在public/index.html中添加router-view标簽。

此時通路浏覽器中路由表資訊就可以路由到相應頁面。

如果說想要通過點選等事件跳轉進行跳轉，可以使用$router或者router-link來進行跳轉。

下面是page A與B之間使用兩種方式互相跳轉的示例。

效果如下：

點選按鈕跳轉到pageB。

點選按鈕跳轉到pageA。

10

Vuex

Vuex是一個官方指定用于Vue.js狀态管理的庫。

之前我們已經說過父元件向子元件利用props傳遞資料，以及子元件向父元件通過調用父元件自定義事件傳值。

那麼元件間如何進行傳值呢？

在我們實際開發中，一個大的頁面往往會有很多元件共同需要的資料，比如使用者資訊，總不能每個元件都去請求一遍吧。

這就是vuex可以解決的問題了。

在上圖中，State就是元件所需要的資料所在的地方，Mutations是對State的操作，Actions是響應使用者的操作，進而調用Mutations來修改State。

首先在你的項目中引入vuex。

在你的項目src中添加一個store目錄，并且建立一個store.js的檔案。

store.js

在main.js中Vue執行個體化時引入該store執行個體。

此處我們定義一個元件，在按下Button時觸發click事件，click事件中調用了使用mapActions綁定的action事件。

而在上面store.js中可以看到，actionsChange中使用commit觸發了mutations中mutationsChange操作。

在另一個元件中，我們顯示在state中定義的count。

這樣就完成了兩個元件間資料共享，以及資料操作更新的問題了。