目录
- vue常见的框架
- elementUI 饿了么 **常用**
- 使用组件
- 使用组件之layout布局 实现头部
- 使用组件之小图标
- 使用组件之链接
- 使用组件之侧边栏
- 使用组件之表格 => 删除
- 使用组件之表单
vue常见的框架
- 封装了大量的组件，以供我们使用！
- elementUI => PC端 移动端
- vantUI => 有赞 => 电商项目 移动端
- iView => 腾讯 => PC端
- ant-design => 阿里
elementUI 饿了么 常用
- 官网：
https://element.eleme.cn/#/zh-CN/component/quickstart - 安装：
npm i element-ui -S - 引入：在main.js 入口文件中引入
import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css'; - 使用：在main.js 入口文件中引入
Vue.use(ElementUI);
使用组件
使用组件之layout布局 实现头部
<el-row :gutter="20">
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
</el-row>使用组件之小图标
- 官网：
https://element.eleme.cn/#/zh-CN/component/icon
// 在普通标签使用小图标
<i class="el-icon-edit"></i>
//在组件内使用小图标
<el-button type="primary" icon="el-icon-search">搜索</el-button>使用组件之链接
- 官网：
https://element.eleme.cn/#/zh-CN/component/link
<el-link type="primary">主要链接</el-link>使用组件之侧边栏
- 官网：
https://element.eleme.cn/#/zh-CN/component/menu - NavMenu导航菜单之配置属性
- Menu Attribute (主菜单 ) 之常见配置属性
- mode => 模式 => horizontal / vertical => 默认是垂直的
- background-color => 菜单背景色 => 默认值 #ffffff
- text-color => 菜单的文本颜色 => 默认值 #303133
- active-text-color => 当前菜单处于活跃的item中的文本颜色 => 默认值 #409EFF
- default-active => 当前激活菜单的index(一般而言,在data之中定义一个变量，设置默认的index显示，这边的index其实就是当前的 path 路径) => 可以给添加点击事件，然后切换对应的路由path
- default-openeds => 当前打开的 sub-menu 的 index 的数组(显示当前的子项目打开) => 数组的形式
- router => 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 => 默认为false
- 而这个index是在子组件之中绑定的，一般使用 :index=“item.path” 的方式！
- Menu Events (主菜单之事件)
- select => 菜单激活回调(触发这个事件)
参数：参数1：=> 字符串的路径 参数2：=> 数组形式的路径 参数3：=> 当前的组件实例对象@select="change"=> 菜单处于激活状态的时候，触发change事件！
change(path) {
this.activeIndex = path;//在主菜单之中的methods 定义这个函数，并且处理
},- 。。。
- SubMenu Attribute(子菜单的属性，子组件的！)
- index => 子组件的唯一标志，显示当前为活跃状态！=> 当
el-menu父组件内定义了router,开启以index中的path作为跳转路径<el-menu-item :index="item.path" :key="item.path" v-if="!item.submenu">。。。 - disabled => 当前组件是否禁用
- 对一个主菜单的配置属性的设置 还有就是两个互斥的组件如何处理(处理v-for和v-if不能同时存在的问题)
- 使用一个空的template标签，为他添加 v-for指令循环数据，然后key属性需要绑定在具体的组件内，不是在tempalte之上
- 然后使用v-if 和 v-else 来实现两个组件的互斥！
<el-menu
:default-active="activeIndex"
class="el-menu-demo"
mode="vertical"
background-color="#545c64"
text-color="#fff"
active-text-color="#ff0"
@select="change"
:default-openeds="openMenu"
router
>
<!-- active-text-color 高亮显示 -->
<template v-for="item in menu">
<!-- :index="绑定的是唯一的url路径" 注意点：就是 :key="需要写在渲染的组件上，不是元素模板！"-->
<!-- v-if 存在这个子菜单，就渲染这个子菜单项！ -->
<el-menu-item :index="item.path" :key="item.path" v-if="!item.submenu">
<i :class="item.icon"></i>
{{item.text}}
</el-menu-item>
<!-- 带有子菜单的 -->
<el-submenu :index="item.path" :key="item.path" v-else>
<!-- 外层的父 -->
<template v-slot:title>
<i :class="item.icon"></i>
{{item.text}}
</template>
<!-- 里面的子 -->
<el-menu-item
:index="item.path+subitem.path"
v-for="subitem in item.submenu"
:key="subitem.path"
>{{subitem.text}}</el-menu-item>
</el-submenu>
</template>
</el-menu>使用组件之表格 => 删除
- 官网：
https://element.eleme.cn/#/zh-CN/component/table - Table Attributes：
- data => 显示的数据 => 数组的形式
- Table Events
* - Table-column Attributes
- prop => 对应列内容的字段名，也可以使用 property 属性 => 就是用于显示数据的(一个数据中含有 age 那么使用 prop=“age” 就可以显示了)
- Table-column Scoped Slot =>这是通过自定义插槽的方式，获取刅当前列或者列的数据
- — => 自定义列的内容，参数为 { row, column, $index } 行 , 列 ， 当前活跃的组件(对象的形式)
- header => 自定义表头的内容. 参数为 { column, $index }
- 点击删除的时候，需要获取到当前的id
这时候，需要使用具名插槽，来访问到外部的数据 拿到当前行的数据
这个score 为当前具名插槽，可以访问到这个外面的数据 然后在里面使用 score.row等方式 拿到数据！
官网：https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot-syntax.md新的v-slot插槽
//前端的过滤 => 就是删除数据库后，需要在前端设置过滤掉 删除项！
this.userList = this.userList.filter((item) => item._id !== id);- 点击编辑的时候，跳转到编辑页面
<!-- 子按钮 为了拿到当前行的数，需要使用v-slot具名插槽 -->
<template v-slot:default="score">
<!-- 编辑 跳到编辑页面 -->
<el-button
type="success"
icon="el-icon-edit"
@click="goToEdit(score.row._id)"
size="mini"
circle
></el-button>
</template>
methods:{
goToEdit(id) {
//点击编辑的时候，跳转到编辑页面
// // this.$router.push("/user/edit" + id); //编程式导航
this.$router.push({
name: "Edit", // 跳转到命名视图
params: { id }, //传递的参数 以params的方式 传递了id
});
},
}使用组件之表单
- Form Attributes
- model => 表单数据对象 => {} => 默认使用这个 ruleForm (需要在data定义这个变量！)
- rules => 表单验证规则 => {}
- ref=“ruleForm” => 获取到当前组件的内容(刚刚好这个是数据！)
- Form Events
- validate => 任一表单项被校验后触发 => 被校验的表单项 prop 值，校验是否通过，错误消息（如果存在）
需要在data中的rules中定义规则 ，validator=> 为触发项(为一个对象的变量，用于处理验证，那个需要被触发的表单！)
password: [{ validator: validatePass, trigger: "blur" }],
//比如password 的触发项是 validatePass => 那么需要在前面定义一个 validatePass对象 ，里面关于password的检验！- Form-Item Attributes
- prop => 关于表单域 model 字段，用于显示(ruleForm 里面的属性是显示属性！v-model=“ruleForm.username” => 来绑定数据)
- 点击编辑
<el-button type="primary" @click="submitForm">修改</el-button>
//检验规则
var validatePass = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入密码"));
} else {
if (this.ruleForm.checkPass !== "") {
this.$refs.ruleForm.validateField("checkPass");
}
callback();
}
};
//在data之中定义数据 和常用的变量
return {
userid: "", //当前的用户id
ruleForm: { username: "", password: "", age: "", gender: "" },//当前的默认数据
rules: { //当前的检验规则
pass: [{ validator: validatePass, trigger: "blur" }],
checkPass: [{ validator: validatePass2, trigger: "blur" }],
age: [{ validator: checkAge, trigger: "blur" }],
},
};
// 点击编辑的时候
methods: {
submitForm() {
//validate 表单检验的方法 this.$refs["ruleForm"].validate=> 获取到当前页面 ruleForm 所对应的表单数据对象 去校验！
this.$refs["ruleForm"].validate(async (valid) => {
if (valid) {
//检验为真的时候 ，发起请求
//发起请求：
const { userid, ruleForm } = this;
// console.log(userid, ruleForm); //userid 用户名id reslForm修改后的项！
const { data } = await this.$request.put("/user/" + userid, {
...ruleForm,
});
alert("submit!");
} else {
console.log("error submit!!");
return false;
}
});
},
},
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
