《Vue零基础入门教程》第十二课：双向绑定指令
往期内容
《Vue零基础入门教程》第六课：基本选项
《Vue零基础入门教程》第八课：模板语法
《Vue零基础入门教程》第九课：插值语法细节
《Vue零基础入门教程》第十课：属性绑定指令
《Vue零基础入门教程》第十一课：事件绑定指令
1) 什么是双向绑定
双向绑定指令 通常应用于 表单元素
- 数据的改变 会 影响视图
- 视图的改变 会 影响数据
2) 原理
表单元素, 如inputselecttextarea是具有交互性的: 用户可以操作
当用户操作时, 会触发特定的事件如: input事件change事件
在事件处理的回调中, 可以对数据进行修改
双向绑定原理
- 通过绑定
input框的value属性和data中的一个变量, 实现了数据->视图的绑定 - 监听
input框的input事件, 当事件触发时, 更新data中的变量, 实现了视图->数据的绑定
3) 简写指令
v-model: 双向绑定指令
将表单元素的 值 和 data中定义的状态绑定
💡 注意
不同的表单元素, 绑定的属性和监听的事件不同
作业
使用v-model实现一个form表单
