vue
vue 开发笔记
厚渡
厚积薄发 渡人渡己
展开
-
vue 使用echarts vue使用图表
vue 使用echarts vue使用图表。原创 2022-05-19 13:31:56 · 195 阅读 · 0 评论 -
Import in body of module; reorder to top import/first
Import in body of module; reorder to top import/first在开发中, react或者其他的开发中只要你的const语法写在import之前就会出现这种情况原因// 正确的顺序import React from "react";export const Page1 = () => <h1>我是page1</h1>;// 报错的顺序export const Page1 = () => <h1>.原创 2021-05-19 15:04:24 · 5943 阅读 · 0 评论 -
vue项目如何区分开发、生产和测试环境
在vue项目的日常开发中, 区分开发、测试和生产环境极其重要, 如果不区分就很容易弄混。该如何区分呢?第一步在项目根目录, 注意是项目根目录, 跟vue.config.js、src文件夹同级。文件: .env.productionNODE_ENV = "productionDwp"VUE_APP_TITLE = "productionVUE_APP_TITLEDwp"文件: .env.testNODE_ENV = "productionDwp"VUE_APP_TITLE = "t原创 2021-03-31 10:15:01 · 14117 阅读 · 0 评论 -
less如何注册全局的属性
在web项目的开发中less的使用比较的多那么怎么定义less的全局属性例如:同文件中/* style/config.less */@themeColor: #f37b1d;/* 同文件中 */.item.active { color: @themeColor; border-color: @themeColor;}非同文件中/* 某个不知名的的vue文件 */.item.active { color: @themeColor; border-co原创 2021-03-29 19:04:48 · 5821 阅读 · 0 评论 -
一窜代码注册文件所有组件
import Vue from 'vue'/** * directory=./ 扫描 当前目录下面所有的文件 * useSubdirectories = false, 表示不需要递归扫描所有子文件夹 * regExp=/\.vue$/ 代表扫描所有.vue 结尾的文件 */const context = require.context('./', false, /\.vue$/)/** * context.keys() 返回所有匹配到的文件路径 */context.keys().for原创 2021-03-29 18:36:08 · 5506 阅读 · 0 评论 -
axios 的简单配置
配置axios的文件源码 (简单配置)import axios from 'axios'import { Toast } from 'vant' // 弹框 自行调换import store from '@/store'import router from '@/router'// 全局配置const request = axios.create({ timeout: 10000, // 请求的超时时间 headers: { 'X-Requested-With': 'XM原创 2021-03-11 12:02:16 · 5614 阅读 · 0 评论 -
vuex Modules 设置 使用
vuex Modules 的简绍 与 使用由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:vuex的基本使用 建议先了解这个 再看下文 https://blog.csdn.net/dwp_wz/article/details/1原创 2021-01-29 11:29:40 · 5917 阅读 · 0 评论 -
vue 建立 全局变量 全局访问
有个问题我还是想深入研究一下就是关于 vue 中全局变量这个概念 和实现方法的探讨不少人想都没想, 直接用vuex啊。对啊, 我也是这个样想的 直接用vuex不就啥事没有了。vuex支持 定义 修改。还会实时刷新, 用来记录状态 再好不过但是其他方式 还是有它的优势的。方法一 (Vue.prototype)最简单的方法, 也是最常见的// main.jsimport axios from 'axios'// 挂载全局方法Vue.prototype.$http = axios;Vu原创 2021-01-25 15:11:27 · 6125 阅读 · 0 评论 -
Vuex 的基本使用
过滤器//--------- main.js// 注册import Vue from 'vue';function globalFilters (value) { return '全局过滤器过滤' + value;}// 这里注册就是全局过滤器了Vue.filter('globalFilters', globalFilters);// 使用 filtersData这是局部 globalFilters全局<h2>{{ name | filtersData | filter原创 2020-08-13 12:02:07 · 5737 阅读 · 0 评论 -
vue组件事件执行不了试试这个修饰符 . native
问题:element ui input组件@keyup事件添加没反应// 例如: 在实际开发中 会存在事件没监听到的情况<el-input placeholder="请输入内容" v-model="formDatas.title" @keyup.enter="enter" />// 改成:// 添加 .native 修饰符 可以很好的解决问题<el-input placeholder="请输入内容" v-model="formDatas.title" @keyup.enter.n原创 2021-01-19 11:08:53 · 5697 阅读 · 0 评论 -
vue事件 键盘事件 鼠标事件
vue的键盘事件总结键盘事件@keydown(键盘按下时触发)按下时一直触发@keypress(键盘按住时触发)按住时一直触发, input 不监听 shift@keyup(键盘弹起)弹起时才触发内定特殊按键 (获取按键的键码 e.keyCode)@keyup.13 按回车键@keyup.enter 回车@keyup.up 上键@keyup.down 下键@keyup.left 左键@keyup.right 右键@keyup.delete 删除键标题记录原创 2021-01-19 11:04:58 · 8331 阅读 · 0 评论 -
Js模块化导入导出
Js模块化导入导出导出1:// 1.jsvar a = 1;var b = function(){ console.log(a);}module.exports = { a: a, b: b}导入1:// 1-1.jsvar m1 = require("./1.js")console.log(m1.a); // 1m1.b(); // 1or(es6)// 1-2.jsimport m1 from './1.js'console.log(m1.原创 2021-01-15 16:56:55 · 5922 阅读 · 0 评论 -
WebSocket Socket 聊天室
WebSocket 的简单使用 Nodejs版WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。在 WebSocket API 中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据原创 2021-01-15 10:33:03 · 5692 阅读 · 0 评论 -
js井子棋
js (vue)如何实现井字琪游戏规则我想不用我多说了,本次dome仅仅是作者太无趣了, 写着玩的,不喜勿喷。先给大家看看样子吧。dome介绍:这里实现了 井字棋的博弈与胜负。可以一个人玩。 (自己是X 同时也是 O)不过这样难免显得无趣。我又加了个人机跟你下棋这里面的人机比较笨, 我就不优化了。 (可不要欺负人家呀)话不多说先上源代码。<template> <div class="pages"> <h2>井字棋</h2>原创 2020-11-13 15:40:28 · 5811 阅读 · 0 评论 -
vue如何配置兼容ie es6转es5
vue兼容ie首先我们的明白为什么vue在ie上跑步起来, 这究竟是道德的沦丧还是人性的扭曲。应该都不是 是ie它就是不支持es6, 那么不支持es6, 那es5呢?嗯 算支持吧,那么明白啊了原因 怎么解决的呢?es6 => es5小p给大家介绍一个工具@babel/polyfill// 下载 npmnpm i @babel/polyfill --save配置// 根目babel.config.js文件 (没有自己建)module.exports = { presets:原创 2020-09-23 11:29:12 · 11134 阅读 · 3 评论 -
vue router介绍 vue路由介绍
vue-router-基本使用本次博客只是简单从 定义、 跳转、 传参、 路由守卫、 路由懒加载 这个几个基本的功能简绍, 让不太明白的朋友可以很快明白,并且很快的写出自己能用的路由。如果要更加深入的了解并学习这个路由,我建议去官网 https://router.vuejs.org/zh/guide/这里的叫朋友们去官网绝对不是作者懒 而是官网确实讲的详细 我在写这没什么意思, (搭建项目时就可以把router加进去的没必要再下载)好吧废话不多说,开始介绍下载安装 (详情可以去官网 https原创 2020-09-18 11:24:18 · 5683 阅读 · 0 评论 -
vue基础-keep-alive
keep-alive的使用与理解基本工作原理不太懂用法 (官方)<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中。当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。用法 (个人)<k原创 2020-08-16 17:18:33 · 5996 阅读 · 0 评论 -
vue基础-组件
组件prop 传参数 (父组件传参子组件)提示: v-bind: 简写就是 : v-bind:title="xxx" 就是 :title=:"xxx"// 传参 - 静态参数 <blog-post title="My journey with Vue"></blog-post>// 动态赋予一个变量的值<blog-post v-bind:title="post.title"></blog-post>// 动态赋予一个复原创 2020-08-17 14:38:16 · 5738 阅读 · 0 评论 -
vue-基础-过滤器(filter)
过滤器//--------- main.js// 注册import Vue from 'vue';function globalFilters (value) { return '全局过滤器过滤' + value;}// 这里注册就是全局过滤器了Vue.filter('globalFilters', globalFilters);// 使用 filtersData这是局部 globalFilters全局<h2>{{ name | filtersData | filter原创 2020-08-18 11:26:41 · 5567 阅读 · 0 评论 -
vue-依赖-点击复制
vue-依赖-点击复制 (v-clipboard)知道它的位置在vue 官网 /资源列表/Awesome Vue 里面搜索 clipboard 即可以找到 v-clipboardgithub的地址https://github.com/euvl/v-clipboard下载与使用既然是依赖, 咱们就不用管他深层次的逻辑什么的呢直接下载使用吧// 下载npm install --save v-clipboard// 项目中挂载 main.jsimport Vue from 'vue'原创 2020-08-19 15:17:28 · 5787 阅读 · 0 评论 -
vue配置@根目录
vue-配置-@根目录在日常开发中, 我们导入文件写的是相对位置, 和绝对位置但是有些人可能知道@/store 是什么意思, 但是自己启动一个自己的vue项目却发现不可以??!!什么情况? 这是玄学吗?!不! 不是的许多新手 可能不知道 vue.config.js 的vue配置文件,这个文件得自己创建的将如下代码复制到 vue.config.js 就可以在页面中 使用 @/api 就等于 绝对路径中的 根目录的/api// vue.config.jsconst path = requi原创 2020-08-20 10:11:57 · 11470 阅读 · 0 评论 -
vue 跨域 怎么办?
vue 配置跨域在前端开发中 最讨厌的就是服务器 莫名其妙挂了,其次就是我怎么跨域了。。。。好的, 现在问题出现了, 咱们最关心的是怎么去解决。通常跨域有多种解决方式ps:1、jsonp 大部分html标签的src属性里面的链接都是可以跨域的 (有些黑客可能会依靠这个 攻击你的程序)2、说到里 这个同源政策也就正对浏览器比较严格, 其他如: 服务器与服务器之间就是不存在跨域的 (可以用node坐中间层)3、当项目发布之后大多 都是使用nginx而这次要讲的, 是vue脚手架生成的项目原创 2020-09-16 16:18:10 · 5630 阅读 · 0 评论 -
vue-基础-指令
自定义指令// 定义局部指令Vue.directive('pin', { bind: function (el, binding, vnode) { el.style.position = 'fixed' var s = (binding.arg == 'left' ? 'left' : 'top') el.style[s] = binding.value + 'px' }})// 注册一个全局自定义指令 `v-focus`Vue.directive('focus原创 2020-08-18 11:25:16 · 5531 阅读 · 0 评论