Vue.js表单控件实践
最近项目中使用了vue替代繁琐的jquery处理dom的数据更新,个人非常喜欢,所以就上官网小小地实践了一把。
以下为表单控件的实践,代码敬上,直接新建html文件,粘贴复制即可看到效果
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>PlayAround2HaveFun</title> <scriptsrc="https://cdn.jsdelivr.net/vue/1.0.26/vue.min.js"></script> <style> h2{ text-decoration:underline; } .red{ color:red; } .green{ color:green; } </style> </head> <body> <divid="app"> <h2>checkBox</h2> <inputtype="checkbox"v-model="checked"> <label>{{checked}}</label> <h2>multicheckbox</h2> <inputtype="checkbox"id="Kobe"value="Kobe"v-model="names"> <labelfor="Kobe">Kobe</label> <inputtype="checkbox"id="Curry"value="Curry"v-model="names"> <labelfor="Curry">Curry</label> <inputtype="checkbox"id="Aaron"value="Aaron"v-model="names"> <labelfor="Aaron">Aaron</label> <br> <span>Checkednames:{{names|json}}</span> <h2>Radio</h2> <inputtype="radio"id="one"value="one"v-model="picked"> <labelfor="one">one</label> <br> <inputtype="radio"id="two"value="two"v-model="picked"> <labelfor="two">two</label> <br> <span>Picked:{{picked}}</span> <h2>Select</h2> <selectv-model="selected"> <optionselected>Kobe</option> <option>Curry</option> <option>Aaron</option> </select> <span>Selected:{{selected}}</span> <h2>MultiSelect</h2> <selectmultiplev-model="multiSelected"> <option>Kobe</option> <option>Curry</option> <option>Aaron</option> </select> <span>Selected:{{multiSelected}}</span> <h2>Selectwithfor</h2> <selectv-model="selectedPlayer"> <optionv-for="optioninoptions":value="option.value">{{option.text}}</option> </select> <span>Selected:{{selectedPlayer}}</span> <h2>Lazy-改变更新的事件从input->change</h2> <inputv-model="msg"lazy> <span>Msg:{{msg}}</span> <h2>Number(没啥吊用。。。.2->0.2,仅此而已吗?)</h2> <inputv-model="age"number> <span>age:{{age}}</span> <h2>debounce-延迟更新view</h2> <p>Editme<inputv-model="delayMsg"debounce="500"></p> <span>delayMsg:{{delayMsg}}</span> </div> <script> varvm=newVue({ el:"#app", data:{ checked:false, names:[], picked:"", selected:"", multiSelected:"", options:[ {text:"Kobe",value:"Bryant"}, {text:"Stephen",value:"Curry"}, {text:"Aaron",value:"Kong"} ], selectedPlayer:"", msg:"", age:"", delayMsg:"" }, methods:{ } }) </script> </body> </html>
使用vue的几个优点:
1、只需关注model层的数据处理,无需处理复杂的view层更新,vue会在model改变时自动对view层进行更新;
2、vue提供一系列的小工具帮助开发者处理数据绑定中得问题,比如computed可以提供计算的扩展,还有过滤器、排序等支持;
3、代码简洁,分层清晰。html里进行数据绑定,js里只需处理数据以及后台交互;
4、提供自定义组件功能,进一步规范前端架构。目前暂时没有使用,后续研究研究。
以上就是目前使用vue的心得,暂时没有发现啥缺点,可能还不太深入,总体来说体验非常不错!
本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。