表单输入绑定、组件基础

目标：

  1. 熟练掌握vue中表单的处理方式
  2. 对之前学习的内容简单回顾一下，并写一个实例，学以致用（最好脱离文档）

vue中表单的处理方式

  1. vue中表单的处理使用了v-model指令, 这个指令可以直接把一个数据绑定到表单元素中的value,checked,selected特性,同时这些特性也会被忽略掉初始值,而总是将vue实例的数据作为数据来源.
  2. 使用了v-model之后<textarea></textarea>之间的插值就不会有效了,会被v-model代替.

双向绑定(v-model)

1.绑定value: text,textarea(字符串)

text:

<input v-model="message" placeholder="edit me">

textarea:

<textarea v-model="message" placeholder="add multiple lines"></textarea>

2.绑定checked: checkout(单个绑定布尔值,多个绑定字符串数组), radio(字符串)

checkout(单个):

<input type="checkbox" id="checkbox" v-model="checked">

checkout(多个):

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">

<label for="jack">Jack</label>

<input type="checkbox" id="john" value="John" v-model="checkedNames">

<label for="john">John</label>

<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">

<label for="mike">Mike</label>

radio:

<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>

3.绑定selected: select(字符串)

<select v-model="selected">

    <option disabled value="">请选择</option>

    <option>A</option>

    <option>B</option>

    <option>C</option>

</select>

修饰符(用在v-model指令上)

.lazy: 触发的事件不一样,使用change触发,而不是input触发

.number: 自动转为数字类型

.trim:自动过滤后卫空白符号

例子

form.html

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>表单输入绑定</title>

    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>

</head>

<body>

    <div id="app">

        <form>

            <!-- 文本 -->

            <input type="text" v-model="formData.textValue">{{formData.textValue}}<br>

            <textarea v-model="formData.textareaValue"></textarea>{{formData.textareaValue}}<br>

            <!-- checkout(单个) -->

            <input type="checkbox" id="checkbox" v-model="formData.isChecked"><label for="checkbox">点我啊</label><br>

            <!-- 多个多选 -->

            <input type="checkbox" id="haha" value="haha" v-model="formData.checkedValues">

            <label for="haha">哈哈</label>

            <input type="checkbox" id="hoho" value="hoho" v-model="formData.checkedValues">

            <label for="hoho">呵呵</label>

            <input type="checkbox" id="hihi" value="hihi" v-model="formData.checkedValues">

            <label for="hihi">嘻嘻</label>

            <br>

            多选选中的是<span v-for="value of formData.checkedValues"> {{value}} </span>

            <br>

            <!-- 单选 -->

            <input type="radio" id="one" value="one" v-model="formData.pickedValue">

            <label for="one">one</label>

            <input type="radio" id="two" value="two" v-model="formData.pickedValue">

            <label for="two">two</label>

            <input type="radio" id="three" value="three" v-model="formData.pickedValue">

            <label for="three">three</label>

            <br>

            单选选中的是<span> {{formData.pickedValue}} </span>

            <br>

            <!-- 下拉选择框 -->

            <select v-model="formData.selectedValue">

                <option disabled value="">请选择</option>

                <option>A</option>

                <option>B</option>

                <option>C</option>

            </select>

            <br>

            下拉选择框选中的是<span> {{formData.selectedValue}} </span>

            <br>

            <a @click="submitForm">提交</a>

        </form>

    </div>

</div>

<script>

    var vm = new Vue({

        el: '#app',

        data: {

            formData: {

                textValue: '',

                textareaValue: '',

                isChecked: true,

                checkedValues: [],

                pickedValue:'',

                selectedValue: ''

            },

            msg: '这是一句消息'

        },

        methods: {

            submitForm: function(){

                for(var key in this.formData) {

                    obj[key] = this.formData[key];

                }

                console.log(this.formData);

                console.log(this.msg);

            }

        }

    });

</script>

</body>

</html>

Vue学习计划基础笔记(五) - 表单输入绑定、组件基础的更多相关文章

  1. Vue.js教程--基础2(事件处理 表单输入绑定

    事件处理 表单输入绑定 事件处理 监听v-on 监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 可以在v-on:click=''加内联语句. 有时也需要在内联语句处理器中访问原始 ...

  2. vue学习笔记(六)表单输入绑定

    前言 在上一章vue学习笔记(四)事件处理器这一篇博客的内容中,我们已经了解vue是如何绑定事件的,而本篇博客主要讲解的是vue中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...

  3. Vue 学习笔记之 —— 表单输入绑定

    Vue 中文文档 https://cn.vuejs.org/ 不多说,直接上干货. v-model 指定,用来在input textarea 等表单元素上创建双向数据绑定,负责监听用户的输入事件,以及 ...

  4. Vue.js学习笔记--3.表单输入绑定

    整理自官网教程 -- https://cn.vuejs.org/ 利用v-model可以实现表单元素的value与后台数据的双向绑定,具体用法如下: <!--文本--> <input ...

  5. Blazor和Vue对比学习（基础1.9）：表单输入绑定和验证，VeeValidate和EditFrom

    这是基础部分的最后一章,内容比较简单,算是为基础部分来个HappyEnding.我们分三个部分来学习: 表单输入绑定 Vue的表单验证:VeeValidate Blazor的表单验证:EditForm ...

  6. 前端MVC Vue2学习总结（五）——表单输入绑定、组件

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

  7. Vue的指令系统、计算属性和表单输入绑定

    指令系统 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论).指令的职责是,当表达式的值改变 ...

  8. Vue表单输入绑定（文本框和复选框）

    文本框 <!DOCTYPE html><html>    <head>        <meta charset="utf-8">  ...

  9. VUE：事件处理和表单输入绑定

    事件处理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

随机推荐

  1. PHP文档

    http://php.net/manual/zh/function.socket-close.php

  2. Linux内存管理学习笔记——内存寻址

    最近开始想稍微深入一点地学习Linux内核,主要参考内容是<深入理解Linux内核>和<深入理解Linux内核架构>以及源码,经验有限,只能分析出有限的内容,看完这遍以后再更深 ...

  3. PAT——1073. 多选题常见计分法(20)

    批改多选题是比较麻烦的事情,有很多不同的计分方法.有一种最常见的计分方法是:如果考生选择了部分正确选项,并且没有选择任何错误选项,则得到50%分数:如果考生选择了任何一个错误的选项,则不能得分.本题就 ...

  4. Jfinal框架登陆页面的图形验证码

    本文转自,http://www.bubuko.com/infodetail-720511.html 验证码的工具类, 这个jfinal自带的也有,但是下面这个和Jfinal自带的有一点点小的改动,(我 ...

  5. Office365学习笔记—Lookup类型加载条目过多解决方案

    1,随着接触的项目越来越多,遇到的各种奇葩的问题也越来越多,不得不说,SharePoint是个好东西,提高了开发效率,简化了很多基础的功能.但是令人头疼的问题是,当你想做个稍微复杂点的功能,就不得不研 ...

  6. java 企业门户网站 源码 自适应响应式 freemarker 静态引擎 html5 SSM

    官网 http://www.fhadmin.org/ 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成html 2.因为是生成的ht ...

  7. Oracle数据库sql语句

    1.创建用户.赋权限.删除用户 create user test identified by test default test users temporary tablespace temp; gr ...

  8. iOS中怎么判断可变和不可变的坑（更正版）

    iOS中怎么判断可变和不可变的坑 怎么判断NSString和NSMutableString呢 看题 BOOL result = [" isKindOfClass:[NSMutableStri ...

  9. 25条提高iOS App性能的技巧和诀窍

    25条提高iOS App性能的技巧和诀窍 当我们开发iOS应用时,好的性能对我们的App来说是很重要的.你的用户也希望如此,但是如果你的app表现的反应迟钝或者很慢也会伤害到你的审核. 然而,由于IO ...

  10. Vue中，给当前元素添加类名移除兄弟元素类名的方法

    在Vue中,给当前元素添加类名移除兄弟元素类名的方法 今天在项目中需要做一个效果,点击对应的li改变当前的color,其他的li取消颜色,在jQuery中这很容易,由于之前已经引入了jQuery,所以 ...