小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
先分别简单介绍一下 React 和 Vue 的开发模式：
React的开发模式：React使用JSX，是一种类似于编写js代码的语法；- 之后通过
Babel将JSX编译成React.createElement函数调用；
Vue的开发模式：Vue也支持jsx的开发模式（后面会讲到）；- 但是大多数情况下，使用基于
HTML的模板语法； - 在模板中，允许开发者以声明式的方式将
DOM和底层组件实例的数据绑定在一起； - 在底层的实现中，
Vue将模板编译成虚拟DOM渲染函数（这个我们后面会讲到）。
所以对于学习 Vue 来说，学习模板语法是非常重要的。
1. Mustache 双大括号语法
如果我们希望把数据显示到模板（template）中，使用最多的语法就是 “Mustache”语法（双大括号） 的文本插值。
- 我们知道，
data返回的对象是有添加到Vue的响应式系统中的； - 当
data中的数据发生改变时，对应的内容也会发生更新； - 当然，
Mustache中不仅仅可以是data返回的对象中的属性，也可以是一个JavaScript表达式。
<template id="my-app">
<!-- 1. Mustache 的基本用法 -->
<h2>{{ message }}</h2>
<!-- 可以同时使用多个 Mustache -->
<h2>{{ message }} - {{ counter }}</h2>
<!-- 2. 可以是一个表达式 -->
<h2>{{ counter * 2 }}</h2>
<!-- 复杂一点的表达式 -->
<h2>{{ message.split('').reverse().join('') }}</h2>
<!-- 三元表达式 -->
<h2>{{ isShow ? '我出现了' : '' }}</h2>
<!-- 下面的按钮用来改变 isShow 的值，方便演示上面三元表达式的效果（因为 data 中的 isShow 是
响应式的，所以一旦 isShow 发生变化，就会重新渲染模板中的内容），这里先用下
@click 来绑定（监听）单击事件，后面再详解 -->
<button @click="toggle">切换</button>
<!-- 3. 可以调用方法（这可以作为较长的复杂表达式的替代方案） -->
<h2>{{ getReverseMessage() }}</h2>
<!-- 4. 也可以使用计算属性（computed），开发中用得较多，后面会讲到 -->
</template>
注意下面的用法是错误的：
<!-- 注意：每个 Mustache 中只能包含单个表达式 -->
<!-- 所以下面是错误用法，不会生效： -->
<!-- 错误用法 1：这是语句，不是表达式： -->
<h2>{{ var a = 10 }}</h2>
<!-- 错误用法 2: 这是 if 语句（流程控制语句），也不是表达式，也不会生效，建议使用三元表达式 -->
<h2>{{ if (isShow) { return message } }}</h2>
<body> 元素中的完整代码如下：
<div id="app"></div>
<template id="my-app">
<!-- 1. Mustache 的基本用法 -->
<h2>{{ message }}</h2>
<!-- 可以同时使用多个 Mustache -->
<h2>{{ message }} - {{ counter }}</h2>
<!-- 2. 可以是一个表达式 -->
<h2>{{ counter * 2 }}</h2>
<!-- 复杂一点的表达式 -->
<h2>{{ message.split('').reverse().join('') }}</h2>
<!-- 三元表达式 -->
<h2>{{ isShow ? '我出现了' : '' }}</h2>
<!-- 下面的按钮用来改变 isShow 的值，方便演示上面三元表达式的效果（因为 data 中的 isShow 是
响应式的，所以一旦 isShow 发生变化，就会重新渲染模板中的内容），这里先用下
@click 来绑定（监听）单击事件，后面再详解 -->
<button @click="toggle">切换</button>
<!-- 3. 可以调用方法（这可以作为较长的复杂表达式的替代方案） -->
<h2>{{ getReverseMessage() }}</h2>
<!-- 4. 也可以使用计算属性（computed），开发中用得较多，后面会讲到 -->
<!-- 注意：每个 Mustache 中只能包含单个表达式 -->
<!-- 所以下面是错误用法，不会生效： -->
<!-- 错误用法 1：这是语句，不是表达式： -->
<!-- <h2>{{ var a = 10 }}</h2> -->
<!-- 错误用法 2: 这是 if 语句（流程控制语句），也不是表达式，也不会生效，建议使用三元表达式 -->
<!-- <h2>{{ if (isShow) { return message } }}</h2> -->
</template>
<script src="./js/vue.js"></script>
<script>
const App = {
data() {
return {
message: '你好啊',
counter: 100,
isShow: true
}
},
methods: {
getReverseMessage() {
return this.message.split('').reverse().join('');
},
toggle() {
this.isShow = !this.isShow;
}
},
template: '#my-app'
};
Vue.createApp(App).mount('#app');
</script>
