11.2-11.6
# 11.2-11.6汇总
# 1. v-bind、v-model
两者皆是用来绑定数据，vue中绑定数据有三种方式，
(1)插值，形如{{name}}
(2)v-bind
当加上v-bind:之后，就不一样了。它的值classed不是字符串，而是vue实例对应的data.classed的这个变量。也就是说data.classed是什么值，它就会给class属性传递什么值，当data.classed发生变化的时候，class属性也发生变化，这非常适合用在通过css来实现动画效果的场合。除了class，其他大部分html原始的属性都可以通过这种方式来绑定，而且为了方便，它可以直接缩写成冒号形式,例如：
`<img :src="src">`
(3)v-model
v-model主要是用在表单元素中，它实现了双向绑定。
v-model其实是v-bind和v-on的语法糖
1）v-bind是数据绑定，没有双向绑定效果，但不一定在表单元素上使用，任何有效元素上都可以使用；
2）v-model是双向绑定，基本上只用在表单元素上；
3）当v-bind和v-model同时用在一个元素上时，它们各自的作用没变，但v-model优先级更高，而且需区分这个元素是单个的还是一组出现的。
4）当两个一起使用的时候v-model优先级更高
# 2.scrollHeight, clientHeight, offsetHeight, scrollTop
## scrollHeight
所有的内容（指图一图中有文字的红色框框内）和内边距，这个内容包括肉眼看不见、溢出、被窗口遮挡的部分
## clientHeight
视野内可见的内容和内边距，不包括x轴的滚动条高度、边框、外边距
同一种型号的手机上是不变的
## offsetHeight
在clientHeight的基础上， 加上边框和滚动条的高度
## scrollTop
滚动条滚动了多少距离（包括之前已滚动过的隐藏内容）
