Vue2中Element UI表单的使用详解

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<div id="app">
        <el-form ref="form" label-width="80px">
            <!-- 文本框 -->
            <el-form-item label="用户名:">
            <el-input v-model="uname"></el-input>
            </el-form-item>
            <!-- 单选框 -->
            <el-form-item label="性别">
                <el-radio-group v-model="usex">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
                </el-radio-group>
            </el-form-item>
            <!-- 复选框 -->
            <el-form-item label="爱好">
            <el-checkbox-group v-model="like">
                <el-checkbox label="吃饭" name="type"></el-checkbox>
                <el-checkbox label="睡觉" name="type"></el-checkbox>
                <el-checkbox label="玩游戏" name="type"></el-checkbox>
                <el-checkbox label="打豆豆" name="type"></el-checkbox>
            </el-checkbox-group>
            </el-form-item>
        <!-- 下拉框 -->
            <el-form-item label="职业">
                <el-select v-model="job" multiple placeholder="请选择您的工作"> <!--myltiple表示可多选-->
                <el-option label="软件工程师" value="软件工程师"></el-option>
                <el-option label="前端开发者" value="前端开发者"></el-option>
                <el-option label="UI设计师" value="UI设计师"></el-option>
                <el-option label="视频剪辑师" value="视频剪辑师"></el-option>
                </el-select>
            </el-form-item>
<!-- 多行文本框 -->
            <el-form-item label="简介">
                <el-input type="textarea" v-model="desc"></el-input>
            </el-form-item>

            <el-form-item>
            <el-button type="primary" @click.prevent="login">立即创建</el-button>
            <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </div>

var vm=new Vue({
        el:"#app",
        data:{
            uname:"",
            usex:"男",
            like:["吃饭","睡觉"],
            job:["UI设计师"],
            desc:"hello,I'm 碰磕"
        },
        methods:{
           login:function(){
                alert("姓名:"+this.uname+",性别:"+this.usex+",爱好:"+this.like+",职业:"+this.job+",简介:"+this.desc);
           }
        }
    })

<div id="app">
        <el-form ref="form" label-width="80px">
            <!-- 文本框 -->
            <el-form-item label="年龄:">
            <el-input v-model.number="age"></el-input>
            </el-form-item>
            <h1>{{stname}}</h1>
            <!-- 文本框 -->
            姓名:<input v-model.lazy="stname" v-colors="msg" v-autofocus />
<!-- 多行文本框 -->
            <el-form-item label="地址">
                <el-input type="textarea" v-model.trim="address" ></el-input>
            </el-form-item>

            <el-form-item>
            <el-button type="primary" @click.prevent="login" v-color="msg">立即创建</el-button>
            <el-button >取消</el-button>
            </el-form-item>
        </el-form>
    </div>

  var vm=new Vue({
        el:"#app",
        data:{
            age:"",
            address:"",
            stname:""
        },
        methods:{
           login:function(){
                console.log(this.age+10);   //.number将类型设定为number类型
                console.log(this.address);  //.trim去除前后空格
                console.log(this.stname);   //.lazy失去焦点才会实现更新数据
           }
        }
    })

Vue.directive('autofocus',{
        inserted:function(el){
            //el即绑定的元素
            el.focus();//JS自带的焦点方法
        }
})

姓名:<input v-model.lazy="stname" v-autofocus />

//带参
    Vue.directive('color',{
        bind:function(el,binding){
            //el即绑定的元素
            //binndding即绑定的参数
            el.style.color=binding.value.color;
        }
    })
 var vm=new Vue({
        el:"#app",
        data:{
            msg:{
                color:"pink"
            }
        }
    })

姓名:<input v-model.lazy="stname" v-color="msg" />

var vm=new Vue({
        el:"#app",
        data:{
            msg:{
                color:"pink"
            }
        }
        directives:{
            colors:{
                bind:function(el,binding){
                    el.style.color=binding.value.color;
                }
            }
        }
    })

姓名:<input v-model.lazy="stname" v-colors="msg" />