这里有新鲜出炉的 vue.js 教程,程序狗速度看过来!
Vue.js 是构建 web 界面的 JavaScript 库,提供数据驱动的组件,还有简单灵活的 API,使得 MVVM 更简单。
vue 的 v-model 是一个十分强大的指令, 它可以自动让原生表单组件的值自动和你选择的值绑定, 具有一定的参考价值,感兴趣的小伙伴们可以参考一下
vue 的 v-model 是一个十分强大的指令, 它可以自动让原生表单组件的值自动和你选择的值绑定,
我们来看一下它的效果:
输入框的值和一个数据是绑定的, 输入框的值变化, 和他绑定的值也会发生变化
我们可以参照官方文档的例子 http://cn.vuejs.org/v2/guide/forms.html# 文本
我们在手动输入 hello 的过程中 下面和他绑定的 p 标签的值也是实时变化的
如此神奇的效果是如何实现的呢? 还是参照官方文档
http://cn.vuejs.org/v2/guide/components.html# 使用自定义事件的表单输入组件
官方也说明了, v-model 只不过是一个语法糖而已, 真正的实现靠的还是
现在我们也想设计自己的表单组件, 也想通过 v-model 暴露组件的值, 怎么做呢?
例如我们要设计一个 自定义货币输入的组件, 通过 v-model 暴露组件的值, 我们可能使用如下的组件代码
- <currency-input v-model="price"></currency-input>
然后再使用 这个我们自己定义的组件时, 组件内部会暴露出 组件的值到 v-model 所绑定的值中去; 那它是如何实现的呢?\
要搞明白 v-model 的实现, 需要通过查看官方的自定义 v-model 组件示例的部分代码来进行说明
我们看上图中的代码, 有行 $emit 的代码, 这行代码实际上会触发一个 input 事件, 'input'后的参数就是传递给 v-model 绑定的属性的值, 也就是说 v-model 实现自定义的数据绑定的原理是这样的:
首先, 大体的组件结构:
- <custom-comp v-model="myattr">
- <input /> ??
- <select> ??
- </custom-comp>
也就是自定义的组件内部一般包含原生的表单组件 (当然非表单的组件也可以)
然后, 给原生控件绑定事件, 捕捉到原生组件的值, 利用 $emit 方法, 触发 input 方法, 组件监听到 input 事件然后把值传入到 myattr 中.
这里有个疑问, 为什么是'input'呢??? 三个字, 看文档!
这个就是 vue 对 v-model 实现的一个规则: 使用了 v-model 的组件会
自动监听 input 事件, 并把这个 input 事件所携带的值 传递给 v-model 所绑定的属性! 这样组件内部的值就给到了父组件了
通过以上讲解, 我们总结一下如何利用 v-model 实现自定义的表单组件:
监听原生组件的事件, 当获取到原生组件的值后把 值通过调用 $emit('input' ,data) 方法去触发 input 事件
来源: http://www.phperz.com/article/17/0712/336277.html