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 相关文章推荐
Prototype使用指南之selector.js
Jan 10 Javascript
JS去掉第一个字符和最后一个字符的实现代码
Feb 20 Javascript
javascript排序函数实现数字排序
Jun 26 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
Mar 02 Javascript
jquery实现文本框textarea自适应高度
Mar 09 Javascript
浅谈JavaScript中小数和大整数的精度丢失
May 31 Javascript
jquery判断input值不为空的方法
Jun 05 Javascript
微信小程序 图片绝对定位(背景图片)
Apr 05 Javascript
爬虫利器Puppeteer实战
Jan 09 Javascript
JavaScript中concat复制数组方法浅析
Jan 20 Javascript
vue实现购物车列表
Jun 30 Javascript
JavaScript实现一键复制内容剪贴板
Jul 23 Javascript
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将会员数据导入到ucenter的代码
2010/07/18 PHP
wordpress之js库集合研究介绍
2007/08/17 Javascript
javascript 多种搜索引擎集成的页面实现代码
2010/01/02 Javascript
JavaScript 选中文字并响应获取的实现代码
2011/08/28 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
2011/10/16 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
2013/01/15 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
js 自定义个性下拉选择框示例
2013/08/20 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
2014/09/21 Javascript
jQuery中get()方法用法实例
2014/12/27 Javascript
Js数组排序函数sort()介绍
2015/06/08 Javascript
浅谈js中字符和数组一些基本算法题
2016/08/15 Javascript
JS实现直接运行html代码的方法
2017/03/13 Javascript
js获取指定时间的前几秒
2017/04/05 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
2018/01/23 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
2018/04/17 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
2018/08/02 Javascript
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
vue+element tabs选项卡分页效果
2020/06/29 Javascript
[46:16]2018DOTA2亚洲邀请赛3月30日 小组赛B组 iG VS VP
2018/03/31 DOTA
python获得文件创建时间和修改时间的方法
2015/06/30 Python
python xml解析实例详解
2016/11/14 Python
django中send_mail功能实现详解
2018/02/06 Python
Python 在字符串中加入变量的实例讲解
2018/05/02 Python
Python *args和**kwargs用法实例解析
2020/03/02 Python
Python3 用什么IDE开发工具比较好
2020/11/28 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
JD Sports荷兰:英国领先的运动时尚零售商
2020/03/13 全球购物
环境科学毕业生自荐信
2013/11/21 职场文书
微博营销计划书
2014/01/10 职场文书
干部培训自我鉴定
2014/01/22 职场文书
计算机相关专业自荐信
2014/07/02 职场文书
文明倡议书
2015/01/19 职场文书
初中信息技术教学计划
2015/01/22 职场文书
古诗之感恩老师
2019/10/24 职场文书