Vue
关注
分享
扫一扫
文章平均质量分 55
何必诗债换酒钱
From now on, I will expect nothing, and just take what I get.
展开
-
vue-cli 3 以上的项目使用 axios 请求本地 json 文件
vue-cli 3 以上的项目使用 axios 请求本地 json 文件原创 2022-07-10 16:06:36 · 1289 阅读 · 1 评论 -
vue 中 EventBus 实现组件通信
Vue项目中，一般会通过 vuex 进行状态管理，但在一些小项目或者初期没有规划 vuex 的情况下，在开发过程中需要进行组件通信（不止是父子组件），就可以选择通过 EventBus 来解决。EventBus又称事件总线。在 Vue 中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件。具体使用：1、建立一个 bus.js 的文件。import Vue from 'vue'c...原创 2020-12-27 15:49:07 · 217 阅读 · 0 评论 -
vue-property-decorator 使用学习
一、安装与使用一般的，vue 项目中使用 TypeScript 时，会安装 vue-property-decorator 这个库，使用装饰器简化书写。安装：npm i -S vue-property-decorator使用：// 当在vue单文件中使用TypeScript时,引入vue-property-decorator之后,script中的标签就变为这样<script lang="ts"> // 按需引入自己需要的功能模块 import { Component, Vue }原创 2020-11-29 16:19:08 · 1217 阅读 · 0 评论 -
vue自定义指令实现页面添加水印
最近遇到个给页面添加水印的需求（之前没弄过也没见过这种效果），然后组长还要求我使用指令的方式实现，做到水印内容、样式基本可配置，说是以后再有这种需求的话就不用再开发了（嗯，道理我都懂，就是有点儿迷茫…）先去vue官网看看自定义指令：有了钩子和钩子参数，具体的就是怎么实现水印效果了。这里采用的是 canvas 的方式，具体的：'use strict';exports.__esModule = true;/** * 自定义指令'v-watermark' * 可以传入自定义参数（v-wate原创 2020-07-12 12:15:04 · 1470 阅读 · 3 评论 -
vue的组件通信方式小结
https://blog.youkuaiyun.com/lplife/article/details/95927762https://www.cnblogs.com/yszblog/p/10135969.htmlhttps://segmentfault.com/a/1190000019208626#item-7原创 2020-04-01 11:56:10 · 188 阅读 · 0 评论 -
vue 注册全局组件
项目中，可能有些组件的复用性非常高，出现的场景也比较多，这时候，一个个页面去引用组件效率就有些低了。其实我们没有必要在每一个需要的地方使用，而是采取在根组件中注册。根组件中的注册是全局注册。全局注册了之后就可以在根组件下的任何子组件中使用。具体的：1、准备要全局注册的组件 unshelveTip.vue<template> <div class="messageB...原创 2020-01-15 15:19:32 · 232 阅读 · 1 评论 -
element-ui table组件翻页后记录之前页面勾选数据
如图：问题：当上面的表格翻到第二页的时候，第一页勾选的数据就没有了。解决办法：给 table 设置 row-key 属性（值是可以唯一标识该条数据的属性），同时给 type 为 selection 的列设置reserve-selection 属性为 true。附上官方文档里的解释：...原创 2019-11-25 12:07:12 · 1665 阅读 · 0 评论 -
vue-cli 搭建项目打包后element-ui图标异常问题
利用 vue-cli 构建的项目，打包后放到服务器，测试发现，图标显示异常。打开控制台有如下报错：这是因为vue项目打包后样式目录结构变为static/css 导致找不到对应的文件。解决办法：在 build/utils.js 文件如下位置添加一行代码：publicPath: '../../'...原创 2019-11-22 17:08:14 · 1334 阅读 · 1 评论 -
vue wangEditor 实现富文本编辑器组件
父组件 richText.vue<template> <div> <div class="editorBox"> <editor ref="editor" :catchData="catchData" :content="contentHTML"></editor> </div> </div>...原创 2019-10-21 14:10:50 · 890 阅读 · 0 评论 -
element-ui 中 table 设置默认选中
toggleRowSelection(row, selected)接受两个参数，row传递被勾选行的数据，selected设置是否选中注意：调用toggleRowSelection这个方法需要获取真实dom所以需要注册 ref来引用它相关操作：(一).默认选中1.当数据源固定在table的<script>export default { m...转载 2019-09-12 16:15:13 · 9717 阅读 · 1 评论 -
关于vue-cli打包后iconfont路径不对问题
昨天遇到个问题，将 vue 项目（利用 vue-cli 构建的项目，版本是 2.x）打包后，别人在部署的时候发现项目里面图标显示异常，从控制台看，是 iconfont 路径不对。小白的我赶紧拿出小本本做笔记，解决办法如下： 在 build/utils.js 文件中，如下位置添加公共路径属性：publicPath: '../../'...原创 2019-09-12 16:07:18 · 806 阅读 · 0 评论 -
vue+element-ui+axios 实现图片上传小记
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Examples</title><meta name="de...原创 2019-07-26 12:08:21 · 2403 阅读 · 0 评论 -
vue 中 插槽（<slot>） 小记
Vue中插槽主要分为默认插槽、具名插槽、作用域插槽，前两种插槽的内容和样式皆由父组件决定，也就是说显示什么内容和怎样显示都由父组件决定；但是第三种插槽就不同了，作用域插槽的样式由父组件决定，内容却由子组件控制。简单来说：前两种插槽不能绑定数据，作用域插槽是一个带绑定数据的插槽。下面分别看看这三种插槽的使用：1、不带插槽<!DOCTYPE html><h...原创 2019-05-22 14:40:14 · 378 阅读 · 0 评论 -
Vue 中 this.$router 与 this.$route 的区别 以及 push() 方法
官房文档里是这样说明的：通过注入路由器，我们可以在任何组件内通过this.$router访问路由器，也可以通过this.$route访问当前路由可以理解为：this.$router 相当于一个全局的路由器对象，包含了很多属性和对象（比如 history 对象），任何页面都可以调用其 push(), replace(), go() 等方法。this.$route 表示当前路由...原创 2019-03-05 18:28:44 · 91868 阅读 · 10 评论 -
用 vue-cli 搭建快速构建项目
vue-cli 2.x 版本，使用 “vue init webpack project-name” 命令创建。上面命令中的 webpack 表示采用的模板名称，，可以使用"vue list"查看具体有哪些模板：具体过程可参考：https://www.cnblogs.com/liaoanran/p/8042893.html vue-cli 3.0 版本，使用 "vue cre...原创 2019-02-20 10:51:23 · 118 阅读 · 0 评论 -
Vue的字符串模板
这两天看Vue的时候，里面提到字符串模板和非字符串模板，搞的有点儿懵圈，特地查了下，也记录下，免得后面再发生这样的事儿（记性不太好，硬伤呀。。。）以下是教程里的原文：HTML 特性是不区分大小写的。所以，当使用的不是字符串模板时，camelCase (驼峰式命名) 的 prop 需要转换为相对应的 kebab-case (短横线分隔式命名)：Vue.compon原创 2017-12-05 10:38:40 · 13792 阅读 · 7 评论