Vue.js表单控件实践


Posted in Javascript onOctober 27, 2016

最近项目中使用了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前端组件学习教程》,欢迎大家学习阅读。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery自动完成插件(autocomplete)应用之PHP版
Dec 15 Javascript
jQuery对象和DOM对象的相互转化实现代码
Mar 02 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
Apr 19 Javascript
图片上传插件jquery.uploadify详解
Nov 15 Javascript
javascript生成json数据简单示例分享
Feb 14 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
js仿3366小游戏选字游戏
Apr 14 Javascript
js判断是否是手机页面
Mar 17 Javascript
Echarts地图添加引导线效果(labelLine)
Sep 30 Javascript
小程序登录之支付宝授权的实现示例
Dec 13 Javascript
node.js Promise对象的使用方法实例分析
Dec 26 Javascript
vue实现在data里引入相对路径
Jun 05 Vue.js
vue实现可增删查改的成绩单
Oct 27 #Javascript
vuex实现简易计数器
Oct 27 #Javascript
微信小程序  生命周期详解
Oct 27 #Javascript
require.js+vue开发微信上传图片组件
Oct 27 #Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
Oct 27 #Javascript
vue开发心得和技巧分享
Oct 27 #Javascript
js获取指定字符前/后的字符串简单实例
Oct 27 #Javascript
You might like
PHP cron中的批处理
2008/09/16 PHP
php入门学习知识点一 PHP与MYSql连接与查询
2011/07/14 PHP
PHP number_format() 函数定义和用法
2012/06/01 PHP
PHP最常用的正则表达式
2017/02/13 PHP
php实现数组重复数字统计实例
2018/09/30 PHP
js取滚动条的尺寸的函数代码
2011/11/30 Javascript
JS获取页面input控件中所有text控件并追加样式属性
2013/02/25 Javascript
js传中文参数controller里获取参数乱码问题解决方法
2014/01/03 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
2015/07/28 Javascript
JavaScript DOM节点操作方法总结
2016/08/23 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
javascript实现二叉树的代码
2017/06/08 Javascript
Vue 2.0的数据依赖实现原理代码简析
2017/07/10 Javascript
解决vue组件props传值对象获取不到的问题
2019/06/06 Javascript
Python获取服务器信息的最简单实现方法
2015/03/05 Python
分享Python字符串关键点
2015/12/13 Python
Python爬虫实例扒取2345天气预报
2018/03/04 Python
如何利用Python分析出微信朋友男女统计图
2019/01/25 Python
详解Python 爬取13个旅游城市,告诉你五一大家最爱去哪玩?
2019/05/07 Python
Python的bit_length函数来二进制的位数方法
2019/08/27 Python
python获取Linux发行版名称
2019/08/30 Python
python sitk.show()与imageJ结合使用常见的问题
2020/04/20 Python
详解anaconda离线安装pytorchGPU版
2020/09/08 Python
英国现代家具和装饰网站:PN Home
2018/08/16 全球购物
戛纳奢侈品商店:Jacques Loup法国
2019/11/04 全球购物
土耳其新趋势女装购物网站:Addax
2020/01/07 全球购物
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
大学辅导员事迹材料
2014/02/05 职场文书
招商专员岗位职责
2014/02/08 职场文书
统计专业自荐书
2014/07/06 职场文书
自愿离婚协议书范本
2014/09/13 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
葬礼主持词
2015/07/02 职场文书
2015年中学图书馆工作总结
2015/07/22 职场文书
2016年教师师德师风心得体会
2016/01/12 职场文书