Vue.js表单控件实践

2019-11-20 08:38:50

字体：大中小

来源：转载

供稿：网友

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

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>PlayAround2 Have Fun</title> <script src="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> <div id="app">  <h2>checkBox</h2>  <input type="checkbox" v-model="checked">  <label>{{checked}}</label>  <h2>multi checkbox</h2>  <input type="checkbox" id="Kobe" value="Kobe" v-model="names">  <label for="Kobe">Kobe</label>  <input type="checkbox" id="Curry" value="Curry" v-model="names">  <label for="Curry">Curry</label>  <input type="checkbox" id="Aaron" value="Aaron" v-model="names">  <label for="Aaron">Aaron</label>  <br>  <span>Checked names: {{names | json}}</span>  <h2>Radio</h2>  <input type="radio" id="one" value="one" v-model="picked">  <label for="one">one</label>  <br>  <input type="radio" id="two" value="two" v-model="picked">  <label for="two">two</label>  <br>  <span>Picked: {{picked}}</span>  <h2>Select</h2>  <select v-model="selected">   <option selected>Kobe</option>   <option>Curry</option>   <option>Aaron</option>  </select>  <span>Selected: {{selected}}</span>  <h2>Multi Select</h2>  <select multiple v-model="multiSelected">   <option>Kobe</option>   <option>Curry</option>   <option>Aaron</option>  </select>  <span>Selected: {{multiSelected}}</span>  <h2>Select with for</h2>  <select v-model="selectedPlayer">   <option v-for="option in options" :value="option.value">{{option.text}}</option>  </select>  <span>Selected: {{selectedPlayer}}</span>  <h2>Lazy-改变更新的事件从input->change</h2>  <input v-model="msg" lazy>  <span>Msg:{{msg}}</span>  <h2>Number(没啥吊用。。。.2->0.2,仅此而已吗?)</h2>  <input v-model="age" number>  <span>age:{{age}}</span>  <h2>debounce-延迟更新view</h2>  <p>Edit me<input v-model="delayMsg" debounce="500"></p>  <span>delayMsg:{{delayMsg}}</span> </div> <script>  var vm = new Vue({   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前端组件学习教程》，欢迎大家学习阅读。

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

上一篇：node.js文件上传处理示例

下一篇：vue实现可增删查改的成绩单