表单输入绑定、组件基础

目标：

  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. AttributeError: 'module' object has no attribute get'

    最近在写python requests相关内容易,突然报错AttributeError: 'module' object has no attribute 'get'" 脚本肯定没问题 怎么 ...

  2. 虚拟机和主机文件实时同步 -- winsshfs的快速入手

    之前在公司使用mac ,并且通过mac下的osfuse和sshfs连接,直接将虚拟机的文件目录同步到了本地,并且可以进行实时操作修改,对于写项目,确实是省了很大一部分上传的精力. 于是在自己的win下 ...

  3. JAVA语言编程思维入门

    Java语言是一门强数据类型语言,也就是所有的数据有自己的数据类型,不能搞混淆.比如整数int 字符串String 不能用int a="字符串123";这样写是错的,因为数据类型不 ...

  4. react路由传参

    方法1 <刷新页面参数会消失> <Link className="item" to={{pathname:'/order',params:{index :&quo ...

  5. iframe空白

    优酷网页上复制的通用代码用来播放视频,浏览器和谷歌模拟器正常,但是发布后手机上打开一片空白,一直以为是苹果手机不支持iframe,最后发现是由于iframe播放链接是http的,而我们网页是https ...

  6. 替代alert的消息框和提示框

    alert提示框由于外观不太友好,所以一般都不用alert了. 我在这里使用bootstrap的样式,写了一个可以单独显示消息,也可以确认取消的提示框,确认,取消的采用模式对话框方式,用一个div遮盖 ...

  7. TopJUI Combobox onSelect 事件失效BUG

    版本:2.2.8 onChange : function(b, c) 两个参数:当前选择后在Combobox中显示的数据,实际是textField:另一个是改变前的数据 onSelect : func ...

  8. 对大数据的批量导入MySQL数据库

    自己的库里有索引在用insert导入数据时会变慢很多 使用事务+批量导入 可以配置使用spring+mybatis整合的方式关闭自动提交事务(地址),选择批量导入每一百条导入使用list存储值传入到m ...

  9. Flash的swf文件破解

    1.准备好flash文件,xxx.swf(后缀为swf),将其重构swf文件为fla源文件. 2.asv软件(5以上版本)的操作 1.点击左上角 文件 --> 打开 --> 运行已准备好的 ...

  10. python3配置文件的增删改查，记录一下

    #!/usr/bin/env python3 import json #json模块,用于将像字典的字符串转换为字典 import re #re模块,查找替换 import shutil #copy文 ...