表单输入绑定、组件基础

目标：

  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. 【转】上传jar包到nexus私服

    原文:https://my.oschina.net/lujianing/blog/297128 1通过网页上传 这种方法只是上传了jar包.通过maven引用当前jar,不能取得jar的依赖 from ...

  2. Oracle中函数的使用

      1.decode () 例子:它的写法如下decode('a','b','c','d'),其中a,b,c,d可以是其他函数也可以是数值,依据我们自己的情况来使用,它的含义是如果a=b,那么结果显示 ...

  3. iOS 推送功能打包后获取不到deviceToken

    公司项目用ionic3构建, 用了极光推送插件(cordova-plugin-jpush). 开发时一切将各种Bundle Id, 推送证书等都绑定完测试一切正常. 可是要给测试人员打Ad-Hoc包时 ...

  4. activemq的搭建、启动，简单demo

    一.搭建activeMQ 在官网下载window版本,直接解压就可以. 二.启动 在解压完的目录/bin/win64,双击击activemq.bat,运行完之后打开浏览器,输入http://127.0 ...

  5. Google Cloud Platform 续

    Google Cloud Platform 创建新实例 地区:australia-southeast1-a 机器类型:1个vCPU n1-standard-1 系统:Ubuntu 16.04 LTS ...

  6. html-表单标签

    表单标签 * 可以提交数据到**网站上的服务器,这个过程可以使用表单标签实现 * <form></form>:定义一个表单的范围 - 属性 ** action:提交到地址,默认 ...

  7. Redis简单介绍与数据类型

    介绍 分布式缓存 NoSql:解决高并发.高可用.高可扩展,大数据存储等一系列问题而产生的数据库解决方案. Redis:键值(Key-Value)存储数据库 Redis是使用c语言开发的一个高性能键值 ...

  8. spark RDD官网RDD编程指南

    http://spark.apache.org/docs/latest/rdd-programming-guide.html#using-the-shell Overview(概述) 在较高的层次上, ...

  9. 【ElasticSearch故障处理】OpenJDK 64-Bit Server VM warning

    [故障描述] VM虚拟机安装ElasticSearch集群,有三台Linux,完成安装后,执行启动命令:bin/elasticsearch -d . 运行结果报错: OpenJDK 64-Bit Se ...

  10. STM32 HAL库学习系列第5篇 定时器TIM---编码器接口模式配置

    cube基本配置,外设开启编码器,串口2 可能大家在设置的时候有这个错误 错误:error:  #20: identifier "TIM_ICPOLARITY_BOTHEDGE" ...