绑定title提示信息
除了上一章中的文本插值，我们也可以绑定DOM的其他属性:
<div id="root">
<span v-bind:title="message">
停留片刻查看动态消息
</span>
</div>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el: "#root",
data: {
message: '现在时间为' + new Date().toLocaleString()
}
})
</script>
在浏览器打开此index.html文件，鼠标停留在文字区域，我们可以看到提示信息显示为现在时间为2017-09-07XXX 的提示信息，由此可以看出来，span中的title属性已经与app.message属性保持一致，上面出现的v-bind的属性在Vue中被称为指令，在Vue中，指令带有前缀v-，用来区分它们属于Vue中的属性。同样的我们也按F12呼出控制台，改变message的值，你会看到title的值也同步更新了。
循环与条件
我们来看下面的例子
<div id="root">
<ul>
<li v-for="item in items" v-if="item.show">
{{item.msg}}
</li>
</ul>
</div>
var app = new Vue({
el: "#root",
data: {
items: [
{msg: 'Sherlock', show: true},
{msg: 'Tina', show: false},
{msg: 'Sherry', show: true},
{msg: 'Aini', show: false},
{msg: 'Nokia', show: true}
]
}
})
在浏览器中它会显示以下效果:
- Sherlock
- Sherry
- Nokia
上面我们看到了两个新的指令：v-for和v-if，v-for指令可以展开数组数据，用来渲染一个项目列表，上面本应该展开输出以下效果：
- Sherlock
- Tina
- Sherry
- Aini
- Nokia
这里为什么会少了Tina、Aini两项呢，这里就是另外一个指令v-if的效果了，控制元素的显示隐藏，由于Tina、Aini对应的show值为false，所以在展开的时候，这两项被隐藏了，我们也可以在控制台把Tina对应的show设置成true这时你会看到Tina会显示到正确的位置，而且，Vue也提供一个强大的过渡效果系统，可以在Vue插入、更新、删除元素时自动应用过渡效果。
处理用户输入
最后我们来了解一下Vue是怎么处理用户的输入与交互的，这里用到一个新指令v-on，它可以绑定一个事件监听器，通过它调用Vue实例中我们定义的方法：
<div id="root">
<p> {{ message }} </p>
<button v-on:click="reverse"> 逆转消息 </button>
</div>
var app = new Vue({
el: "#root",
data: {
message: "Hello World"
},
methods: {
reverse: function() {
this.message = this.message.split('').reverse().join('')
}
}
})
当我们在点击按钮的时候，触发点击事件，从而调用Vue实例的reverse方法，在方法中我们更新了应用的状态，但没有去操作DOM——所有的DOM操作都由Vue去处理，我们不用去处理这些琐事。
另外，这里还有一个指令也要一起说下，v-model指令，通过它我们能轻松实现表单输入和应用状态之间的双向绑定:
<div id="root">
<p> {{ message }} </p>
<input v-model="message">
</div>
var app = new Vue({
el: "#root",
data: {
message: '请输入消息'
}
})
当我们修改input元素的值时，p的值也会跟着改变。
结语
以上是Vue中最常见最基础的用法，希望自己先熟练基础之后再一步一步去学习Vue，以上代码也放到Github上了：
learnVue
