继上一小节之后，我们已经会简单的使用Vue.js的表达式绑定，本节内容将一起了解下，指令绑定（内置的指令），让我们一起开始吧。
一、代码解读
前方高能，这边使用的图片路径是
项目文件夹/resource，你可以根据实际情况来修改路径。v-bind和v-if都是Vue.js提供的指令,使用这些内置的指令可以让我们来轻松实现很多效果。代码内容很简单，在div中有个img标签，然后通过v-bind来设置src属性，通过v-if来控制是否需要显示图片内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue Demo</title>
<!--引入vue.js文件-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!--告诉vue.js这个div归你管理，它是你的人了-->
<div id="app">
<img v-bind:src='imgSrc'/>
</div>
</body>
<script>
//编写脚本
var app = new Vue({
el: '#app',
data: {
imgSrc: 'resource/002.jpg ', //图片地址
show: true //默认显示图片
}
})
</script>
</html>
二、审查元素，究竟发生了什么
在浏览器中查看效果，不出意外的话我们可以看到图片内容，然后使用审查元素功能，可以看到如下的代码，
img标签的src属性居然替换成我们在data中设置的值；然后尝试修改show为false，发现了什么？对的，图片隐藏起来了。赶快自己尝试一下吧！
审查元素效果图
三、觉得不过瘾，来点干货
通过
v-for指令可以自动遍历数据，然后将数据以适当的形式展示出来。是不是感觉很方便？哎呦，不错！不过这不是重点，重点是（敲黑板，仔细听），写完类似的代码后，在浏览器的控制台输入如下指令，
app.imgs.push({imgSrc:'resource/005.jpg'})，我的天呐，这么神奇，居然出现了4张图片。是不是很好玩，赶快试一试吧！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue Demo</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<img v-bind:src='image.imgSrc' v-for='image in imgs'/>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
imgs:[
{imgSrc: 'resource/001.png '},
{imgSrc: 'resource/002.jpg '},
{imgSrc: 'resource/003.jpg '}
]
}
})
</script>
</html>
PS：祝小伙伴们，周末愉快！最近因为工作原因，更新的有点慢，抱歉了！不过你们的认可，是我前行的最大动力。愿我们都能有所收获！
