Vue.js表单控件实践

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

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

 
 
 
 
  h2{
   text-decoration:underline;
  }
  .red{
   color: red;
  }
  .green{
   color: green;
  }
 


 

  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前端组件学习教程》，欢迎大家学习阅读。

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