【Web开发手礼】探索Web开发的秘密-Vue2常用组件、案例

在Vue.js中，有许多常用的组件库可以帮助开发者快速构建用户界面。以下是一些流行的Vue组件库：

1. Vue.js 2:

   • Element UI
   • Vuetify
   • Bootstrap Vue
   • Ant Design Vue

2. Vue.js 3:

   • Pinia (替代Vuex)
   • Vueuse
   • Headless UI
   • Ionic Vue

以下是使用Element UI创建一个简单的表单的例子：

<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="用户名">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input type="password" v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">提交</el-button>
    </el-form-item>
  </el-form>
</template>
 
<script>
  export default {
    data() {
      return {
        form: {
          username: '',
          password: ''
        }
      };
    },
    methods: {
      onSubmit() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            alert('提交成功!');
          } else {
            alert('表单验证失败!');
            return false;
          }
        });
      }
    }
  };
</script>

在这个例子中，我们使用了Element UI的<el-form>组件来创建一个登录表单，并使用<el-input>组件来收集用户输入的信息。当用户点击提交按钮时，会触发onSubmit方法，该方法会验证表单数据的合法性，如果验证通过，则会弹出提示“提交成功”的消息；如果验证失败，则会弹出提示“表单验证失败”的消息。