Vue【模板】模板语法、指令、条件渲染、列表渲染、ref、JSX

主要纪录练习，文字较少，准确的语法概念等参考 Vue 官网文档。

目录：

1. 模板语法

2. 指令

3. 条件渲染

4. 列表渲染

5. ref

6. JSX

模板语法

Vue.js 使用了基于 HTML 的模板语法，所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

文本插值

我的另一篇关于插值的笔记：https://www.cnblogs.com/xiaoxuStudy/p/12849530.html

Vue【模板】模板语法、指令、条件渲染、列表渲染、ref、JSX

一次性插值

使用 v-once 实现一次性插值。

插入原始 HTML

使用 v-html 实现

注意：易导致 XSS 攻击，绝不要对 UGC 内容使用。UGC内容就是用户贡献的东西，用户填写的显示到页面上的内容。

<template>
    <div>
        <div v-html="description"></div>
    </div>
</template>
 
<script>
export default {
    data(){
        return {
            description : "俺是<b>小许</b>"
        }
    }
}
</script>

View Code