表单输入绑定、组件基础

目标：

  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. 安卓混合开发——原生Java和H5交互，保证你一看就懂！

    ** 在Android开发中,越来越多的商业项目使用了Android原生控件与WebView进行混合开发,当然不仅仅就是显示一个WebView那么简单,有时候还需要本地Java代码与HTML中的Jav ...

  2. 【问题解决】增加https后 phpcms 分页错误

    https://m.cnbuses.com/m.cnbuses.com/index.php?page=2查看分页方法 function pages()中有个pageurl 查看该方法,发现有类似htt ...

  3. ubuntu 14.04 将窗体button移到右边

    刚刚安装了Ubuntu 14.04,想改动窗体button的位置.但依照曾经的办法发现不行了,在gconftool-->apps中找不到metacity. 多方查找后找到解决方式,例如以下 Ub ...

  4. C#多个if与if+多个else if有何不同？

    int a=1; if(a==1){System.out.println("1");} if(a==2){System.out.println("2");} i ...

  5. 由使用request-promise-native想到的异步处理方法

    由使用request-promise-native想到的异步处理方法 问题场景 因为js语言的特性,使用node开发程序的时候经常会遇到异步处理的问题.对于之前专长App开发的我来说,会纠结node中 ...

  6. java核心技术-多线程之线程内存模型

    对于每一种编程语言,理解它的内存模型是理所当然的重要.下面我们从jvm的内存模型来体会下java(不限java语言,严格来讲是JVM内存模型,所有JVM体系的变成语言均适用)的内存模型. 堆: 就是我 ...

  7. mariadb或者mysql查看某个库相关的用户授权信息

    mariadb或者mysql查看某个库相关的授权信息 SELECT * FROM mysql.Db WHERE Db='DB_NAME';

  8. node 借助Node Binary管理模块“n”更新

    Node.js的版本频繁变化,如果有模块不能在你当前的Node版本上使用,需要升级Node环境 1)首先:查看当前node版本:node –v 2)安装n模块:npm install -g n 3)检 ...

  9. 基于 HTML5 Canvas 的 3D 渲染引擎构建机架式服务器

    前言 今天找到了 HT 的官网里的 Demo 网站( http://www.hightopo.com/demos/index.html ),看的我眼花缭乱,目不暇接. 而且 HT 的用户手册,将例子和 ...

  10. 记遇到的一个php坑

    最近对项目的一个高访问量业务接口进行功能扩展,上线一段时间后,服务器cpu load突然飙升,并出现大量502.一开始找运维查看日志,并没有看是什么问题,后来发现别的部门项目之前也遇到类似的问题,原来 ...