随笔分类 -  Vue

摘要:插槽内容使用方法介绍 父组件中引用支持插槽内容的子组件,形如以下(假设子组件为NavigationLink.vue) <navigation-link url="/profile"> Your Profile </navigation-link> 然后在子组件<template> 模板中使用<slo 阅读全文
posted @ 2021-03-13 12:02 授客 阅读(709) 评论(0) 推荐(0) 编辑
摘要:# 基于VSCode结合Vetur+ESlint+Prettier统一Vue代码风格 阅读全文
posted @ 2021-03-13 10:41 授客 阅读(1111) 评论(0) 推荐(0) 编辑
摘要:vue中引用第三方js总结 By:授客 QQ:1033553122 实践环境 win10 Vue 2.9.6 本文以引用jsmind为例,讲解怎么在vue中引用第三方js类库 基础示例 1、把下载好的js类库放在src/static目录下 2、在src/index.html入口文件中通过script 阅读全文
posted @ 2021-02-20 00:14 授客 阅读(5183) 评论(0) 推荐(0) 编辑
摘要:基于vue+sortable.js实现表格行拖拽 By:授客 QQ:1033553122 实践环境 sortablejs@1.13.0 vue@2.6.11 element-ui@2.13.2 安装sortable.js拖拽库 npm install sortablejs 代码示例 <templat 阅读全文
posted @ 2021-02-05 22:25 授客 阅读(788) 评论(0) 推荐(0) 编辑
摘要:基于vue-codemirror实现的代码编辑器 开发环境 jshint 2.11.1 jsonlint 1.6.3 script-loader 0.7.2 vue 2.6.11 vue-codemirror 4.0.6 element-ui 2.13.1 (使用到element-ui messag 阅读全文
posted @ 2020-07-12 16:12 授客 阅读(19279) 评论(0) 推荐(1) 编辑
摘要:Vue 给mapState中定义的属性赋值报错的解决方案 by:授客 QQ:1033553122 1. 实践环境 Vue 2.9.6 2. 问题描述 <script> import { mapState } from 'vuex'; export default { name: "displayCo 阅读全文
posted @ 2020-06-20 22:01 授客 阅读(3210) 评论(0) 推荐(0) 编辑
摘要:Vue 根据鼠标悬停目标元素上方显示、隐藏指定元素交互实现 By:授客 QQ:1033553122 开发环境 win10 element-ui "2.13.1" vue "2.6.10" 需求描述 如下,鼠标移动到左侧标签名称时,右侧展示删除按钮,否则不显示 关键实现代码如下: <template> 阅读全文
posted @ 2020-06-20 21:55 授客 阅读(5751) 评论(0) 推荐(0) 编辑
摘要:Vue 在父(子)组件引用其子(父)组件方法和属性 by:授客 QQ:1033553122 开发环境 Win 10 element-ui "2.8.2" Vue 2.9.6 父组件代码 <template> <div> <button @click="callChildMethod()">父组件调用 阅读全文
posted @ 2020-06-20 21:50 授客 阅读(2633) 评论(0) 推荐(0) 编辑
摘要:Vue 阻止事件冒泡 by:授客 QQ:1033553122 开发环境 Win 10 element-ui "2.8.2" Vue 2.9.6 事件冒泡简介 如下图,当我们点击页面某个元素时,会产生点击事件,事件由外到内,逐层递进(事件捕获阶段,途中的1->2->3->4),当目标元素捕捉到目标事件 阅读全文
posted @ 2020-06-20 21:37 授客 阅读(18806) 评论(0) 推荐(1) 编辑
摘要:Vue 使用Use、prototype自定义全局插件 by:授客 QQ:1033553122 开发环境 Win 10 node-v10.15.3-x64.msi 下载地址: https://nodejs.org/en/ 实现方式1 1. src目录下新建plugin目录 2. plugin目录下新建 阅读全文
posted @ 2020-05-31 23:40 授客 阅读(2084) 评论(2) 推荐(0) 编辑
摘要:Vue 新增不参与打包的接口地址配置文件 by:授客 QQ:1033553122 开发环境 Win 10 Vue 2.5.2 问题描述 vue工程项目,npm run build webpack方式打包,每次打包后如果需要更改后台接口地址(项目中,接口地址设置成变量,存放在js文件中,需要用到的地方 阅读全文
posted @ 2020-05-31 23:05 授客 阅读(2747) 评论(0) 推荐(0) 编辑
摘要:Vue 打包后自定义样式无法覆盖elementUI组件原有样式问题 by:授客 QQ:1033553122 开发环境 Win 10 node-v10.15.3-x64.msi 下载地址: https://nodejs.org/en/ 问题描述 如下为基于elementUI Dialog编写的一个组件 阅读全文
posted @ 2020-05-31 22:54 授客 阅读(3150) 评论(0) 推荐(0) 编辑
摘要:vscode 常用设置 by:授客 QQ:1033553122 版本 vscode Version: 1.33.1 1. 自动保存文件设置 文件编辑一秒钟过后自动保存 2. 黏贴后、保存完、输入完后自动化格式 3. 代码行可容纳字符数及换行设置 bounded 超过word Wrap Column设 阅读全文
posted @ 2020-05-11 12:30 授客 阅读(3690) 评论(0) 推荐(0) 编辑
摘要:Vue export & export default & import 总结 by:授客 QQ:1033553122 1. 实践环境 Vue 2.9.6 2. 简介 在ES6中,export与export default均可用于导出变量(含常量)、函数、类、文件、模块等,然后在其它文件或模块中通过 阅读全文
posted @ 2020-05-05 11:24 授客 阅读(3837) 评论(0) 推荐(0) 编辑
摘要:结合html2canvas和jsPDF实现html页面转pdf By:授客 QQ:103355122 实践环境 win10 Vue 2.9.6 axios 0.18.0 html2canvas 1.0.0-rc.3 jspdf 1.5.3 安装 html2canvas 进入vue项目所在目录,然后执 阅读全文
posted @ 2020-04-25 19:27 授客 阅读(8118) 评论(0) 推荐(0) 编辑
摘要:Vue 修改网页标题和图标 by:授客 QQ:1033553122 开发环境 Win 10 Vue 2.5.2 需求描述 如下,想更改网页的标题和图标 解决方法 编辑项目根目录下的index.html,如下: 更改标题: 修改<title>元素内容即可 修改图标: 把要修改的图片放static目录下 阅读全文
posted @ 2020-04-20 00:23 授客 阅读(14434) 评论(0) 推荐(2) 编辑
摘要:Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案 by:授客 QQ:1033553122 开发环境 Win 10 Vue 2.9.6 node-v10.15.3-x64.msi 下载地址: https://nodejs.org/en/ 代码片段(router/index.js) 说 阅读全文
posted @ 2020-02-10 18:36 授客 阅读(7874) 评论(0) 推荐(0) 编辑
摘要:Vue 嵌套路由使用总结 by:授客 QQ:1033553122 开发环境 Win 10 node-v10.15.3-x64.msi 下载地址: https://nodejs.org/en/ 需求场景 如下图,我们希望点击导航栏不同菜单时,导航栏下方加载不同的组件,进而展示不同的页面内容 解决方案 阅读全文
posted @ 2020-01-13 12:33 授客 阅读(6491) 评论(0) 推荐(0) 编辑
摘要:Vue项目目录结构梳理 by:授客 QQ:1033553122 1. 结构梳理 . ├── build/ # webpack 配置文件; │ └── ... ├── config/ # 与项目构建相关的常用的配置选项; │ ├── index.js # 主配置文件 │ ├── dev.env.js 阅读全文
posted @ 2019-12-24 12:56 授客 阅读(811) 评论(0) 推荐(0) 编辑
摘要:基于node npm & vue-cli & element UI创建vue单页应用 开发环境 Win 10 node-v10.15.3-x64.msi 下载地址: https://nodejs.org/en/ 安装node 安装vue-cli 1、安装node-v10.15.3-x64.msi 2 阅读全文
posted @ 2019-12-24 12:54 授客 阅读(1046) 评论(0) 推荐(1) 编辑

点击右上角即可分享
微信分享提示