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)