Vue — 模板语法
最后更新于：2022-04-02 08:06:00
[TOC]
>[success] # Vue 模板语法
~~~
1.vue 和大多数后台语言，甚至是和art-template 这种前端模板库一样，都有一套，
特定的语法来把数据渲染在html上。
~~~
>[info] ## Mustache -- 大胡子语法
~~~
1.大胡子的语法格式双大括号'{{}}',用在html标签之间，不能写在标签属性中
2.大胡子语法中可以使用js表达式，但只限于Vue实例作用域和Vue沙盒白名单，
白名单规定了一些全局变量例如Math和Date。
3.表达式一些基本表达式，和一些三元运算例如：
'{{num + 1}}'、'{{status ? 'succeed' : 'failed'}}'
'{{changeTime()}}'、'{value.replace(/,/g,"")}'
4.但不支持流控制例如:'{{ if (ok) { return message } }}'
5.简单的理解就是里面只能写：每个绑定都只能包含'单个表达式'
~~~
* 关于白名单中可以用的参数
* [参考的代码](https://github.com/vuejs/vue/blob/v2.6.10/src/core/instance/proxy.js#L9)
~~~
'Infinity,undefined,NaN,isFinite,isNaN,'
'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,'
'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,'
'require' // for Webpack/Browserify
~~~
>[danger] ##### 大胡子语法案例
~~~
Title
~~~
>[info] ## v-text -- 模板渲染
~~~
1.v-text 能展示对应data中数据内容，也能在数据基础上做运算
2.v-text 会吧标,签中的内容替换
~~~
>[danger] ##### v-text -- 使用案例
~~~
Title
~~~
* 展示效果
>[info] ## v-html -- html标签渲染
~~~
1.将标签语义化展示在页面上
2.容易产生xss攻击，请只对可信内容使用 HTML 插值，绝不要对用户提供的内容
使用插值。
3.如何防止xss攻击:
3.1 前端过滤
3.2 后台转义(< > < >)
3.3 给cookie 加上属性 http例如:
click
~~~
>[danger] ##### v-html 案例
~~~
Title
~~~
>[success] # 三种将数据渲染到页面的方法总结
~~~
1.虽然上面三种方法都可以将数据渲染到页面上，但是工作中我最常用的是'{{}}'
2.'{{}}' 最被常用但是在加载的时候会出现闪烁问题(指令篇章v-cloak会讲解解决方
法)，而且只能吧html标签当字符串渲染
3.'v-text' 虽然没有数据加载闪烁问题，但是会将标签中间的数据覆盖，也不能渲
染html格式数据。
4.'v-html' 谨慎使用会出现xss攻击的风险
~~~
';
{{msg}}
我被覆盖掉了