10-16 钟申义 日志

10-16 钟申义 日志

vue的双向绑定(重点)
问题:如果传统的的绑定方式,比如“:”,用户在界面上即使输入了新的内容,程序中的变量也会保持不变,无法获得用户输入的值
原因:12条指令和咱们的大胡子语法都是单向的绑定,能将程序中的变化更新到页面上(model->view),但是,页面上发生了变化,是无法更新到程序中的变量中的,即不能从view->model
v-model:双向绑定,即可以将model的数据绑定到表单元素的value属性,用于显示(model->view),同时,又可以将表单元素的value元素进行实时的更给,绑定会model数据变量上进行保存(view->model)。{{}}和v-bind,都是单向的绑定,当我们希望修改表单元素的值后,只能自动修改对应的模型数据的值时,我们就可以使用v-model进行绑定
<表单元素 v-model="模型变量"></表单元素>
提示:因为只有表单元素才可以人为的改变,所有,双向绑定几乎总是用在表单元素上的
自定义监视函数
提示:当我们的模型数据发生改变的时候,自动执行的函数,只有在希望数据模型变化的时候,立即执行一项操作的时候,才需要监视函数监视模型的变量
watch:{
模型变量名(){
this.模型变量名
}
}
双向绑定原理
第一种说法:vue双向绑定的原理主要是通过数据劫持object.defineProperty和发布订阅者模式实现的,通过object.defineProperty监听数据发行变化然后通知订阅者(watcher),订阅者触发响应的回调(面试题标准答案)
第二种说法:v-model其实就是自动给元素绑定了oninput或onchange事件
oninput事件是用户只要在文本框中输入新内容,就会立刻触发
onchange事件是用户切换选择select元素或单选按钮或复选框时自动触发
所有的 v-model:属性="" 中的 :属性 可以省略的
v-model自己就会根据当前所在表单元素的不同选择对应属性绑定
修饰符
lazy:在默认情况下,v-model在每次input事件触发后将输入框的值和数据的值进行同步,我们可以添加lazy修饰符,从而转变为使用change事件同步,只有当用户确认输入完成时,才会触发数据的同步
number:如果想自动将用户的数值转为数值型,可以给v-model添加number修饰符,当用户输入的不是number类型的数据的时候,则无法更新数据。html的标签中 type="number",即使设置了也可以返回字符串。主要就是因为得到的值无法被parseFloat() 解析(number开头)
trim:自动过滤用户输入的首尾空白字符

心得:

今天vue重新开课,感觉还可以!

标签

评论