Vue3.x基础-3.插值表达式

插值表达式：

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

说起插值表达式，可能有的都觉得不太熟悉，但是又听说过，自己也有印象，它也有另一个名字叫字面量，“Mustache”语法 (双大括号) 就是我们看到的{{msg}}这种东西。
msg标签的对应着Vue组件实例里data中某个变量的值，当绑定组件实例上的msg property 发生了改变，插值处的内容也会被更新。
首先在data中定义一个变量：

data: {
    msg: "678"
}

这种语法不能使用在标签里，也就是不能作为标签的属性来写，如下的写法是错误的。

 <div class="main" {{msg}}>  </div>

将会报错：

 [Vue warn]: Error in nextTick: "InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '{{msg}}' is not a valid attribute name."
 DOMException: Failed to execute 'setAttribute' on 'Element': '{{msg}}' is not a valid attribute name.

使用 JavaScript 表达式：

插值表达式内部可以使用JavaScript 表达式，常用的三元运算，字符串裁剪等操作都可以直接在插值表达式中直接使用：

<span> {{ msg > 0 ? "我叫你" : "套你猴子" }}</span> // 我叫你

<span> {{ msg.split('').reverse().join('')  }}</span>  // 876

但是流控制和多个表达式并不会被正常解析，并且会报错：

{{ if (msg==666) { return message } }} // 报错

{{ var a = 1 }} // 报错