vue--elementUI

官网:https://element.eleme.io/#/zh-CN/component/installation
https://element-plus.org/zh-CN/guide/installation.html#%E4%BD%BF%E7%94%A8%E5%8C%85%E7%AE%A1%E7%90%86%E5%99%A8
安装vue项目:https://blog.csdn.net/qq_43470725/article/details/122637567
vue--elementUI_第1张图片

cnpm install vue-router --save-dev
npm i element-ui -S
cnpm install
cnpm install sass-loader node-sass --save-dev

vue--elementUI_第2张图片

若是下载后运行报错,原因可能是saas版本太高了:
vue--elementUI_第3张图片
改版本后
在这里插入图片描述
重新cnpm install

使用elementUI写vue网页 代码演示

vue--elementUI_第4张图片

首先创建views包用于存视图组件

main.vue视图

<template>
  <h1>首页h1>
template>

<script>
export default {
  name: "Main"
}
script>

<style scoped>

style>

login.vue视图

<template>
  <div>
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="密码" prop="pass">
        <el-input type="password" v-model="ruleForm.pass" autocomplete="off">el-input>
      el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off">el-input>
      el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model.number="ruleForm.age">el-input>
      el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交el-button>
        <el-button @click="resetForm('ruleForm')">重置el-button>
      el-form-item>
    el-form>
  div>
template>

<script>
export default {
  name: "Login",
  data() {
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('年龄不能为空'));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'));
        } else {
          if (value < 18) {
            callback(new Error('必须年满18岁'));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        pass: '',
        checkPass: '',
        age: ''
      },
      rules: {
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        age: [
          { validator: checkAge, trigger: 'blur' }
        ]
      },

    };
  },
  methods: {
    submitForm(formName) {
      //表单验证功能
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //使用vue-router 路由到指定页面,该方式称之为编程式导航
          // alert('submit!');
          this.$router.push("/main");
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
script>

<style scoped>

style>

对login.vue视图分析

<template>
  <div>
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="密码" prop="pass">
        <el-input type="password" v-model="ruleForm.pass" autocomplete="off">el-input>
      el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off">el-input>
      el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model.number="ruleForm.age">el-input>
      el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交el-button>
        <el-button @click="resetForm('ruleForm')">重置el-button>
      el-form-item>
    el-form>
  div>
template>

这一堆代码表示的是html的绘图,全部复制与element-ui官网:
https://element.eleme.io/#/zh-CN/component/form

vue--elementUI_第5张图片

然后这两句有事件绑定,会在script里面有方法对应

<el-button type="primary" @click="submitForm('ruleForm')">提交el-button>
        <el-button @click="resetForm('ruleForm')">重置el-button>

然后下面这整个也是复制过来的:

<script>
export default {
  name: "Login",
  data() {
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('年龄不能为空'));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'));
        } else {
          if (value < 18) {
            callback(new Error('必须年满18岁'));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        pass: '',
        checkPass: '',
        age: ''
      },
      rules: {
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        age: [
          { validator: checkAge, trigger: 'blur' }
        ]
      },

    };
  },
  methods: {
    submitForm(formName) {
      //表单验证功能
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //使用vue-router 路由到指定页面,该方式称之为编程式导航
          // alert('submit!');
          this.$router.push("/main");
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
script>

分析这里的data()方法:返回表单里面的值

data() {
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('年龄不能为空'));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'));
        } else {
          if (value < 18) {
            callback(new Error('必须年满18岁'));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        pass: '',
        checkPass: '',
        age: ''
      },
      rules: {
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        age: [
          { validator: checkAge, trigger: 'blur' }
        ]
      },

    };
  },

看到这三个方法就是前端验证方法,会在后面被return里面的rules里面的属性调用:
vue--elementUI_第6张图片
vue--elementUI_第7张图片

最后看这里的methods,是验证表单是否有效,和上面视图层绑定的方法submitForm

这里使用this.$router.push(“/main”);跳转网页

  methods: {
    submitForm(formName) {
      //表单验证功能
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //使用vue-router 路由到指定页面,该方式称之为编程式导航
          // alert('submit!');
          this.$router.push("/main");
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}

路由js的配置

import Vue from 'vue'
import Router from 'vue-router'

import Main from "../views/Main"
import Login from "../views/Login"

Vue.use(Router);

export default new Router({
    routes: [
      {
        path: '/main',
        //注意component不要写成components了!!!!
        component: Main
      },
      {
        path: '/login',
        component: Login
      }
    ]
});

在路由里面将视图组件的网页路径配置好

main.js主入口js里面new出vue对象并绑定主入口App.vue组件然后引入路由和ElementUI

参考:https://element.eleme.io/#/zh-CN/component/quickstart
vue--elementUI_第8张图片

import Vue from 'vue'
import App from './App'

import router from './router'

//参考:https://element.eleme.io/#/zh-CN/component/quickstart
import ElementUI from 'element-ui'
//导入css,需要安装cnpm install sass-loader node-sass --save-dev
import 'element-ui/lib/theme-chalk/index.css'

// 安装路由
Vue.use(router);
Vue.use(ElementUI);

new Vue({
  el: '#app',
  router,
  render: h => h(App)//配置ElementUI参考:https://element.eleme.io/#/zh-CN/component/quickstart
})

App.vue组件主入口引出路由视图

<template>
  <div id="app">
   <router-view>router-view>
  div>
template>

<script>
export default {
  name: 'App',
}
script>

这个就是路由视图的引出:

 <router-view>router-view>

测试:
运行

npm run dev

vue--elementUI_第9张图片
后点击提交,将跳转到首页!!!
vue--elementUI_第10张图片

你可能感兴趣的:(vue,vue)