本公众号 的系列文章《跟热饭一起学习vue吧》，本文会采用非常土，非常low的语言，让读者学习并立即上手即可使用vue去写前端页面。简单生动，由浅入深。那么，就一起开始学习第三节课吧，体验一把又土又油腻的教程吧~
别忘了先打开我们的菜鸟编辑器当做草纸吧：右键左下角“阅读原文” 在新窗口中打开链接。即可同时打开在线编辑器
属性绑定
什么叫属性绑定？我们分开来解读
属性：一个元素标签内，可以写很多东西，比如id,name,style,click等等。但是这些并不都叫属性，比如onclick就不算属性。而id,name就是属性。
那么绑定是什么意思呢？就是这些属性的值，是可以在vue构造器中的变量绑定起来，绑定起来有什么用呢？就可以控制了啊，通过更改vue构造器的data里面的变量的值，就可以自动让元素内的属性内容跟着变！
那么这个绑定要怎么写呢？vue的一系列属性，一旦绑定上，那么有一些写法都会和原生的产生变化。
我们本节课学的就是一个class属性绑定变化。众所周知，class是用来决定这个元素采用什么样式的。接下来我们要学的这个例子比较复杂，但是其实说白了，就是告诉你，我可以通过控制，来让这个元素一会用 某个样式，一会不用，来回换。
这里我们先不用关心，vue里面data里的use变量的值是怎么变的，我们只学习它变了之后，我们div标签的class属性是否也跟着一起变即可。
这里我们注意红线部分，可以发现
1.在元素中的 ，你想要绑定的属性名之前加上 v-bind: 即可实现绑定.
2.class的内容是一个字典字符串，其中的不同样式名字就当做key，启用不启用就看值是true还是false，不过这里我们因为想控制，所以把这个值用 变量use来顶替。
3.变量在元素标签外，是用{{ }}来包裹的，但是在元素标签的属性内容里，在最外层一个大引号内，就直接写出来就行。我认为，vue底层这是把这段字符串进行求值的操作："{'class1': use}" 内部的class1因为是key，所以要用区别于外层引号的 单引号来包裹。而use作为变量，则不能被任何包裹，否则写成'use' 那么就会被当做字符串解读，就不会找到vue构造器中data里的那个use变量了。
4.其他的属性，诸如href等，估计也都是前面加v-bind: 来表示绑定起来了。
然后我们试着点了一下这个修改颜色，实现use变量从false变成true。结果发现这个div真的会自动启用上面的全局样式.class1，变成黑底白字：
大家暂时不用管这个use变量的值是如何变化的，这些我们之后会讲。本节课只要记住：【属性前面加v-bind: 属性里面写变量， 变量data里要有， data一变标签属性就变 】
即可。
好了本节课就到这里，怎么样，是不是感觉很简单？？？感觉简单的话，就立马关注下本号吧~ 进群学习请加v：qingwanjianhua
本文使用 文章同步助手 同步
