Vue - 插值

Vue实例data中的值可以很方便的在dom中直接使用，具体请看下方示例：

<script>
new Vue({
  el: '#app',
  data: {
    text: '我是一行文本',
    html: '<span>我是文本</span>',
    imtes: [
    	{name: sp1, value: 1},
    	{name: sp2, value: 2},
    	{name: sp3, value: 3},
    ],
    id: 1,
    linkText: '我是一个超链接,
    attributeName: href,
    url: 'http://www.baidu.com',
    key: '',
  }
})
</script>

1、文本 使用 {{...}}（双大括号）进行文本插值

<p>{{text}}</p>
//显示结果为：<p>我是一行文本</p>

2、Html 使用 v-html 指令用于输出 html 代码

<div v-html="html"></div>
// 显示结果为：<div><span>我是文本</span></div>

3、属性 只用 v-bind 进行属性插值。 注意：属性插值不需要 {{...}}（双大括号）

<ul>
	<li v-for="item in imtes">
		<span v-bind:class="item.name">{{item.value}}</span>
	</li>
</ul>
// 显示结果：
<ul>
	<li v-for="item in imtes">
		<span class="sp1">1</span>
		<span class="sp2">2</span>
		<span class="sp3">3</span>
	</li>
</ul>

v-bind:class="item.name"也可以简写为：’:class=“item.name”’

4、v-once 一次性地插值

<span v-once>{{ text}}</span>
// 显示结果为：<p>我是一行文本</p>

5、表达式

<div v-bind:id="'list-' + id">{{text}}</div>
// 显示结果为：<div v-bind:id="list-1">我是一行文本</div>

6、表达式作为一个指令的参数 从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数

<a v-bind:[attributeName]="url">{{linkText}}</a>
// 显示结果为：<a href="http://www.baidu.com">我是一个超链接</a>

代码中 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用


7、用户输入
v-model 双向绑定数据

<input v-model="key">

当用户在 input 中输入内容是，Vue实例中 data 对象中 key 属性的值会相应变化。当 data 对象中 key 属性被动态赋值时 input 显示的文本也会相应的改变

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值

本文参考资料：
https://cn.vuejs.org/v2/api/
https://www.runoob.com/vue2/vue-template-syntax.html