03——插值表达式

Vue里面的插值表达式（双花括号{{   }}）是用来输出data数据的，定义在data里面的数据，可以使用插值表达式来输出：例如：{{ msg }}

基本用法：

例如data里有一个数据msg：

 data() {
        return {
            msg:'我是data里面的一个数据',
        }
       },

使用插值表达式输出到页面：

<template>
  <div>
    <!-- view 视图层 -->
     {{ msg }} 
  </div>
</template>

页面上会展示出这个数据：

插值表达式实际项目中的用途：

在项目中，data数据肯定不是我们随便写的一个值，大部分是请求获取的数据（例如res），通过mthods方法把请求到的数据赋值给data里面的某个数据aa，那么data里面这个数据aa就保存了请求的数据res，此时，把aa显示在页面上，就把数据显示在页面上了，这个数据aa如何显示在页面上？ 这时就使用插值表达式显示。当然，光这个插值表达式是不能渲染出所有的数据类型的，例如数组每一项，对象和数组的遍历显示，只靠插值表达式是做不到的。后面还配合几个指令一起来完成数据的渲染。

小总结：

1. 为什么 双花括号能显示出真实的数据：因为 vue会拿到vue实例所控制DOM区域（#app）里面的标签  使用vue的语法去编译它

2. 双花括号里面可以渲染data里面的数据

3.双花括号里面也可以执行js代码

4. 插值表达式有闪动问题 （v-cloak解决）