首页 » SEO优化 » phpinclude页面空白技巧_vue引入elementui后界面空白

phpinclude页面空白技巧_vue引入elementui后界面空白

访客 2024-12-17 0

扫一扫用手机浏览

文章目录 [+]

vue-cli:4.5.11

目的

利用element-ui绘制ui界面

phpinclude页面空白技巧_vue引入elementui后界面空白

原来操作

(1)安装element-ui

phpinclude页面空白技巧_vue引入elementui后界面空白
(图片来自网络侵删)

npm i element-ui -S

(2)导入element-ui

import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);界面空缺,报错如下

Uncaught TypeError: Cannot read property 'prototype' of undefined

报错缘故原由:

目前element-ui只支持2.6以下的版本,Vue3.0要利用element-ui就要利用element-plus

官网说法便是为vue-cli@4.5以上供应element-plus

办理方法:

参考element-ui官网

https://element-plus.gitee.io/#/zh-CN/component/quickstart

(1)安装element-plus

npm i element-plus

(2)导入element-plus

import ElementPlus from 'element-plus';import 'element-plus/lib/theme-chalk/index.css';const Vue = createApp(App)Vue.use(ElementPlus)

这样就办理了!

逐日一个口试题

vue的生命周期

vue每个组件都是独立的,每个组件都有一个属于它的生命周期,从一个组件创建、数据初始化、挂载、更新、销毁,这便是一个组件所谓的生命周期。

组件中的详细方法:beforeCreate created beforeMount mounted beforeUpdate updated

beforeDestroy destroyed

统共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后。
创建前/后:

在beforeCreated阶段,vue实例的挂载元素$el和数据工具data都为undefined,还未初始化。

在created阶段,vue实例的数据工具data有了,$el还没有。
载入前/后:

在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data还未更换。

在mounted阶段,vue实例挂载完成,data成功渲染。
更新前/后:

当data变革时,会触发beforeUpdate和updated方法。
销毁前/后:

beforeDestory是在vue实例销毁前触发,一样平常在这里要通过removeEventListener解除手动绑定的事宜。
实例销毁后,触发的destroyed。

耶,又学习到了一个新知识点。

又是一个旭日而生的一天。

じゃね

标签:

相关文章