Vue-模板语法

Vue模板语法

个人笔记勿踩

1. 插值语法

文本

最常见的就是使用“Mustache”语法（双大括号）的文本插值：
<span>Message: {{ msg }}</span>
无论何时，绑定的数据对象上 msg 的property发生改变了，插值出的内容都会更新

原始HTML

双大括号会将数据解释为普通文本，而非HTML代码。为了输出真正的HTML，你需要使用v-html指令

<p>Using mustaches: {{ rawHtml }}</p> 
<p>Using v-html directive: <span v-html="rawHtml"></span>
</p>

慎用，防止XSS攻击和CSRF攻击:
CSFR攻击可以理解为：攻击者盗用了你的身份，以你的名义发送恶意请求
XSS攻击：通过开发网页时留下的漏洞插入恶意脚本进行攻击

使用 JavaScript 表达式

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }} 
{{ message.split('').reverse().join('') }} 
<div v-bind:id="'list-' + id"></div>

这些表达式会在所属的Vue实例的数据作用域下作为JavaScript被解析。有个限制就是，每个绑定都只能包含单个表达式，下面这个例子最容易弄混，但是他不是插值语法
{{ if (ok) {return message} }}
这种if判断语句是不行的但是可以使用上述中的三目表达式