对Vue中表单输入绑定和组件基础的分析

本篇文章给大家分享的是关于对vue中表单输入绑定和组件基础的分析，有需要的朋友可以参考一下。

目标：

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>

textarea:

<textarea></textarea>

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

<input>

checkout(多个):

<input>Jack
<input>John
<input>Mike

radio:

<input>One

<input>Two

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

<select>
    <option>请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option></select>

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

.lazy: 触发的事件不一样,使用change触发,而不是input触发
.number: 自动转为数字类型
.trim:自动过滤后卫空白符号

例子

form.html

nbsp;html>


    <meta>
    <meta>
    <meta>
    <title>表单输入绑定</title>
    <script></script>
    <p>
        </p>

                         <input>{{formData.textValue}}
            <textarea></textarea>{{formData.textareaValue}}
                         <input>点我啊
                         <input>             哈哈             <input>             呵呵             <input>             嘻嘻             
            多选选中的是 {{value}}              
                         <input>             one             <input>             two             <input>             three             
            单选选中的是 {{formData.pickedValue}}              
                                          请选择                 A                 B                 C                          
            下拉选择框选中的是 {{formData.selectedValue}}              
            提交         

     <script> var vm = new Vue({ el: &#39;#app&#39;, data: { formData: { textValue: &#39;&#39;, textareaValue: &#39;&#39;, isChecked: true, checkedValues: [], pickedValue:&#39;&#39;, selectedValue: &#39;&#39; }, msg: &#39;这是一句消息&#39; }, methods: { submitForm: function(){ for(var key in this.formData) { obj[key] = this.formData[key]; } console.log(this.formData); console.log(this.msg); } } }); </script>

相关推荐：

对Vue中事件处理的分析

Vue中class与style绑定以及条件与列表渲染的分析

前端入门到VUE实战笔记：立即学习
>在学习笔记中，你将探索 前端 的入门与实战技巧！