笔记:Vue.js 的 v-model 和简单的自定义 input 封装


 拍摄于 2016-11-19,张学友上海演唱会。
拍摄于 2016-11-19,张学友上海演唱会。

关于 V-Model

关于表单组件的使用 Vue.js 的官方教程中给出了很简单的例子:

官方的例子其实等同于以下,使用的 v-model 在这里某种意义上更像是语法糖:

这里做了什么

  1. input[type="text"] 通过 :value="message" 和 vm 进行双向绑定;
  2. input[type="text"] 同时通过 @input="$event.target.value" 将自己每次输入的内容传递给上一步的 message;
  3. 从而将当前 Vue 实例的 { data: {} } 中的 message 值更新成 input 输入的内容。

示例(CodePen)

CodePen 链接

简单的自定义 input 封装

实际开发,即便是最简单的表单中,也不会需要一个 <input v-model="message"/>;更多的可能是需要一个 <username v-model="name"/>,因为其中需要包含一些基本的事件和合法性验证的方法,所以需要进行封装,方便复用。

示例(CodePen)

例子中实例化使用了 let vm = new Vue({}),可以在 Vue DevTool 中查看,<Root>name 的变化和 inputvalue 的变化是同步的。通过 console 直接操作,如:vm.name = 'new name'; 也会反应在 <Root>input 上。

CodePen 链接

感谢阅读

你们好, 2018 年初把小站从 Jekyll 迁移到 Hugo 的过程中,删除了评论区放的 Disqus 插件,考虑有二:首先无论评论、还是对笔记内容的进一步讨论,读者们更喜欢通过邮件、或者 Twitter 私信的方式来沟通;其次一年多以来 Disqus 后台能看到几乎都是垃圾留言(spam),所以这里直接贴一下邮件、以及 Twitter 账户 地址。

技术发展迭代很快,所以这些笔记内容也有类似新闻的时效性,不免有过时、或者错误的地方,欢迎指正 ^_^。

BEST
Lien(A.K.A 胡椒)
本站总访问量 本站总访客量 本文总阅读量