Day 4 资料单向绑定

今天会来介绍 v-text与 v-html,在这之前会提到Mustache一下子

Mustache
这边要先讲到的就是Mustache,他会以两个大括号{{}}的样子出现,绑定实体资料的语法。

v-text
使用v-text会更新所有的内容,直接将原本内容更新,而使用{{mustache}}只会更新自身的内容
如下图,当A设为原内容,B为後加入的内容

v-html
使用v-html可以直接整个插入html的结构中,他会变成文字显示在页面上

提醒!!! 在网路上动态改变任意html是很危险的,容易导致XSS攻击
XSS 全称为 Cross-Site Scripting(跨网站指令码攻击)。藉由网页的漏洞，将恶意指令放进网页中,使用者进入网站後被导向到钓鱼网站,可能导致帐密或个资外流。此手法就被称为 XSS 攻击。
所以最好在开发时避免在输入的部分使用v-html,避免遭到恶意使用

其中XSS又可以分为以下三种
• Stored XSS (储存型)
• Reflected XSS (反射型)
• DOM-Based XSS (基於 DOM 的类型)
若有兴趣可以到下方参考资料连结有更加详细的解说

介绍完资料单向绑定,明天肯定要来说说双向绑定啦

参考资料: https://forum.gamer.com.tw/Co.php?bsn=60292&sn=11267
https://yuhantaiwan.coderbridge.io/2020/03/29/Vuejs%E5%AD%B8%E7%BF%92%E6%97%85%E7%A8%8BMile6-%E8%B3%87%E6%96%99%E5%96%AE%E5%90%91%E7%B6%81%E5%AE%9A%E7%AF%87v-textv-html/
https://medium.com/andy%E7%9A%84%E8%B6%A3%E5%91%B3%E7%A8%8B%E5%BC%8F%E7%B7%B4%E5%8A%9F%E5%9D%8A/vue%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98-%E4%B8%89-vue%E6%8C%87%E4%BB%A4-%E4%B8%8A-v-text-v-html-v-if-v-show-v-for-4eb6cd994359
https://juejin.cn/post/6844903569334747150