Vue项目 UI框架介绍（第六天上）

1.什么是elementUI?

elementui官网 elementui官网文档下载

ElementUI是饿了么前端团队推出的一款基于Vue的桌面端UI框架

大白话: 和Bootstrap一样对原生的HTML标签进行了封装, 进行了美化, 让我们能够专注于业务逻辑而不是UI界面

2.elementUI使用

3.elementUI优化

默认情况下无论我们有没有使用到某个组件, 在打包的时候都会将elementUI中所有的组件打包到我们的项目中

这样就导致了我们的项目体积比较大, 用户访问比较慢

4.如何优化

为了解决这个问题, elementUI推出了按需导入, 按需打包. 也就是只会将我们用到的组件打包了我们的项目中

没有用到的组件不会被打包

1.什么是MintUI?

MintUI是饿了么前端团队推出的一款基于Vue的移动端U框架

大白话:和Bootstrap一样对原生的HTML标签进行了封装，让我们能够专注于业务逻辑而不是UI界面

2.mintUI使用

3.注意点: MintUI和ElementUI的第一个不同, 就是在MintUI中需要通过来告诉Vue我们需要使用

1.什么是Vant?

在使用MintUI的过程中发现有很多的坑，所以个人不推荐在移动端中选择MintUIXant是有赞前端开发团队又推出的一款 基于Vue的移动端UI框架

大白话:和Bootstrap一样对原生的HTML标签进行了封装，进行了美化，让我们能够专注于业务逻辑而不是UI界面

Vue.use只能use插件，不能use组件

那么如何将一个组件封装成一个插件呢？

1.Vue.use()做了什么事情?

Vue.use的作用是注册一个Vue插件(注册组件), Vue.use必须在new Vue之前使用

2.什么时候需要定义插件?

当某一个组件或者功能经常需要被使用到时, 我们就可以将这个组件或者功能定义成一个插件

例如: 网络加载指示器

3.如果自定义一个插件?

vue项目使用elementUI中Tabs标签页点击切换tab-click发起网络请求数据

标签页请求，切换进去会请求该页的数据

如果页面一加载就请求出所有的数据，会造成数据堵塞，对性能有很大的影响

所以要在tabs标签页点击切换 的时候发起相应的网络请求，用到的是 tab-click 事件。

1.渲染出页面时默认显示第一页

2.切换tab时，加载此页数据

tab-click标签事件：tab 被选中时触发，他的返回值是被选中的标签 tab 实例

tab 和 event两个参数打印一下显示如下：

tab 的参数里有个 index 值，可以作为标签页切换的索引

tab 的参数里有个label，也可以作为切换标签的判断条件

也可以使用activeName。

通过上述明确事件，参数后，修改如下进行实例操作

elementUI官网

参考

element-ui 树型控件自定义图标和实现单选节点功能

（一）自定义图标

在element-ui 官网中，提供了两种方法: render 和 slot 来添加自定义节点内容，可以在节点区添加按钮或图标等。

（二）实现单选节点功能

这里的单选功能，只不过设置节点时，将原来选中的节点再次覆盖，达到了单选的功能。

（1）通过 @node-click 事件（节点被点击时的回调），设置选中的节点：

（2）通过 @check-change 事件（节点选中状态发生变化时的回调），设置选中的节点：

（3）为何调用两个事件，做相同操作：

@check-change 事件 主要是用户点击自定义图标前的选择框进行的操作，而 @node-click 事件，点击节点（包括图标和文字）进行的操作。

Element ui的简单使用

Element ui官网

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

在 main.js 中配置

目前可以通过 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响。锁定版本的方法请查看 。

element-ui输入框的怎么获取change事件返回的值？

1、我们使用vue-cli脚手架工具创建一个vue项目，引入element-ui框架。

2、我们前往element-ui官网，找到输入框input组件，看看有什么方法可以获取input的值，change事件可以实现这个功能。

3、我们按照图示代码先把element-ui输入框组件放到我们项目中。

4、我们在输入框组件中绑定一个change事件（用法@change=""），监听绑定v-model的值就可以了。

5、利用命令行工具，运npm run dev，利用配置的地址打开网页，在输入框输入不同的内容都能监听到。

change() { // 目的是去掉输入框中的小数点

this.$nextTick(() => {

this.value = parseInt(this.value);

1.

return {

value: ''

// 目的是去掉输入框中的小数点

this.value = parseInt(value);

2.首先el-input是一个组件，并不是input标签。而你的change事件监听的是el-input的整个组件。即图中的div元素。

要解决这个问题的方法就是原生的input，再加上el-ui的class：el-input__inner。