Vue.js表单控件实践

 更新时间:2016年10月27日 12:10:38   作者:xiao小孔  
这篇文章主要为大家详细介绍了Vue.js表单控件实践,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

相关文章

  • Vue自定义CSS变量的使用方法

    Vue自定义CSS变量的使用方法

    随着前端技术的发展,CSS 变量(也称为 CSS 定制属性)成为了现代 Web 开发中不可或缺的一部分,在 Vue.js 应用程序中,使用 CSS 变量不仅可以增强样式的灵活性,还能提高开发效率,本文将详细介绍如何在 Vue 项目中引入并使用 CSS 变量,需要的朋友可以参考下
    2024-09-09
  • 使用Mockjs模拟接口实现增删改查、分页及多条件查询

    使用Mockjs模拟接口实现增删改查、分页及多条件查询

    Mock.js是一个模拟数据生成器,可以让前端独立于后端进行开发,下面这篇文章主要给大家介绍了关于使用Mockjs模拟接口实现增删改查、分页及多条件查询的相关资料,需要的朋友可以参考下
    2022-04-04
  • vue项目中的遇错:Invalid Host header问题

    vue项目中的遇错:Invalid Host header问题

    这篇文章主要介绍了vue项目中的遇错:Invalid Host header问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • vue+swiper实现侧滑菜单效果

    vue+swiper实现侧滑菜单效果

    这篇文章主要为大家详细介绍了vue+swiper实现侧滑菜单效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12
  • 拿来即用的vue旋转木马组件demo

    拿来即用的vue旋转木马组件demo

    这篇文章主要为大家介绍了拿来即用的vue旋转木马组件demo详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • Vue弹窗组件的实现方法

    Vue弹窗组件的实现方法

    这篇文章主要为大家详细介绍了Vue弹窗组件的实现方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-09-09
  • Vue使用el-table实现自适应列宽

    Vue使用el-table实现自适应列宽

    这篇文章主要为大家详细介绍了Vue使用el-table实现自适应列宽,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • vue和better-scroll实现列表左右联动效果详解

    vue和better-scroll实现列表左右联动效果详解

    这篇文章主要介绍了vue和better-scroll实现列表左右联动效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Vue项目配置@别名全过程

    Vue项目配置@别名全过程

    这篇文章主要介绍了Vue项目配置@别名全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue项目中应用ueditor自定义上传按钮功能

    vue项目中应用ueditor自定义上传按钮功能

    这篇文章主要介绍了vue项目中应用ueditor自定义上传按钮功能,文中以vue-cli生成的项目为例给大家介绍了vue项目中使用ueditor的方法,感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-04-04

最新评论