Vue 模板語法第一式 —— 插值

不想成熟的大叔發表於2019-06-05
Vue

上一回：Vue 的初階黑魔法 —— 模板語法

書接上文，上一回我們們講到了 Vue 的黑魔法 —— 模板語法，但是我們們只是解釋了什麼是模板語法。關於 Vue 的模板語法要怎麼使用，具體又包含哪些內容，我們們現在是一概不知。那麼接下來，就讓我們們慢慢走進 Vue 的模板語法，首先要來講的就是模板語法的第一式 —— 插值。

什麼是插值

那麼問題來了，什麼是插值啊？每次遇到一個新的概念，心都好累！關鍵是 Vue 官方並沒有給出解釋，而是直接給了具體的用法而已。

Vue 模板語法第一式 —— 插值

上一回我們們講到模板語法的時候，說了模板語法通過 Vue 框架就可以繫結到對應 Vue 例項的資料內容。換句話講，模板語法就是把 Vue 例項的資料展示在 HTML 網頁中。而現在我們們說的插值，就是把這些資料展示文字內容、瀏覽器解析後的結果、HTML 標籤屬性之類的。

比如下面這段程式碼示例，就是把資料展示成文字內容的：

<div id="app">
    <h2>{{ message }}</h2>
</div>
<script src="scripts/vue.js"></script>
<script>
    // 建立Vue的例項物件
    var app = new Vue({
        el: '#app',
        data: {
            // 儲存在Vue的例項物件中
            message: '前端課湛'
        }
    });
</script>
複製程式碼

上面這段程式碼中的 {{ message }} 就是插值了。

Vue 模板語法的插值有幾種用法呢？一共是四種：

  1. 文字插值
  2. HTML 插值
  3. v-bind 指令
  4. 表示式

接下來，我們們分別地來說一說吧。

文字插值

說到這文字插值啊，它可是 Vue 實現資料繫結中最常見的一種形式。不僅如此，文字插值還有一個名字，叫做“Mustache”語法。又是個新概念，心太累了！說白了，就是一對花括號的寫法，就像 {{ message }} 這種就是文字插值了。其實很簡單吧？！

<div id="app">
    <h2>{{ message }}</h2>
</div>
<script src="scripts/vue.js"></script>
<script>
    // 建立Vue的例項物件
    var app = new Vue({
        el: '#app',
        data: {
            // 儲存在Vue的例項物件中
            message: '前端課湛'
        }
    });
</script>
複製程式碼

剛剛用到的這段程式碼就是文字插值的示例程式碼啦。不過，這塊需要注意一下哈！就是 Vue 例項中的 message 的值變化的時候，對應插值處也會跟著更新。比如，上面這段程式碼執行之後，我們們在瀏覽器的控制檯來改變 message 的值，插值處也會改變的。

如果想要插值處不跟著資料變化而變化的話，我們們也是有辦法的。Vue 提供了 v-once 指令，這個指令就可以不讓插值處跟著資料變化二變化了。

這時候你可能會吐槽了，心真尼瑪累！咋又來個新概念，啥是指令啊？簡單來說，指令就是 Vue 提供的 HTML 標籤的自定義屬性，你可以先這麼理解。

閒言少敘，書歸正傳。

上面那段程式碼示例，我們們只需要在對應的標籤中定義 v-once 指令就行了。就像下面這樣示兒的：

<div id="app">
    <h2 v-once>{{ message }}</h2>
</div>
<script src="scripts/vue.js"></script>
<script>
    // 建立Vue的例項物件
    var app = new Vue({
        el: '#app',
        data: {
            // 儲存在Vue的例項物件中
            message: '前端課湛'
        }
    });
</script>
複製程式碼

上面這段程式碼有興趣你自己執行去吧，自己看看效果。

HTML 插值

文字插值說明白了之後，我們們來看看 HTML 插值吧。說到這個 HTML 插值吧，我是覺得就是增強版的文字插值。為啥這麼說呢？因為文字插值只能把文字展示在插值處，但是如果資料本身就是一段 HTML 程式碼呢？文字插值就會原封不動地把這段 HTML 程式碼展示出來。不信？我們來試試：

<div id="app">
    {{ message }}
</div>
<script src="scripts/vue.js"></script>
<script>
    // 建立Vue的例項物件
    var app = new Vue({
        el: '#app',
        data: {
            // 儲存在Vue的例項物件中
            message: '<span style="color: lightcoral">前端課湛</span>'
        }
    });
</script>
複製程式碼

上面這段程式碼示例中的資料就是 <span style="color: lightcoral">前端課湛</span> 這樣一段 HTML 程式碼，文字插值會把這段 HTML 程式碼原封不動地展示出來。

Vue 模板語法第一式 —— 插值

這個時候，要想瀏覽器去解析這段 HTML 程式碼的話，就需要使用 Vue 提供的 HTML 插值了。這個 HTML 插值其實就是 v-html 指令。

<div id="app">
    <span v-html=message></span>
</div>
<script src="scripts/vue.js"></script>
<script>
    // 建立Vue的例項物件
    var app = new Vue({
        el: '#app',
        data: {
            // 儲存在Vue的例項物件中
            message: '<span style="color: lightcoral">前端課湛</span>'
        }
    });
</script>
複製程式碼

這樣修改程式碼之後，執行的時候瀏覽器就會解析這段 HTML 程式碼了。

Vue 模板語法第一式 —— 插值

HTML 插值在使用的時候也需要注意一個問題，就是 HTML 插值可能會引起 XSS 攻擊。啥？這一回心真真尼瑪累啊！XSS 攻擊我們就不解釋了，好奇的話自行百度吧。

所以，啥意思呢？就是要告訴你啊，如果你要用 HTML 插值的話，那這個資料是不能交給使用者提供的。不然，就很危險了！

v-bind 指令

講到這兒啊，你是不是覺得 Vue 的模板語法還是挺強大的？可是還不夠呢！HTML 標籤還有屬性呢，這個能不能也同樣實現繫結到 Vue 例項的資料呢？答案是肯定的。不是肯定的我們說它幹啥，真是的。

那具體怎麼來實現呢？這就需要用到 Vue 的 v-bind 指令啦。廢話不多說，我們們來看一段示例程式碼吧。

<div id="app">
  <span v-bind:title="message"></span>
</div>
<script src="scripts/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      message: 'this is message.'
    }
  });
</script>
複製程式碼

上面這段程式碼執行之後，就會把資料繫結到 v-bind 指令的 title 屬性上。

Vue 模板語法第一式 —— 插值

牛掰吧？！現在文字內容、HTML 程式碼解析，還有 HTML 標籤的屬性都有了。

表示式

不僅如此呢！Vue 還允許使用 JavaScript 表示式呢。關於啥是 JavaScript 的表示式，如果你知不道的話，那你為啥要學 Vue 呢？！拉出去槍斃五分鐘，再重新去補 JavaScript 基礎去！

比如下面這些都是 JavaScript 表示式：

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>
複製程式碼

這裡還要說一個需要注意的地方，Vue 支援表示式是有個限制的，就是每個資料的繫結只能支援單個表示式。換句話講，多個表示式或者語句啥的都不支援呢！

<!-- 這是語句，不是表示式 -->
{{ var a = 1 }}

<!-- 流控制也不會生效，請使用三元表示式 -->
{{ if (ok) { return message } }}
複製程式碼

好吧！一下子說了這麼多，這下你也該滿意了吧？！

相關文章