vue
关注
分享
扫一扫
vue
学魔学编程
这个作者很懒，什么都没留下…
展开
-
农历和阳历互相转换
代码】农历和阳历互相转换。原创 2022-07-24 19:14:56 · 887 阅读 · 0 评论 -
vue表单收集v-model以及表单提交
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https:/.原创 2021-12-03 13:37:13 · 722 阅读 · 0 评论 -
Vue监测数据set的应用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https:/.原创 2021-12-03 12:15:23 · 141 阅读 · 0 评论 -
watch和computed过滤数据和排序的应用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https:/.原创 2021-12-02 12:24:22 · 239 阅读 · 0 评论 -
vue样式的绑定和class的绑定
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https:/.原创 2021-12-02 09:16:57 · 91 阅读 · 0 评论 -
vue导航守卫
确保要调用 next 方法，否则钩子就不会被 resolved。一个简单实用的小例子const router = new VueRouter({ ... }) //这是路由配置，我就不多说了const whiteList = ['/error', '/register/regindex', '/register/userauthent', '/register/submit'] // 路由白名单vueRouter.beforeEach(function(to,from,ne...原创 2021-11-16 21:53:32 · 126 阅读 · 0 评论 -
vue3axios跨域
// vue.config.jsconst path = require("path");const webpack = require("webpack");module.exports = { // 项目部署的基本路径 // 默认假设你的应用将会部署在域名的根部 // 比如，https://www.vue-cli.com/ //如果你的应用是部署在一个子路径下，那么你需要在这里指定子路径，比如，如果你部署在 https://www.my-vue.com/my-ap.原创 2021-11-15 16:47:39 · 1869 阅读 · 0 评论 -
vscode保存代码取消单引号变成双引号和逗号
"vetur.format.defaultFormatterOptions": { "prettier": { "semi": false, "singleQuote": true, "trailingComma": "none" } }原创 2021-11-15 16:15:13 · 1290 阅读 · 0 评论 -
vue自定义指令的用法directives
内部指令directives:{正常模式/* color:{ //当指令第一次被绑到元素上会触发bind函数 bind(el,binding){ el.style.color=binding.value; }, //在dom更新时会触发update函数 update(el,binding){ el.style.color=binding.value; } } */...原创 2021-11-12 17:17:31 · 536 阅读 · 0 评论 -
vue的插槽slot的用法
APP父组件引入子组件 通过卡槽添加数据app.vue<template> <div id="app"> <Article> <template #title> <h1>标题</h1> </template> <template v-slot:content> <h2>内容</h2> .原创 2021-11-12 17:10:51 · 83 阅读 · 0 评论 -
vue动态切换组件component以及keep-alive的运用
动态切换组件用<component :is="componentName"> </component>componentName是组件名称案例代码:<template> <div id="app"> <h2>根组件</h2> <input type="button" value="点击" @click="showComponents"> <hr /> <component :is.原创 2021-11-12 13:24:16 · 2250 阅读 · 0 评论 -
vue中axios基本用法
1.首先安装axios：1)：npm install2)：npm install vue-axios --save3)：npm install qs.js --save //这一步可以先忽略，它的作用是能把json格式的直接转成data所需的格式2.安装成功后，在main.js页面引用：import Vue from 'vue'import axios from 'axios'Vue.prototype.$axios = axios //全局注册...原创 2021-11-10 21:52:50 · 820 阅读 · 0 评论 -
vue通过ref调用子组件的属性或者函数
<left ref="myLeft"></left> handleChangeNum(){ this.$refs.myLeft.handleChangeNum(); //调用组件的实例方法 this.$refs.ff.style.color="red" //更改组件的dom元素 }原创 2021-11-10 19:40:22 · 1094 阅读 · 0 评论 -
命令行换vue版本
第一步 卸载当前vuenpm uni vue -S第二步 安装你指定的版本 比如 2.2.6npm i vue@2.2.6原创 2021-11-10 18:38:49 · 599 阅读 · 0 评论 -
vue兄弟组件之间传值 eventBus
发送方组件代码<template> <div> <input type="button" value="left组件发送信息" @click="handleSendMsg" /> </div></template><script>import bus from "@/components/eventBus.js";export default { name: "left", data(...原创 2021-11-10 17:40:59 · 295 阅读 · 0 评论 -
vue2父向子传值props ，子向父用自定义事件$emit
示例代码父组件代码<template> <div class="hello"> <h1>{{ msg }}</h1> <son :message="message" :userInfo="userInfo" @handleChangeNum="getChangeNum"></son> <h3>父组件显示 {{count }} </h3> <...原创 2021-11-10 17:09:56 · 339 阅读 · 0 评论 -
vue2中的props的使用
<template> <div><input type="button" value="点击" @click="changeCount"><p> {{ count1 }} </p> </div></template><script>export default{ name:"count", props:{ count:{ type:Nu.原创 2021-11-09 22:25:07 · 5501 阅读 · 2 评论 -
vue2组件引入
<template> <div class="hello"> <h2> {{ userName }} </h2> <input type="button" value="修改用户名" @click="changeName"> <left class="tt"></left> <right class='tt'/> <img :src="tt" alt=""> </.原创 2021-11-09 19:40:29 · 3884 阅读 · 0 评论 -
vscode安装插件path autocomplete设置 方便路劲引入
在 settings.json 添加一下设置代码 "path-autocomplete.pathMappings":{ "@/":"${folder}/src/" }, "path-autocomplete.extension0nImport":true,输入 '@/' 会自动弹出路径选择原创 2021-11-09 18:57:40 · 1021 阅读 · 0 评论 -
vue3创建过程
src中的assets目录 是存放一些静态资源 例如CSS样式 图片的资源componets是存放可复用的组件的目录main.js是程序的入口文件原创 2021-11-09 16:04:33 · 86 阅读 · 0 评论 -
vue中的计算属性 computed的应用案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src=.原创 2021-11-09 00:48:25 · 251 阅读 · 0 评论 -
vue中的监听器的利用与用法watch
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src=.原创 2021-11-08 23:57:39 · 119 阅读 · 0 评论 -
vue中的过滤器的使用 filter
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src=.原创 2021-11-08 22:40:30 · 130 阅读 · 0 评论 -
vue实现简单的添加和删除
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 引.原创 2021-11-08 21:10:15 · 1539 阅读 · 0 评论 -
v-model的常用用法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src=.原创 2021-11-08 13:55:34 · 2758 阅读 · 0 评论 -
vue中v-if与v-show的区别以及使用场景以及v-for
区别1.手段：v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏； 2.编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换； 3.编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件原创 2021-11-08 13:54:55 · 181 阅读 · 0 评论 -
vue的v-html，v-text指令,以及按键修饰符和事件修饰符的运用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src=.原创 2021-11-06 09:05:35 · 295 阅读 · 0 评论 -
vscode下载慢解决办法
vscode下载慢解决办法最近vscode国内下载特别慢，解决办法是吧路径换成国内镜像地址。如下图，把下载路径的az764295.vo.msecnd.net改成vscode.cdn.azure.cn即可，修改后的路径为https://vscode.cdn.azure.cn/stable/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/VSCodeUserSetup-x64-1.52.1.exe...原创 2021-10-21 23:35:27 · 1036 阅读 · 1 评论 -
vue打包不显示图标
在bulid 目录下找到utils.js文件 找到如下代码 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath: '../../' //添加这行代码 }) } else { return ['vue-style-loade..原创 2021-08-07 20:51:04 · 196 阅读 · 0 评论 -
vue中elementUI的Loading.service函数的封装
import { Loading } from 'element-ui';const loadOption={fullscreen: true ,lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'}let loadingInstance;export default class loadEvents { constructor(vueThis){ .原创 2021-07-16 14:07:55 · 4627 阅读 · 0 评论 -
axios拦截器之axios.interceptors.request.use和axios.interceptors.response.use
简单配置：import axios from 'axios'import { Message, Loading} from 'element-ui'const loadOption={fullscreen: true ,lock: true, text: '拼命加载中......', spinner: 'el-icon-loading', background: 'rgba(255, 255, 255, 0.5)'}let loadingInstance=null;axios.in原创 2021-07-16 14:04:43 · 3089 阅读 · 0 评论 -
vue项目的axios请求配置interceptors.js
import axios from 'axios'import store from '@/store'import router from '@/router'import { Message, Loading} from 'element-ui'const errorCode = { '401': '请重新登录', '403': '对不起，您没有权限访问', '500': '系统异常，无法处理，请退出重试', '1001': '参数不完整，无法处理，请退出重试'}.原创 2021-07-13 15:10:32 · 563 阅读 · 0 评论 -
时间组件moment的使用
安装moment：npm install moment --savemain.js引入：import moment from 'moment'; // 时间处理Vue.prototype.$moment = moment;使用： //获取年月份时分秒 2020-11-10 12:12:22 this.$moment().locale("zh-cn").format("YYYY-MM-DD HH:mm:ss") //获取指定时间戳 this.$moment('2020-..原创 2021-07-13 14:55:56 · 4736 阅读 · 0 评论 -
vue的axios数据请求以及接口封装
第一步：'use strict'const merge = require('webpack-merge')const prodEnv = require('./prod.env')module.exports = merge(prodEnv, { NODE_ENV: '"development"', API_HOST: '"/apis"'})第二步：'use strict'module.exports = { NODE_ENV: '"productio.原创 2021-07-13 14:45:21 · 685 阅读 · 0 评论 -
Vue使用NProgress
下载插件：npm install --save nprogressmain.js：import VueClipboard from 'vue-clipboard2'import NProgress from 'nprogress'NProgress.configure({ easing: 'ease', // 动画方式 speed: 500, // 递增进度条的速度 showSpinner: false, // 是否显示加载ico trickleSpeed: 200,原创 2021-07-12 21:27:20 · 123 阅读 · 0 评论 -
Vue导出excel案例
先NPM相关导出模块：npm install file-saver --save代码：import FileSaver from "file-saver";import XLSX from "xlsx";export default { export (obj) { //拿到要导出的表格数据 完成导出 let ws = XLSX.utils.aoa_to_sheet(obj.table); //添加表格数据 let wb = XLSX.utils.book_n.原创 2021-07-11 19:35:35 · 108 阅读 · 0 评论 -
VUE 使用插件vue-clipboard2复制内容至剪切板
第一步：安装插件：npm install --save vue-clipboard2main.js：import Vue from 'vue'import VueClipboard from 'vue-clipboard2'Vue.use(VueClipboard)代码使用：此代码用的是ElementUI的组件库 <el-button type="primary" @click="handleCopyData">复制</el-button> h原创 2021-07-12 21:08:10 · 510 阅读 · 0 评论 -
ElementUI选择时间组件年月日时分秒
122222原创 2021-07-10 08:10:45 · 3290 阅读 · 0 评论