模板语法
学习：插值表达式、js表达式、v-cloak
Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。
在底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作。
文本插值
最基本的数据绑定形式是文本插值，它使用的是“Mustache[ˈmʌstæʃ]”语法 (即双大括号)：
<span>Message: {{ msg }}</span>
双大括号标签会被替换为相应组件实例中
msg属性的值。同时每次msg属性更改时它也会同步更新。
js表达式
Vue 实际上在所有的数据绑定中都支持完整的 JavaScript 表达式：
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div :id="`list-${id}`"></div>
这些表达式都会被作为 JavaScript ，以组件为作用域解析执行。
在 Vue 模板内，JavaScript 表达式可以被使用在如下场景上：
在文本插值中 (双大括号)
在任何 Vue 指令 (以 v- 开头的特殊 attribute) attribute 的值中
绑定在表达式中的方法在组件每次更新时都会被重新调用，因此不应该产生任何副作用，比如改变数据或触发异步操作。
v-cloak
用于隐藏尚未完成编译的 DOM 模板。
当使用直接在 DOM 中书写的模板时，可能会出现一种叫做“未编译模板闪现”的情况：用户可能先看到的是还没编译完成的双大括号标签，直到挂载的组件将它们替换为实际渲染的内容。
v-cloak 会保留在所绑定的元素上，直到相关组件实例被挂载后才移除。配合像 [v-cloak] { display: none } 这样的 CSS 规则，它可以在组件编译完毕前隐藏原始模板。
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
直到编译完成前，<div> 将不可见。
完整案例：02_template/01_mustache.html
<!DOCTYPE html> <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>vue模版语法</title> <style> [v-cloak] { display: none; } </style> </head> <body> <div id="app" v-cloak> <!-- 文本插值 --> <div>{{ msg }}</div> <!-- 表达式 --> <div> {{ count + 100 }} </div> <div> {{ msg.split(' ').reverse().join(' ') }} </div> <div> {{ msg.split('').reverse().join('') }} </div> <div id="user1"></div> <!-- 绑定属性 --> <div v-bind:id="'user' + count"></div> <div :id="'user' + count"></div> <div :id="`user${count}`"></div> </div> </body> <script src="../lib/vue.global.js"></script> <script> const { createApp } = Vue const app = createApp({ data () { return { count: 100, msg: 'hello ty2208' } } }) app.mount('#app') </script> </html>
