Vue
Vue知识
我是小卡车呀
这个作者很懒,什么都没留下…
展开
-
Vue 封装的组件库
目前已封装完成的组件:按钮 Button输入框 Input单选框 Radio开关 Switch多选框 Checkbox表单 Form布局容器 Container加载 Loading图片 Image消息提示 Message导航菜单 NavMenu文字提示 Tooltip分割线 Divider置顶 BackTop进度条 Progress表格 Table标签 Tag走马灯 Carousel文档地址:Vpro-UI文档GitHub地址:Vpro-UI代码地址如果对你有帮原创 2020-12-25 16:07:05 · 265 阅读 · 0 评论 -
Vue 封装轮播图组件
vp-carousel.vue<template> <div class="vp-carousel" :style="{ height: height + 'px' }"> <div class="vp-carousel-arrow"> <ul class="vp-carousel-arrow-ul"> <li class="vp-carousel-arrow-li" v-原创 2020-12-25 15:57:06 · 735 阅读 · 1 评论 -
Vue 封装 backtop 组件
组件属性属性名类型属性值描述默认值targetString“.className” | “#IDName”置顶目标bodyvisibilityHeightNumber滚动多少高度显示200rightNumber距离浏览器右边距离50bottomNumber距离浏览器下边距离100事件名描述返回值click点击时触发event,target(触发目标)backtop到达目标时触发event,原创 2020-12-15 19:21:28 · 228 阅读 · 0 评论 -
Vue 封装 message 插件
属性名类型属性值描述默认值messageString消息提示文本“This is a message”typeString“info”|“success”|“warn”|“error”消息类型“info”iconClassString自定义提示文本前面的 icon 类“”centerBooleantrue | false文本是否居中falseshowCloseBooleantrue | false是否显示关闭按钮fal...原创 2020-12-12 22:47:42 · 515 阅读 · 0 评论 -
Vue 封装 img 组件
功能属性介绍:属性名类型属性值描述默认值srcString图片地址“”altString图片代替文本“”widthString图片宽度“300px”heightString图片高度“200px”lazyBooleantrue | false是否懒加载falsefitString“fill”|“contain”|“cover”|“none”|“scale-down”原生object-fit“fill”原创 2020-12-12 19:18:27 · 1224 阅读 · 0 评论 -
Vue 封装 loading 插件
具体属性:this.$loading(option: Object): Object -> close();option 属性:属性名类型描述默认值eleDOM元素要添加加载的DOM元素document.bodymessageString加载显示的文本“loading…”colorString加载显示文本颜色“#000000”iconfontString加载文本前方显示的 iconfont 类名(“icon-xxx”)“”b原创 2020-12-11 19:50:50 · 396 阅读 · 0 评论 -
Nginx 反向代理踩坑
自己的小项目发布时,发现有一个请求返回的是 404。通过排查 vue.config.js 中配置的代理,未发现错误在服务器中的 Node 服务已经是通过 pm2 开启。且一直是开启状态。通过 Postman 发送请求正常。这时,才排查到 Nginx 代理配置。原来的配置如下:而我所请求的路径:/api/commitRecord请求的目标路径为:http://请求的IP地址:3000/commitRecord由于 Postman 已经确认 http://请求的IP地址:3000/comm原创 2020-11-17 14:49:31 · 267 阅读 · 0 评论 -
Element-UI Loading 加载组件在 Vue 中使用
Element-UI Loading 加载组件在 Vue 中使用官方使用Loading 该组件解决在请求数据和加载渲染过程中的等待空白。以下以本人的 vue 项目,作为实践讲解。引入组件,并配置在 Vue 原型上。import { Loading } from "element-ui";Vue.prototype.$loading = Loading.service;在需要的组件或页面中使用如下:在组件中 methods 对象中添加如下方法loadingShow() {原创 2020-11-10 15:51:58 · 3554 阅读 · 0 评论 -
Mock.js 使用教程
Mock.js二话不说,官方文档双手奉上。Mock 通过可以自定义数据,同时也能拦截 AJAX 请求。对快速生成测试数据,提供便利。本文章主要讲解的是 Mock.js 在 Vue 中基本用法。安装npm install mockjs生成随机 Mock 数据// 引入 Mockimport Mock, { mock, Random } from "mockjs";// 引入所需常量import { // 随机用户对象数量最小值 USER_COUNT_MIN,原创 2020-11-04 15:40:09 · 753 阅读 · 0 评论 -
Vue 路由
Vue 路由安装NPM 方式安装:npm install vue-router使用在 Vue 项目的 src 目录下,新建一个名为 router 的文件夹,用于管理项目的路由。并在文件夹下新建 index.js 的文件。使用 Vue.use() 。明确地安装路由功能。// src/router/index.jsimport Vue from 'vue';import VueRouter from 'vue-router';Vue.use(VueRouter);需要创建一个路由实例,并原创 2020-11-02 16:23:50 · 109 阅读 · 0 评论 -
Vue自定义开发插件
Vue自定义开发插件好久没写博客了,找实习自闭了,一直找不到。废话不多说。开整。自定义插件优点(个人理解):全局的组件,容易扩展,容易使用。自己只是学到点皮毛,分享一下代码。我写的是一个加载中的插件(比较简单)新建 plugins 文件夹在 src 文件夹下新建 plugins 文件夹,我的目录如下:代码如下在 MyTestPlugin 文件夹下新建 index.js 文件const myPlugin = { // 因为要用 vue.use 所以要用 install 方法,传入的原创 2020-08-23 11:35:31 · 188 阅读 · 0 评论 -
Vue的响应式原理(个人理解)
Vue的响应式原理本人的理解(若有误,请留言指出,谢谢)当一个 Vue 实例创建时,vue 会遍历 data 选项中的所有的属性,使用 Object.dineProperty 将它们全部转为 getter/setter,能让 Vue 能够追踪依赖,在 property 被访问和修改的时候通知变化。每一个组件实例都有相应的 wather 程序实例, 它会在组件渲染(render)的过程中把属性记录为依赖。当相应的依赖项的 setter 被调用的时候,会通知 watcher 重新计算,从而致使他关联的组件原创 2020-06-22 19:56:53 · 159 阅读 · 0 评论