模 板 编 译

模板编译

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

基础使用

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

app.vue

<template>
    <div>
        {{ message }}
    </div>
</template>

<script>
export default {
    data() {
        return {
            message: 'hello world'
        }
    }
}
</script>

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

页面渲染 50。

<template>
    <div>
        {{ num1 + 30 }}
    </div>
</template>

<script>
export default {
    data() {
        return {
            num1: 20
        }
    }
}
</script>

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

<template>
    <div>
        {{ number + 1 }}

        {{ ok ? 'YES' : 'NO' }}

        {{ message.split('').reverse().join('') }}
    </div>
</template>

但是这些是不行的。

<template>
    <div>
        <!-- 这是语句，不是表达式 -->
        {{ var a = 1 }}

        <!-- 流程控制也不会生效，请使用三元表达式 -->
        {{ if (ok) { return message } }}
    </div>
</template>

原文链接：菜园前端