表达式

• 表达式一定会有一个值, 这个值是任意类型
• 常见的表达式有: 引用表达式的变量名, 函数调用, 连接字符串, 表达式语句(如三目运算), 访问属性(arr.length)等
• 表达式可以直接使用, 也可以赋值给变量
• 注: 声明, 语句本身不是表达式, 例如

var a = 10; // 变量声明
var foo = function(){}; // 函数声明
if..else
for(){}

双花括号语法{{}}

• 模板语法, Mustache语法, 也叫双大括号语法
• Mustache 标签将会被替代为对应数据对象上 msg 属性的值
• 放在Mustache标签内的文本成为绑定表达式, 其实就是数据绑定
• 可以写入变量和常量
• 可以写入数据和表达式 例如写入一个变量msg

<div id="app">
   <span>Massage: {{ msg }}</span>
</div>

<script>
new Vue({
   el: "#app",
   data: {
      mag: 'hello!'  // 改变msg的值, 花括号里的msg也会改变
   }
})
</script>

基本用法

双花括号内可以写入哪些内容

// JSON数据
<p>{{ nameList }}</p>

data: {
   nameList: {
      name1: 'Lily',
      name2: 'Marry',
      name3: 'Josh'
   }
}

// 数字
<p>{{ 20 }}</p>
<p>{{ (20 + 30) * 2 }}</p>


// 字符串
<p>name: {{ '星仔' }}</p>
<p>age: {{ 22 }}</p>


// 运算
{{ ok ? 'YES' : 'NO' }}
{{ ａ＋1 }}   
{{ example.split(",") }} 

// 错误示例
{{var logo = 'Nike'}}  // 这是语句，不是表达式  
{{if(true) return 'hello'}}  // 条件控制语句是不支持的，可以使用三目运算

总结:

• 避免在双花括号语法中使用复杂的表达式

常见问题

• 在插值中如何区分表达式和普通文本?
  Vue会通过是否带有引号区分两者.

  <!--表达式--> 
  
   NaN 
  
  <!--字符串 --> 
   number + 1  
   name  
   name