Vant: https://vant-contrib.gitee.io/vant/#/zh-CN/
Cube-UI: https://didi.github.io/cube-ui/#/zh-CN/docs/introduction
Mint UI: http://mint-ui.github.io/docs/#/
NutUI: https://nutui.jd.com/#/index
element-ui, Ant Design of Vue, iView
Element官方地址:https://element.eleme.cn/#/zh-CN
ElementPlus(适配Vue3.0的版本)官方地址: https://element-plus.org/#/zh-CN
vue create element-demo
如果vue命令不能运行,要先安装, 对应的命令是: npm i -g @vue/cli
npm i element-ui -S
-S: 是–save的简写,表示 这个包是生产依赖。 就是项目上线也要使用的。
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
app.vue
默认按钮
npm i xxxx时,它默认会去npm官网上下载,它会很慢。
# 如果安装比较慢,可以切换成淘宝镜像。
npm config set registry https://registry.npm.taobao.org
有一个工具 nrm
可以自由去切换,而不需要去记上边的长长的地址
# 全局安装
npm i nrm -g
查看所有可用的镜像源:
nrm ls
切换镜像
nrm use taobao
复制官方demo中的第一个基础demo,先把我们的组件跑起来运行
1.需求描述:我们想在最后一列渲染出一个删除按钮
解决方案:我们需要在对应的列中,使用template
标签包裹我们自定义渲染的内容,其实用的就是插槽的机制。
// 省略其它....
删除
2.需求描述:后端返回的数据中,只有一个指代性别的编码,为了方便用户查看,需要我们把1转换成男,0转换成女。
数据:
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
gender: 0
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
gender: 1
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
gender: 1
}]
解决思路:用作用域插槽拿到数据,再使用函数做转换输出即可
{{abc.row.gender ? '男' : '女'}}
通过 Scoped slot
可以获取到 row, column, $index 和 store(table 内部的状态管理)的数据
page-size: 默认每页10条数据
Pagination
注意:
要求:
简单来说的步骤
表单验证:
- 在data()定义
- 规则, 表单数据对象
- 在template中应用规则
- el-form : rules, model, ref
- el-form-item: prop
- 手动兜底校验
- this.$refs.xxx.validate(valid => { })
rules
属性传入验证规则model
属性传入表单数据prop
属性,其值为设置为需校验的字段名rules: {
// 字段名1:表示要验证的属性
// 值: 表示验证规则列表。它是一个数组,数组中的每一项表示一条规则。
// 数组中的多条规则会按顺序进行
字段名1: [
{ 验证规则1 },
{ 验证规则2 },
],
字段名2: [
{ 验证规则1 },
{ 验证规则2 },
],
}
具体示例:
// // 1.在做具体的提交之前,去验证用户输入的有效性
// // 如果为空,则提示
// if(this.form.mobile==='') {
// alert('手机号不能为空');
// return
// }
// 2.element-ui中的表单验证--手动调用表单组件上的验证方法
// 如何获取对表单组件的元素引用?
// 1.给元素加ref
// 2.this.$refs.xxx
// console.log(this.$refs.form);
// this.$refs.form.validate(valid=>{
// // valid:会自动传入验证结果true/false
// console.log('表单验证的结果是',valid);
// if(valid) {
// alert('表单验证成功,可以做后续动作')
// // 去做ajax...
// } else {
// console.log('验证失败!');
// }
// })
[
// { required: true, message: '密码不能为空', trigger: 'blur' },
{min:6,max:8,message:'必须是6-8位',trigger:'blur'},
// 3.自定义检验规则
{
validator:function(rule,value,callback) {
console.log('自定义的校验规则',rule,value,callback)
if(value==='123456') {
callback(new Error('密码不能是123456'))
} else {
callback()
}
},
trigger:'blur'
}
]
只需要设置`@node-click="handleNodeClick"`
两种状态:打开/关闭 — :visible=“布尔值”
open和close俩自定义事件要关注
实现父子组件数据之间的双向绑定,与v-model类似。
v-model的原理:
等价于
this.num=val">
.sync修饰符的原理:
// 正常父传子:
// 加上sync之后父传子:
// 它等价于
num=val" :b="num2" @update:b="val=>num2=val">
// 相当于多了一个事件监听,事件名是update:a,回调函数中,会把接收到的值赋值给属性绑定的数据项中。
.sync与v-model区别是:
v-model="num", :num.sync="num"
快捷方式:
vscode中–帮助–快捷键建议
vscode:ctrl+p—快速查找