(这一部分比较简单,不作详细记录与分类,只标记一些需要注意的点)
1️⃣ Mustache语法 (双大括号)的文本插值
<span>{{ msg }}</span>
<!-- js表达式是受支持的插值语法 -->
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<aside> 🚫 不支持自定义变量和全局变量,只支持一些vue白名单的变量,如Date、Math等; 也不支持if、for等比较复杂的js流程控制语句,但支持三元表达式 。 可以理解为只支持一行就能得到结果的简单运算。
</aside>
2️⃣ 使用 v-once
指令执行一次性地插值,当数据改变,插值处的内容也不会更新。
<span v-once> {{ msg }}</span>
3️⃣ 使用 v-html
将文本解析成html代码,如果直接通过插值语法,会将数据以文本形式打印出来。
<span v-html="rawHtml"></span>
<aside>
🚫 不要把 v-html
当成模板使用,应使用组件
</aside>
<aside>
🚫 滥用 v-html
渲染有 XXS攻击
的风险,不要使用用户提供的内容作为插值
</aside>
4️⃣ 使用 v-text
将文本解析为纯字符串
<span v-text="rawHtml"></span>