Mustache -- 語法 · vue3.x -- 系列學習

>[success] # Mustache -- 語法數據綁定形式是文本插值使用`Mustache`語法 (雙大括號) * 大胡子語法中可以使用**js表達式**，但只限于Vue實例作用域和Vue沙盒[白名單](https://github1s.com/vuejs/core/blob/HEAD/packages/shared/src/globalsWhitelist.ts#L8)，白名單規定了一些全局變量例如`Math`和`Date`。 ~~~ 'Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,' + 'decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,' + 'Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt' ~~~ * 表達式一些基本表達式，和一些三元運算例`{{num + 1}}`、`{{status ? 'succeed' : 'failed'}}` 、`{{changeTime()}}`、`{value.replace(/,/g,"")}` * 不支持流控制例如: `{{ if (ok) { return message } }}` >[danger] ##### 案例 ~~~ <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app">  <h2>{{ message }}</h2> <h2>當前計數: {{ counter }} </h2>  <h2>計數雙倍: {{ counter * 2 }}</h2> <h2>展示的信息: {{ info.split(" ") }}</h2>  <h2>{{ age >= 18? "成年人": "未成年人" }}</h2>  <h2>{{ formatDate(time) }}</h2>   </div> <script src="https://unpkg.com/vue@next"></script> <script> // 1.創建app const app = Vue.createApp({ // data: option api data: function() { return { message: "Hello Vue", counter: 100, info: "my name is abc", age: 22, time: 123 } }, methods: { formatDate: function(date) { return "1999-01-" + date } } }) // 2.掛載app app.mount("#app") </script> </body> </html> ~~~ >[danger] ##### 官方文檔 [對應vue3文檔位置](https://cn.vuejs.org/guide/essentials/template-syntax.html#using-javascript-expressions)