关于前端:模板编译

模板编译

原文链接：https://note.noxussj.top/?source=sifo

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>

原文链接：https://note.noxussj.top/?source=sifo