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

{{msg}}

~~~ >[info] ## v-text -- 模板渲染 ~~~ 1.v-text 能展示对应data中数据内容,也能在数据基础上做运算 2.v-text 会吧标,签中的内容替换 ~~~ >[danger] ##### v-text -- 使用案例 ~~~ Title

我被覆盖掉了

~~~ * 展示效果 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/f5b08a15b5ebe4f979992024a21d8116_144x128.png) >[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攻击的风险 ~~~
';