Vue初学

1.什么是“插值表达式”

1.1语法

插值表达式可以理解为：使用大括号来包裹JS代码
作用：将大括号中的数据替换成对应属性值进行展示。
PS：双大括号语法也称为模板语法（mustache语法）。mustache是一款经典的前端模板引擎，在前后端分离的技术架构下，前端模板引擎是一种可以被考虑的技术选型。随着气短框架（AngularJS、reactJS、Vue）的流行，前端的模板技术也将成为某种形式上的标配，Mustache的价值在于其经典和稳定。

1.2经验

插值表达式中可以写入哪些内容？

• json数据
• 数字
• 字符串
• 插值表达式

1.3演示一下插值表达式中其他插入内容的具体使用情况，如下代码所示：

<template>   
  <div>       
    <!-- json 数据（变量）-->       
    <h1>{{ msg }}</h1>       
    <!-- 数字 -->       
    <p>{{ 10 }}</p>       
    <!-- 字符串 -->       
    <h1>{{ "小螃蟹" }}</h1>       
    <!-- 字符串 -->       
    <h1>{{ 1+1 }}</h1>       
    <h1>{{ '你好，'+ name }}</h1>       
    <h1>{{ 2>3?'true':'false' }}</h1>   
  </div>
</template> 
<script>
  export default {   
    name: 'APP',   
    data() {      
      return {          
        msg: '小螃蟹',          
        name: '小螃蟹'      
      }   
    }
  }
</script> 
<style scoped>
</style>

在插值表达式中需要注意区分变量和字符串，使用引号包裹的为字符串，没有使用引号包裹的，都会被系统解析成变量名或方法名。

1.5tips

Vue框架自带模板引擎，一次在使用Vue框架的过程中不需要再去搭配其他的模板引擎，这个自带的模板引擎指的就是插值表达式。