Vue代码实例解析，inline、model、v-on

一、简单Form表单

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.7/lib/index.js"></script>
<div id="app">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="审批人">
    <el-input v-model="formInline.user" placeholder="审批人"></el-input>
  </el-form-item>
  <el-form-item label="活动区域">
    <el-select v-model="formInline.region" placeholder="活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">查询</el-button>
  </el-form-item>
</el-form>
</div>  
<script>
var Main = {
    data() {
      return {
        formInline: {
          user: '12',
          region: ''
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script>

样式

解析

1. :inline=“true”
   可以让表单域变为行内的表单域。即让该表单不换行，直到挤满该页面，才会换行.。

2. :model=“formInline”
   表单数据对象.双向数据绑定，表单命名为formInline，然后input框中定义v-model=“formInline.user”，即在js中他的值为formInline中的user

3. label=“审批人”
   label，标签名

4. @click=“onSubmit”
   v-on的缩写,触发点击事件。直接调用method中的onSubmit方法。示例代码，也可以写成：

<el-button type="primary" v-on:click="onSubmit">查询</el-button>

二. 表单重置按钮

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.7/lib/index.js"></script>
<div id="app">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
  <el-form-item label="活动区域" prop="region">
    <el-select v-model="ruleForm.region" placeholder="请选择动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
</div>
<script>
var Main = {
    data() {
      return {
        ruleForm: {
          region: '',
        },
        // rules: {
        //   region: [
        //     { required: true, message: '请选择活动区域', trigger: 'change' }
        //   ]
        // }
      };
    },
    methods: {
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script>

样式:

解析

1. ref=“ruleForm”
   重置这个表单
2. :rules=“rules”