v model绑定html,详解v-model：v-model双向绑定与Vue自定义组件设置

前端开发使用框架的目的就是 “双向数据”绑定，不在需要jquery去手工驱动

之前在《 vue2.x入坑总结—回顾对比angularJS/React》，之前总关于vue\angluar\react的数据绑定：react没有双向绑定，数据源状态提升至父组件中，然后通过setState，在进行diff算法更新页面

angularJS，$watch用来检测它监视的 model 里是否有变化的东西(脏检查)，一次做完所有数据变更，然后整体应用到界面上

Vue 的依赖追踪是【原理上不支持双向绑定，v-model 只是通过监听 DOM 事件实现的语法糖】

angular与vue的双向绑定值v-model

回顾angular 指令

Angularjs靠自定义指令实现组件化，在做angular1.x项目时候，我们一般service : 封装$http操作，信息提示，及容错处理。

controller : 调用service暴露的方法从后台获取数据，并赋值给指定变量。

directive : 双向数据绑定controller中的变量以获取驱动表格渲染的数据，将排序，过滤，分页的具体实现封装在指令内部。

之前谈angular自定义指令，scope为directive指定相关联的作用域，数据绑定有@、=、&@绑定字符串，常用于传递从后台获取的用于驱动纯组件的源数据。

=双向绑定， 为自定义指令中传递可配置的常量参数提供设置接口。

&绑定函数，为自定义指令中传递自定义方法提供接口。

这里大致讲一下，就讲了很多，还是回到vue

vue 自定义组件 v-model

v-model 指令用来在 、 、 text、 checkbox、radio 等表单控件元素上创建“双向数据绑定”

指令后还可以添加多个参数 (number、lazy、debounce);lazy 参数是将双向数据同步的时间节点从input 触发改为了 change 触发，在默认情况下，v-model 在 input 事件中同步输入框的值与数据

number 参数将使用户输入值被同步到model 中时强制转换为数值类型，如果原值的转换结果为 NaN,则返回原值

自定义组件时，有两个参数prop，eventprop定义那个属性 被父组件调用 时,v-model能取到的值

emit(触发)change的时候，参数的值就是父组件v-model收到的值。

下面这个例子说明下

这里显示的是子组件input的value1值

export default {

name: 'test',

// 使用model对象,定义它的两个属性,就可以在父组件通过v-model实现父子组件双向数据绑定

model: {

// 定义那个属性 被父组件调用 时,v-model能取到的值

prop: 'value',

// emit(触发)change的时候，参数的值就是父组件v-model收到的值。

event: 'change'

},

props: {

value: String

},

methods: {

handleInput (e) {

this.$emit('change', e.target.value)

}

}

}