最近项目中使用了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学习笔记——表单控件实践的更多相关文章

  1. Vue.js学习 Item9 – 表单控件绑定

    基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些 ...

  2. vue.js 2的表单控件

    静下心,抄一段sample,以后可以快点到这里来抄...: <!DOCTYPE html> <html> <head> <meta charset=" ...

  3. Vue 监视数据总结 && 表单控件使用总结

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  4. MiniUI学习笔记1-表单控件

    1.输入框样式 class="mini-textbox" //普通输入框 class="mini-password" //密码输入框 class="m ...

  5. Vue.js学习笔记 第七篇 表单控件绑定

    本篇主要说明表单控件的数据绑定,这次没有新的知识点 文本框 1.普通文本框 <div id="app-1"> <p><input v-model=&q ...

  6. vue.js基础知识篇(3):计算属性、表单控件绑定

    第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...

  7. Vue.js 学习笔记 第6章 表单与v-model

    本篇目录: 6.1 基本用法 6.2 绑定值 6.3 修饰符 表单类控件承载了一个网页数据的录入与交互,本章将介绍如何使用指令v-model完成表单的数据双向绑定. 6.1 基本用法 表单控件在实际业 ...

  8. Vue表单控件绑定

    前面的话 本文将详细介绍Vue表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负 ...

  9. vue表单控件绑定（表单数据的自动收集）

    v-model指令 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇 但 v-model 本质上不过是语法糖,它负责监听用户的 ...

随机推荐

  1. Linux 安装Ruby详解(在线和离线安装)

    很多时候我们会发现,真实的生成环境很多都没有外网,只有内网环境,这个时候我们又需要安装Ruby,则不能提供yum命令进行在线安装了,这个时候我们就需要下载安装包进行离线安装.本文主要简单介绍如果离线安 ...

  2. MyBatis学习之多表查询

    一对多需求:即一张表class中又含有多张表(teacher,student)内容.现根据class_id 来获取对应的班级信息(包括学生和老师信息) 方式一:嵌套结果 使用嵌套结果映射来处理重复的联 ...

  3. CentOS 安装apache

    yum 安装apache yum –y install httpd 设置开机启动 chkconfig --levels 235 httpd on 启动 /etc/init.d/httpd start ...

  4. sublime--将vue代码进行高亮显示

    vue的.vue文件sublime是不认识,但是为了让 .vue 文件看上去更加简洁:所以要用到一款不错的插件: 下载:vue-syntax-highlight https://gitee.com/m ...

  5. Linux 常用命令标记

    1.linux 服务器之间拷贝文件 scp 本地用户名@IP地址:文件名1 远程用户名@IP地址:文件名2 该命令可以变型为目的服务器204上输入如下命令:红色部分是需要接受目的地,-r是递归复制该文 ...

  6. hdu1166 敌兵布阵【线段树】

    C国的死对头A国这段时间正在进行军事演习,所以C国间谍头子Derek和他手下Tidy又开始忙乎了.A国在海岸线沿直线布置了N个工兵营地,Derek和Tidy的任务就是要监视这些工兵营地的活动情况.由于 ...

  7. 三维重建项目：Photo Tourism: Exploring Photo Collections in 3D

    项目地址:http://phototour.cs.washington.edu/ Photo Tourism是华盛顿大学的SFM重建的过程 Paper:Photo Tourism: Exploring ...

  8. 【紫书】 The Falling Leaves UVA - 699 递归得简单

    题意:给你一颗二叉树的前序遍历,空子树以-1表示,将左右子树的权值投影到一维数轴上,左儿子位置为根位置-1,右儿子+1求个个整点上的和: 题解:递归,整个过程只需维护一个sum数组. 更新根,更新le ...

  9. php安装redis扩展'checking for igbinary includes... configure: error: Cannot find igbinary.h'解决方法

    今天准备给yii2安装redis扩展,先安装了redis服务,然后安装redis php官方扩展,在make的时候提示' checking for igbinary includes... confi ...

  10. jquery报错：“ReferenceError: jQuery is not defined”

    这明显是没有引到jquery,原因就是jquery没有放在最前面,jquery应该最先引入.