【vue3】03. 跟着官网学习vue3

每日鸡汤：所有真实的快乐，都来自很久的努力

前言

这一节我们主要学习【模版语法】相关的知识，上一节，我们说到根目录下面的index.html是我们的根组件模版，所以可见模版语法是基于html的。

---

一、模版基本语法

1.  使用基本语法

我们将官网设计的例子，都卸载我们的app.vue文件中，手写一边熟悉一下，基本的语法和使用方式，这一部分没有难度，但是建议自己试一下

 2.  谨慎使用v-html 

官方提示，我们需要谨慎的使用v-html这个功能，因为它的本质就是innerHTML的方法，我们知道innerHTML会很容易造成XSS攻击。

请仅在内容安全可信时再使用 v-html，并且永远不要使用用户提供的 HTML 内容。

这句话是什么意思呢，比如，页面上有一个输入框供用户手动输入，那么这个editorText就是用户提供的内容，不能保证editorText这个内容是可信的，所以就不要在第二条语句中使用

v-html="editorText"

<input v-model="editorText"/>

<!-- 不要在这种情况使用v-html="editorText"-->

<div v-html="editorText"></div>

v-html 在有些时候是很好用的功能

比如，要高亮一句话中的一个单词，那么我们可以用把高亮的标签和响应的样式，拼接起来，再用v-html设置。

 // 手动拼接 数据
const text = '我毕业于<span style="color: red">北京</span>大学'

// 在模版中使用
// <div v-html="text"></div>

虽然能不用就不用，但是，实在不行我们用了也应该尽量避免xss攻击，有一些包可以用一下比如

【 xss-filters】等，可以找一些好用的包，最大可能的避免攻击。

关于xss攻击的内容我们后续再研究。

在单文件组建中，scoped样式不会作用于v-html里面的内容

二、模版引擎和渲染机制

vue模版语法的使用如第一小节所讲，看起来很简单，我们可以顺便了解一下关于模版语言的知识。

1. 模版引擎

模版引擎，顾名思义，就是把我们写的模版语言，翻译成html，供浏览器渲染的工具。在我们的.vue文件中，<template></template>之间的内容就是所谓的模版，因为很显然浏览器原生是识别不了，诸如{{}} 这样的符号的，这些都是依赖于底层的模版引擎的解析。

我们之所以使用模版，是为了简化html代码，简化字符串拼接，使肉眼看上去逻辑更清晰，而开发者小白只需要简单学习一下模版语法，就可以上手写业务。

模版引擎内部就是一些列的正则表达式，针对我们写的模版，用各种规则拆分、再拼接。

2. 渲染机制

3. 渲染函数

这些部分比较复杂，先看一遍官网相关知识，后面再说。

---

总结

至此模版语法相关知识总结完毕，有不对的地方欢迎指正。