一、插值操作

1. Mustache

如何將data中的文本數據，插入到HTML中呢？
我們已經學習過了，可以通過Mustache語法(也就是雙大括號)。

Mustache: 胡子/胡須.

我們可以像下面這樣來使用，并且數據是響應式的

2. v-once

但是，在某些情況下，我們可能不希望界面隨意的跟隨改變 這個時候，我們就可以使用一個Vue的指令v-once

v-once:

• 該指令后面不需要跟任何表達式(比如之前的v-for后面是由跟表達式的)
• 該指令表示元素和組件(組件后面才會學習)只渲染一次，不會隨著數據的改變而改變。

代碼如下：

3. v-html

某些情況下，我們從服務器請求到的數據本身就是一個HTML代碼
如果我們直接通過{{}}來輸出，會將HTML代碼也一起輸出。
但是我們可能希望的是按照HTML格式進行解析，并且顯示對應的內容。

如果我們希望解析出HTML展示,可以使用v-html指令

• 該指令后面往往會跟上一個string類型
• 會將string的html解析出來并且進行渲染
  

4. v-text

• v-text作用和Mustache比較相似：都是用于將數據顯示在界面中
• v-text通常情況下，接受一個string類型

5. v-pre

v-pre用于跳過這個元素和它子元素的編譯過程，用于顯示原本的Mustache語法。

比如下面的代碼：

• 第一個h2元素中的內容會被編譯解析出來對應的內容
• 第二個h2元素中會直接顯示{{message}}
  
  

6. v-cloak

在某些情況下，我們瀏覽器可能會直接顯然出未編譯的Mustache標簽。
當網絡較慢，網頁還在加載 Vue.js ，而導致 Vue 來不及渲染，這時頁面就會顯示出 Vue 源代碼。我們可以使用 v-cloak 指令來解決這一問題。使用 v-cloak 指令來解決屏幕閃動的問題
cloak: 斗篷

二、綁定屬性

前面我們學習的指令主要作用是將值插入到我們模板的內容當中。
但是，除了內容需要動態來決定外，某些屬性我們也希望動態來綁定。

• 比如動態綁定a元素的href屬性
• 比如動態綁定img元素的src屬性

這個時候，我們可以使用v-bind指令：

• 作用：動態綁定屬性
• 縮寫：:
• 預期：any (with argument) | Object (without argument)
• 參數：attrOrProp (optional)

v-bind用于綁定一個或多個屬性值，或者向另一個組件傳遞props值(這個學到組件時再介紹)
在開發中，有哪些屬性需要動態進行綁定呢？

還是有很多的，比如圖片的鏈接src、網站的鏈接href、動態綁定一些類、樣式等等
比如通過Vue實例中的data綁定元素的src和href，代碼如下：

1.v-bind語法糖:

v-bind有一個對應的語法糖，也就是簡寫方式
在開發中，我們通常會使用語法糖的形式，因為這樣更加簡潔。

簡寫方式如下：

2.v-bind綁定class

很多時候，我們希望動態的來切換class，比如：
當數據為某個狀態時，字體顯示紅色。
當數據另一個狀態時，字體顯示黑色。

綁定class有兩種方式：

• 對象語法
• 數組語法

1)綁定方式：對象語法

對象語法的含義是:class后面跟的是一個對象。

對象語法有下面這些用法：

用法一：直接通過{}綁定一個類 <h2 :class="{'active': isActive}">Hello World</h2>用法二：也可以通過判斷，傳入多個值 <h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>用法三：和普通的類同時存在，并不沖突 注：如果isActive和isLine都為true，那么會有title/active/line三個類 <h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>用法四：如果過于復雜，可以放在一個methods或者computed中 注：classes是一個計算屬性 <h2 class="title" :class="classes">Hello World</h2>

2)綁定方式：數組語法

數組語法的含義是:class后面跟的是一個數組。
數組語法有下面這些用法：

用法一：直接通過{}綁定一個類 <h2 :class="['active']">Hello World</h2>用法二：也可以傳入多個值 <h2 :class=“[‘active’, 'line']">Hello World</h2>用法三：和普通的類同時存在，并不沖突 注：會有title/active/line三個類 <h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>用法四：如果過于復雜，可以放在一個methods或者computed中 注：classes是一個計算屬性 <h2 class="title" :class="classes">Hello World</h2>

3.v-bind綁定style

我們可以利用v-bind:style來綁定一些CSS內聯樣式。
在寫CSS屬性名的時候，比如font-size
我們可以使用駝峰式(camelCase) fontSize
或短橫線分隔 (kebab-case，記得用單引號括起來) ‘font-size’

綁定class有兩種方式：

對象語法

數組語法

綁定方式一：對象語法

:style="{color: currentColor, fontSize: fontSize + 'px'}"

style后面跟的是一個對象類型

• 對象的key是CSS屬性名稱
• 對象的value是具體賦的值，值可以來自于data中的屬性

2) 綁定方式二：數組語法

<div v-bind:style="[baseStyles, overridingStyles]"></div>

• style后面跟的是一個數組類型
• 多個值以，分割即可

三、計算屬性

1. 什么是計算屬性？

我們知道，在模板中可以直接通過插值語法顯示一些data中的數據。
但是在某些情況，我們可能需要對數據進行一些轉化后再顯示，或者需要將多個數據結合起來進行顯示

• 比如我們有firstName和lastName兩個變量，我們需要顯示完整的名稱。
• 但是如果多個地方都需要顯示完整的名稱，我們就需要寫多個{{firstName}} {{lastName}}
  

我們可以將上面的代碼換成計算屬性：

• OK，我們發現計算屬性是寫在實例的computed選項中的。
  

2. 計算屬性的復雜操作

計算屬性中也可以進行一些更加復雜的操作，比如下面的例子：

3. 計算屬性的setter和getter

每個計算屬性都包含一個getter和一個setter
在上面的例子中，我們只是使用getter來讀取。
在某些情況下，你也可以提供一個setter方法（不常用）。

在需要寫setter的時候，代碼如下：

4. 計算屬性的緩存

我們可能會考慮這樣的一個問題： methods和computed看起來都可以實現我們的功能
那么為什么還要多一個計算屬性這個東西呢？

原因：計算屬性會進行緩存，如果多次使用時，計算屬性只會調用一次。

總結

以上是生活随笔為你收集整理的一、Vue基础语法学习笔记系列——插值操作(Mustache语法、v-once、v-html、v-text、v-pre、v-cloak)、绑定属性v-bind(绑定class、style)、计算属性的全部內容，希望文章能夠幫你解決所遇到的問題。

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