Vue.js表单控件实践

最近项目中使用了vue替代繁琐的jquery处理dom的数据更新，个人非常喜欢，所以就上官网小小地实践了一把。

以下为表单控件的实践，代码敬上，直接新建html文件，粘贴复制即可看到效果

 
 
 
 


 


  
checkBox
  
  {{checked}}

  
multi checkbox
  
  Kobe
  
  Curry
  
  Aaron
  

  Checked names: {{names | json}}

  
Radio
  
  one
  

  
  two
  

  Picked: {{picked}}

  
Select
  
   Kobe
   Curry
   Aaron
  
  Selected: {{selected}}

  
Multi Select
  
   Kobe
   Curry
   Aaron
  
  Selected: {{multiSelected}}


  
Select with for
  
   {{option.text}}
  
  Selected: {{selectedPlayer}}

  
Lazy-改变更新的事件从input->change
  
  Msg:{{msg}}

  
Number(没啥吊用。。。.2->0.2,仅此而已吗?)
  
  age:{{age}}

  
debounce-延迟更新view
  
Edit me
  delayMsg:{{delayMsg}}

 

 

使用vue的几个优点：

1、只需关注model层的数据处理，无需处理复杂的view层更新，vue会在model改变时自动对view层进行更新；

2、vue提供一系列的小工具帮助开发者处理数据绑定中得问题，比如computed可以提供计算的扩展，还有过滤器、排序等支持；

3、代码简洁，分层清晰。html里进行数据绑定，js里只需处理数据以及后台交互；

4、提供自定义组件功能，进一步规范前端架构。目前暂时没有使用，后续研究研究。

以上就是目前使用vue的心得，暂时没有发现啥缺点，可能还不太深入，总体来说体验非常不错！

本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。