element的官方文档
官网地址 : [element-ui](Element - 网站快速成型工具)
我们使用组件库尽量选取大公司大品牌的组件库,安全有保证.能白嫖只管白嫖就完事了
安装
用 vue create 文件名 命令创建项目；根据elementUI官网中的说明来安装和使用组件
注意：
vue create命令会自动创建文件夹，这样就不需要我们手动创建了- 选择Vue2 版本的默认配置
- 如果vue create 命令不能正常运行，要先安装脚手架工具， 对应的命令是：
npm i -g @vue/cli
cd 项目名再启动
上一步的命令做了两件事：创建文件夹，把示例项目的代码下载到这个文件夹中，为了运行项目，我们还需要进入项目目录下，并运行命令。 对应的命令是：
cd element-demo # 进入项目目录
npm run serve # 运行命令
在浏览器上面输入
<http://localhost:8080>
查看效果
把ElementUI添加到项目中
参考官网文档，按全局引入的方式，一共分成两步：
- 安装 elementUI
- 在项目的main.js中引入使用
在项目中安装elementUI
npm i element-ui -S
-S: 是--save的简写，表示 这个包是生产依赖， 表示项目上线也要使用这个包。
-S: 是可以省略不写的。
如果要安装开发依赖，则要加 -D。
main.js中引入并注册
完整引入
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'; Vue.use(ElementUI);
new Vue({ el: '#app', render: h => h(App) });
直接在官网搬运的,引入后就可以在任意组件里使用elementUI了
复制粘贴就不讲了,说一些有意思的
table里面的自定义插槽
当后台传过来的性别数据不是男和女,而是0和1时我们改怎么处理
第一个办法就是打后端一顿,让他给我改过来1
第二个方法就只能靠我们自己了
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="age" label="年龄"> </el-table-column>
<el-table-column prop="address" label="地址" align="center">
</el-table-column>
<el-table-column prop="gender" label="性别">
//v-slot和 slot-scope效果一样,可以获取到自定义列的内容，参数为 { row, column, $index }的数据
<template slot-scope="scope">
<!-- <span>{{fn(scope.row.gender)}}</span> -->
<span>{{ scope.row.gender ? "男" : "女" }}</span>
</template>
</el-table-column>
<el-table-column prop="img" label="图片">
<template slot-scope="scope">
<img :src="scope.row.companyLogo" alt="" />
</template>
</el-table-column>
<el-table-column label="操作">
<el-button size="mini" type="primary" icon="el-icon-search">搜索</el-button>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '黑小虎',
address: '上海市普陀区金沙江路 1518 弄',
age: 22,
gender: 0,
companyLogo: 'http://s02.mifile.cn/assets/static/image/logo-mi2.png'
}, {
date: '2016-05-04',
name: '沸羊羊',
address: '上海市普陀区金沙江路 1517 弄',
age: 21,
gender: 1,
companyLogo: 'http://s02.mifile.cn/assets/static/image/logo-mi2.png'
}, {
date: '2016-05-01',
name: '双面龟',
address: '上海市普陀区金沙江路 1519 弄',
age: 23,
gender: 0,
companyLogo: 'http://s02.mifile.cn/assets/static/image/logo-mi2.png'
}, {
date: '2016-05-03',
name: '汤姆',
address: '上海市普陀区金沙江路 1516 弄',
age: 25,
gender: 1,
companyLogo: 'http://s02.mifile.cn/assets/static/image/logo-mi2.png'
}]
}
},
methods: {
fn(scope) {
console.log(scope);
}
}
}
</script>
form表单验证
校验必要性
在向后端发请求调用接口之前，我们需要对所要传递的参数进行验证，来把用户的错误扼杀在摇篮之中。
不能相信用户的任何输入！不能相信用户的任何输入！不能相信用户的任何输入！
基本步骤-共三步
- 定义验证规则。data()中按格式定义规则
- 在模板上做属性配置来应用规则（三个配置）
给表单设置rules属性传入验证规则
给表单设置model属性传入表单数据
给表单项（Form-Item ）设置prop属性，其值为设置为需校验的字段名 - 手动兜底验证
步骤1-定义表单验证规则
在 data 中,补充定义规则。
data() {
return {
rules: {
// 字段名1：表示要验证的属性
// 值: 表示验证规则列表。它是一个数组，数组中的每一项表示一条规则。
// 数组中的多条规则会按顺序进行
字段名1: [
{ 验证规则1 },
{ 验证规则2 },
],
字段名2: [
{ 验证规则1 },
{ 验证规则2 },
],
}
}
}
验证规则示例
{ required: true, message: '请输入验证码', trigger: 'blur' },
{ pattern: /^\d{6}$/, message: '请输入合法的验证码', trigger: 'blur' },
{ min: 6, max: 8, message: '长度为6-8位', trigger: 'blur' }
实操代码
data () {
return {
// 表单验证规则，整体是一个对象
// 键：要验证的字段, 值：是一个数组，每一项就是一条规则
rules: {
// 字段名：mobile就表示要验证的 属性
// 值: 是一个数组。数组中的每一项表示一条规则。
mobile: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{ pattern: /^\d{11}$/, message: '请输入11位手机号', trigger: 'blur' }
]
}
}
},
步骤2-模板中的配置
内容：
- 给 el-form 组件绑定 model 为表单数据对象
- 给 el-form 组件绑定 rules 属性配置验证规则
- 给需要验证的表单项 el-form-item 绑定 prop 属性，注意：prop 属性需要指定表单对象中的数据名称
代码：
<el-form label-width="80px" :model="form" :rules="rules">
<el-form-item label="手机号" prop="mobile">
<el-input v-model="form.mobile"></el-input>
</el-form-item>
<el-form-item label="密码" prop="code">
<el-input v-model="form.code"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button @click="onCancel">取消</el-button>
</el-form-item>
</el-form>
验收效果
我们做到这一步时，当用户输入的内容不符合表单规则要求时，并且某个输入框失焦时，它会给出相应的提示，当我们输入的内容符合要求时，错误提示会自动消失。
步骤3-手动兜底验证
格式
element-ui的表单组件.validate(valid => {
if(valid) {
// 通过了验证
} else {
// 验证失败
}
})
element-ui的表单组件.validate(valid => {})只要写了就有效,就会判断
全部加一起写一个小demo
<template>
<div style="width:800px">
<h1>表单</h1>
<el-form
ref="form"
:rules="rules"
:model="form"
label-width="80px">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<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>
</div>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
password: ''
},
// 定义规则
rules: {
"username": [
{required: true, message: '请输入用户名', trigger: 'blur'}
],
"password":[
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 8, message: '长度为6-8位', trigger: 'blur' },
//自定义的规则
{
validator(_, value, callback){
// rule：采用的规则
// value: 被校验的值
// callback是回调函数，
// 如果通过了规则检验，就直接调用callback()
// 如果没有通过规则检验，就调用callback(错误对象，在错误对象中说明原因)
// 例如：callback(new Error('错误说明'))
if(value === '123456'){
callback(new Error('密码不能为123456'))
} else{
callback()
}
// console.log(rule, value, callback)
},
trigger:"blur"
}
]
}
}
},
methods: {
onSubmit() {
// 手动兜底校验
console.log(this.$refs.form)
// this.$refs.form.validate会让表单自动校验一次
// valid就会自动接收校验的结果
this.$refs.form.validate(valid => {
console.log(valid)
// valid: true，false
// 为false: 表单上会有提示信息
// 如果是true,就可以进一步发ajax做登录
})
// if(this.form.name ===""){
// alert('不能为空')
// return
// }
// if(this.form.name === 'admin'){
// alert('不能取这个名字')
// return
// }
// console.log('submit!');
}
}
}
</script>
注意
下面三个地方的属性名必须一致
