2.2 插值

一. 插入成内容
上一节简单浏览了页面的运行，这一节介绍一下插值表达式。
插值是用在html模板上，html不可能把固定的文字写上去。例如一个网页，用户登录后，有下面的html片段：
<p>你好，中二之魂，欢迎回到我们大家庭</p>
而浏览器会把这段文字显示出来，但这样写的话，不管谁上了这个网站，都看到同意的用户名“中二之魂”。难道一个用户就写一个html页面？仅仅是因为用户名不一样？
前端技术，就是把某些部分变成变量，外部传入什么值（或者查找数据库得到什么值），就显示什么值。
vue.js的做法是插值表达式，写法是这样的{{变量名}}
上面的代码片段就变成了：
<p>你好，{{username}}，欢迎回到我们大家庭</p>
现在把这段html复制到App.vue文件的template部分：
然后在JavaScript部分，定义username，要特别注意，第16行末尾要添加一个逗号，否则会有语法错误
data(){
 return{
  username:"中二之魂"
 }
}

然后保存网页后重新部署，就能看到新加的html语句了：
这就是所谓的网页内容数据分离。
可能有些同学会有疑惑，这样做不一样只能显示中二之魂吗？只是把这个名字移动到了JavaScript部分而已。
的确，现在这个样子，并不能体现“传入什么数据就显示什么”，而实际应用中，username的值是查询数据库后才得到的，这时候就能做到传入什么数据就显示什么。
省略... 
data() {
    return {
      username: "",
      message:"正在加载中"
    };
  },
}
省略...
二. 插值里的表达式
插值里面可以写一行的JavaScript表达式，例如：
<p>你好，{{username+2}}，欢迎回到我们大家庭</p>
如果username恰好是一个数字，那么这里会执行加法，如果不是数字，那么就会执行字符串拼接。
只要是能计算出一个值的表达式，都可以执行，但仅限一行，而且这里也不建议用太复杂的表达式。下面是另一个例子，
<p>{{username==''?'请登录':'你好，'+username+'，欢迎回到我们大家庭'}}</p>
这是条件表达式，当username为空值的时候，显示“请登录”，否则（也就是不为空值）显示“你好，xxx，欢迎回到我们大家庭”，要测试这句话，可以把usename的值置为空值：


三. 插入成元素属性
元素内部的属性，也是可以填充的。例如下面的input内部的type和value就是它的属性。
<input type="text" value="good"/>
但不能使用两个花括号的插值，这里有特定的写法 v-bind:属性，例如下面的代码
如下所示，vue是这样来处理这类属性的渲染的：
<template>
    其他代码
    <span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
    其他代码
</template>
也就是渲染了span的title属性，如果message的值是“页面加载中”，vue页面的JavaScript部分是这样的：
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return {
      username: "中二之魂",
      message:"正在加载中"
    };
  },
}
要注意，第10行新添加变量的时候，第9行最后要加上逗号。
那结果是类似这样的：
<span title="页面加载中">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
另外属性的插值v-bind:属性，可以简写成":属性值"，上面的代码可写成这样：
    <span :title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>