vue_hr-element基本使用

1. 组件库

1.1 常见组件库

移动端：

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

PC端:

element-ui, Ant Design of Vue, iView

1.2 遇到困难时

1. 在官网上找 常见问题(一般在网页的最底部)
2. 在社区/搜索引擎 找答案
3. 去提issue ，面对面向组件的作者提问
4. 改源码

2. element基本使用

2.1 创建项目并引入element组件库

Element官方地址：https://element.eleme.cn/#/zh-CN
ElementPlus(适配Vue3.0的版本)官方地址： https://element-plus.org/#/zh-CN

2.2 用vue-cli创建vue项目

vue create element-demo

如果vue命令不能运行，要先安装， 对应的命令是： npm i -g @vue/cli

2.3 把ElementUI加入vue-cli

1. npm方式安装elementUI

npm i element-ui -S

-S: 是–save的简写，表示 这个包是生产依赖。 就是项目上线也要使用的。

2. main.js中引入并注册

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

2.4 使用组件

app.vue

3. npm镜像

3.1 下载-命令

npm i xxxx时，它默认会去npm官网上下载，它会很慢。

# 如果安装比较慢，可以切换成淘宝镜像。
npm config set registry https://registry.npm.taobao.org

有一个工具 nrm 可以自由去切换，而不需要去记上边的长长的地址

3.2 nrm

# 全局安装
npm i nrm -g

3.3 使用

查看所有可用的镜像源：
nrm ls

切换镜像
nrm use taobao

4. element基本使用-table组件

4.1 基础使用

复制官方demo中的第一个基础demo，先把我们的组件跑起来运行

4.2 自定义列

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
      }]

解决思路：用作用域插槽拿到数据，再使用函数做转换输出即可

通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据

5. element基本使用-Pagination翻页组件

5.1 基础使用

page-size: 默认每页10条数据

注意：

1. 事件名不是驼峰命名法，而是采用kebab-case(昵称：烤串命名法)
2. 它会自动接收页码

6. element基本使用-表单校验

6.1 基础使用

要求：

1. 用户名必须为11位手机号 (/^1[0-9]{10}$/)
2. 密码为必填且长度6到8位字符

6.2 步骤

简单来说的步骤

表单验证：
- 在data()定义
  - 规则， 表单数据对象
- 在template中应用规则
  - el-form : rules, model, ref
  - el-form-item: prop
- 手动兜底校验
  - this.$refs.xxx.validate(valid => {  })

1. 定义验证规则
2. 配置模板，应用规则
   给表单设置 rules 属性传入验证规则
   给表单设置model属性传入表单数据
   给表单中的元素（Form-Item ）设置 prop 属性，其值为设置为需校验的字段名
3. 手动兜底验证(也就是说用户不理会前面的错误提示，直接点登录)
   在 data 中,补充定义规则：

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'
          }
        ]

7. element-Tree树形组件

7.1 Tree组件基础使用

7.2 获取特定树形节点数据

只需要设置`@node-click="handleNodeClick"`

8. element-Dialog弹框组件

8.1 使用组件

两种状态：打开/关闭 — :visible=“布尔值”
open和close俩自定义事件要关注

9. sync修饰符

9.1 .sync作用

实现父子组件数据之间的双向绑定，与v-model类似。

9.2 原理

v-model的原理：

等价于

.sync修饰符的原理：
// 正常父传子： 


// 加上sync之后父传子： 
 

// 它等价于
 

// 相当于多了一个事件监听，事件名是update:a，回调函数中，会把接收到的值赋值给属性绑定的数据项中。

9.3 区别

.sync与v-model区别是：

• 相同点：都是语法糖，都可以实现父子组件中的数据的双向通信。
• 区别点：
  • 格式不同。 v-model="num", :num.sync="num"
  • v-model： @input + value
  • :num.sync: @update:num
  • v-model只能用一次；.sync可以有多个。

快捷方式：
vscode中–帮助–快捷键建议
vscode：ctrl+p—快速查找