区别：1、“v-bind”是单向绑定，而“v-model”是双向绑定；2、“v-bind”只能将vue中的数据同步到页面，而“v-model”不只能将vue中的数据同步到页面，还可以将用户数据的数据赋值给vue中的属性。
本教程操作环境：windows7系统、vue2.9.6版，DELL G3电脑。
v-model与v-bind区别：
1、v-bind是单向绑定，用来绑定数据和属性以及表达式，只能将vue中的数据同步到页面。
2、v-model是双向绑定，不只能将vue中的数据同步到页面，而且可以将用户数据的数据赋值给vue中的属性。
3、v-bind可以给任何属性赋值，v-model只能给具备value属性的元素进行数据双向绑定。
一、v-model
v-model多在表单中使用，在表单元素上创建双向绑定，根据控件类型选择正确的方法更新元素，可以绑定text、radio、checkbox、selected
1. 绑定text
<input><p> {{val}} </p>
2. 绑定radio
<input><input><label></label>
radioval的值随着选择单选框的值，会变成one 或者 two
3. 绑定checkBox
（1）单个勾选框，最终的值为逻辑值true和false
<input><label>{{checkVal}}</label>
（2）多个勾选框时，将值绑定到一个数组
<input><label>{{apple}}</label>
<input><label>{{banana}}</label>
<input><label>{{pear}}</label>
<span>{{checkArray | json}}</span>
checkArray中的值会根据是否选中进行关联变化
4. 绑定select
（1）绑定到单个select
（2）绑定多个select时，同样适用数组
5. 增加参数
（1）lazy
将输入框的input事件改为change事件，使得输入框在change事件中更新而不是input
关于change事件和input事件的区别，简单说来是：
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
change事件必须是在输入框失去焦点之后才会触发，而input事件可以实时监测。
（2）number
将文本框输入的值都变为数字，如果是变为数字之后是NAN，则返回原始值
（3）trim
取出输入的字符串的首尾空格
二、v-bind
1.绑定文本
直接用v-bind或者{{}}
<p></p>
<p>{{message}}</p>
2.绑定属性
<p></p> <p></p> <p></p>
3.绑定表达式
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
4.绑定html
<div>{{{ raw_html }}}</div>
这个时候必须要使用三个{}
更多编程相关知识，请访问：编程视频！！
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
