【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. 渲染函数

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


总结

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值