【Vue】v-text 、v-html与 {{　}} (Mustache)

【前言】
本系列为个人前端学习之路的学习笔记，在过往的学习过程中累积了很多笔记，如今想藉着IT邦帮忙这个平台做整理+再复习。
本系列标题一律以【】标示该篇文章主要涉及的内容，例如【JavaScript】、【Vue】等等。
若内容有误，还麻烦各路大神不吝於点出问题，感激不敬。

在使用Vue的时候，如果我们想将data中的资料显示在画面上
通常会使用v-text和{{　}} (Mustache)这两种方法
范例：https://codepen.io/linchinhsuan/pen/GRyVoYv

v-text和{{　}} (Mustache)所得到的结果都是一样的，即将data内对应的内容渲染到画面上

  <p>{{ message }}</p>
  <p v-text="message"></p>

在这个案例中，我们将data内的message分别以两种不同的方式渲染到画面上

v-html

v-html与v-text和{{　}} (Mustache)不同
他可以直接渲染HTML标签
范例：https://codepen.io/linchinhsuan/pen/LYewGaR

在这个案例中我们可以看到
当data内的值为HTML格式的时候
v-text和{{　}} (Mustache)会将其渲染成纯字串
而v-html则能够正确的显示HTML结构

但也正因如此，如果随意使用容易导致XSS攻击

{{　}} (Mustache)内的内容，其实就是一个表达式
因此，只要是表达式都可以放进来
例如：

{{ 1 + 1 }}
{{ `样板字面值 ${变数}` }}
{{ fn(a, b) }}
{{ isNew ? "新的" : "旧的" }}

......等等，只要是JavaScript的表达式，基本上都可以放入{{　}} (Mustache)中
并且最终会将其回传的结果显示在画面上
例如{{ 1 + 1 }}就会显示 2 而非直接把 1 + 1 印在画面上