关于前端:模板编译

模板编译

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