关于前端:模板编译

模板编译

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