关于前端:模板编译

模板编译

原文链接: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

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据