VUE表单v-model处理 | 天一阁

VUE表单v-model处理

Handling User Input with Forms笔记

表单是动态页面的重要工具,没有表单,web就不会这么丰富,就没有了任何可交互性。

原始形式的表单

表单这种东西从很早就接触只不过现在给忘记了,知识需要缝一下,补一下。<form>标签下放上几个<input>,当点击<submit>标签的时候,就会把整个form下的输入数据传送到后台去处理。数据发送的地址是form的属性action所指定的url。这里用到的是POST方法。

这些机制都是HTTP协议和浏览器共同完成了,作为web developper只是把业务逻辑写好。其中radio、checkbox需要name属性一致,这样才能表示对应的数据。无论是PHP活着Flask都是判断当前是POST方法表示客户端提交了数据,然后解析request里面的form,进行数据处理,然后在根据业务逻辑,生成对应的页面。

Vue的表单处理

原生的form是需要页面跳转的,或者说是整个页面刷新。有了Vue这样的前端框架,可以不再按原来的方式处理,直接就是前后端分离,然后submit按钮点击之后,采用ajax方式和后台交互数据,业务逻辑很多放到了前端。

对vue对表单的来说,最需要的就是收集数据,基本上都是通过v-model这个指令和vue的data中的变量进行绑定,然后submit之后提交数据。其中checkbox是个数组,radio是一个包含value的字符串

v-model 背后机制

v-model也是所谓语法糖,他实际是v-bind和v-on的组合。v-on监听的是input事件,这样实现了双向绑定。利用这个机制,就可以做一些自定义表单组件。只需要表单组件里面通过props能够接收value属性,并能$emit一个input事件,这个相当于父组件和子组件之间的协议,通过这个协议,和v-model指令,就可以做一个看上去像控件的自定义控件。

发点牢骚

终于知道为什么我现在好难,目前还只是卡在开发层面上。一个startup,需要考虑太多事情。

  1. idea阶段 先从宏观考虑用户需要,市场供应,分销渠道,价格策略
  2. 开发阶段 要考虑用户交互流程,UI风格,用户体验,然后前后台功能分离,前后台协议。需要一个个页面的切分,一个个元素去写。如果做大了,后台考虑安全性,可靠性,性能等等问题。
  3. 运营阶段 怎么拉到新用户,去哪里推广,怎么提高用户粘性,让用户留存。如何从用户反馈中获取新的需求,新的方向。

对于现在的我来说,去开发一个漂亮的完整的软件的能力都不足。真的仅有一腔热血啊。没关系慢慢学,失败不可怕。每天进步一点点,持续进步。