Vue 的核心功能之一，模板编译。我们无需关心如何通过数据操作DOM进行页面渲染，这些事情 Vue 内部已经帮我们实现了。我们只需要关心数据层面即可。

基础使用

在选项 data 中定义了 message 变量，只需要在 template 中进行调用即可，语法是 {{ variable }}。页面中就会渲染出来 hello world。

  1. <template>
  2.     <div>
  3.         {{ message }}
  4.     </div>
  5. </template>
  7. <script>
  8. export default {
  9.     data() {
  10.         return {
  11.             message: 'hello world'
  12.         }
  13.     }
  14. }
  15. </script>

模板语法中可使用简单的 JavaScript 表达式

页面渲染 50。

  1. <template>
  2.     <div>
  3.         {{ num1 + 30 }}
  4.     </div>
  5. </template>
  7. <script>
  8. export default {
  9.     data() {
  10.         return {
  11.             num1: 20
  12.         }
  13.     }
  14. }
  15. </script>

又或者还有其他情况，以下这些例子都是可以的。

  1. <template>
  2.     <div>
  3.         {{ number + 1 }}
  5.         {{ ok ? 'YES' : 'NO' }}
  7.         {{ message.split('').reverse().join('') }}
  8.     </div>
  9. </template>

但是这些是不行的。

  1. <template>
  2.     <div>
  3.         <!-- 这是语句，不是表达式 -->
  4.         {{ var a = 1 }}
  6.         <!-- 流控制也不会生效，请使用三元表达式 -->
  7.         {{ if (ok) { return message } }}
  8.     </div>
  9. </template>