表单输入绑定、组件基础

目标：

  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. window resize和scroll事件的基本优化

    转自 http://www.kankanews.com/ICkengine/archives/6564.shtml

  2. centos6.4安装使用wine 持续更新中

    首先,从wine的官网下载页面http://www.winehq.org/download/可以了解到centos安装wine需要EPEL软件仓库.那么首先安装EPEL软件仓库,从http://mir ...

  3. Stacktrace: org.apache.jasper.servlet.JspServletWrapper.handleJspException(JspServletWrapper.java:5

    jsp页面出现如下异常: Stacktrace: at org.apache.jasper.servlet.JspServletWrapper.handleJspException(JspServle ...

  4. TXT文件转换成DataSet数据集

    /// <summary> /// TXT文件转换成DataSet数据集 /// </summary> /// <param name="FilePath&qu ...

  5. ios - 沙盒和NSBundle

    沙盒 1.沙盒机制介绍 iOS中的沙盒机制是一种安全体系.每个iOS程序都有一个独立的文件系统(存储空间),而且只能在对应的文件系统中进行操作,此区域被称为沙盒.应用必须待在自己的沙盒里,其他应用不能 ...

  6. Xcode 控制台打印Unicode字符串转换为中文

    在Xcode的控制台里直接打印一个数组或者字典,输出的都是一些Unicode的编码,不方便调试.    要想看到中文,则要去获取对应的key或者数组下标.得到具体某一个对象才能看到中文,给我们调试起来 ...

  7. javascript 使用 匿名 箭头函数 this的变化

    处理html 页面 <body> <div class="main"> <div class="up"> <div c ...

  8. 蓝桥杯第七届决赛（国赛）C++B组 第四题 机器人塔

    机器人塔 X星球的机器人表演拉拉队有两种服装,A和B.他们这次表演的是搭机器人塔. 类似: A    B B   A B A  A A B B B B B A BA B A B B A 队内的组塔规则 ...

  9. Delphi调用爷爷类的方法

    Delphi通过inherited 可以调用父类的方法,但是没有提供直接调用父类的父类的方法(爷爷类),通过变通的方式实现如下: 假设父类是TFather,爷爷类TGrand,调用爷爷类的Write方 ...

  10. Kafka解惑之时间轮 (TimingWheel)

    Kafka中存在大量的延迟操作,比如延迟生产.延迟拉取以及延迟删除等.Kafka并没有使用JDK自带的Timer或者DelayQueue来实现延迟的功能,而是基于时间轮自定义了一个用于实现延迟功能的定 ...