模板语法

(这一部分比较简单,不作详细记录与分类,只标记一些需要注意的点)

插值

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>

指令