![](https://img-blog.csdnimg.cn/20200728092124876.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
Vue
sun_wei_tao
打杂工程师
展开
-
使用事件总线(eventbus)或自定义事件的问题
事件总线、自定义事件关键点先监听事件再触发事件考虑组件生命周期顺序组件通信<!-- 组件A --><template> <div> <button @click="jump">跳转B</button> {{msg}} </div></template><!-- 组件B --><template> <div> <button @原创 2022-03-22 20:12:56 · 552 阅读 · 1 评论 -
Vue自动化全局注册基础组件
前言项目中有许多通用的组件,为了避免在每个组件都引入一个长列表,可在入口函数注册基础组件准备安装 lodash 库npm i lodash --save入口文件import Vue from 'vue'import { camelCase, upperFirst } from 'lodash/string'const requireComponent = require.context( // 组件目录的相对路径 './components', // 是否查询其子目录原创 2021-08-09 14:20:34 · 209 阅读 · 0 评论 -
Vue使用Axios携带token请求后端接口
携带token请求接口的其中一种方法就是在请求拦截器中将token添加到请求头中在项目中安装axiosnpm i axios对网络请求进行封装import axios from 'axios'const instance = axios.create({ //这里写基础配置})//请求预处理instance.interceptors.request.use( (config) => { const token = getToken() //getToken是在另一原创 2021-03-12 15:00:40 · 4363 阅读 · 21 评论 -
Vue双向绑定实现原理
实现双向绑定需要Object.defineProperty,需要了解劫持对象的属性后获取对象的属性会触发get函数,更改对象属性值会触发set函数<div id="demo"></div><input type="text" id="inp">let obj = {}let demo = document.getElementById("demo")let inp = document.getElementById("inp")Object.defineP原创 2021-03-11 16:34:08 · 86 阅读 · 3 评论 -
解决The HTTP request is not acceptable for the requested resource
前言Vue项目中报错The HTTP request is not acceptable for the requested resource找到public下的index.html在head标签中添加<meta name="referrer" content="no-referrer" />原创 2021-02-04 10:22:56 · 2546 阅读 · 0 评论 -
Vue中websocket的使用方法
初始化WebSocket以及其他可能用到的方法//初始化WebSocketinitWs() { if(typeOf(WebSocket) === "undefined") { //浏览器不支持WebSocket return false } else { this.socket = new WebSocket() //括号中填写后端提供的路径 this.socket.onopen = this.open this.socket.onerror = thi原创 2020-11-30 14:33:05 · 682 阅读 · 0 评论 -
Vue中使用XML和JSON格式互转插件
1.安装依赖npm install x2js2.在入口函数中引入并挂载到原型import x2js from 'x2js'Vue.prototype.$x2js = new x2js()3.使用方法//xml转jsonthis.$x2js.xml2js()//json转xmlthis.$x2js.js2xml()原创 2020-11-30 13:59:44 · 1926 阅读 · 1 评论 -
Vue非父子组件传值之事件总线(eventbus)的使用方式
在入口函数main.js中 挂载一个对象到Vue原型上Vue.prototype.bus = new Vue()//在组件A中监听事件this.$bus.$on('updata', (data) => { console.log(data)})//在组件B中发射事件this.$bus.$emit('updata', data)原创 2020-11-30 13:47:28 · 188 阅读 · 0 评论 -
Vue报错避免冗余导航解决方法
具体报错信息如图解决方案在导航点击事件中加入catch捕获方法click() { this.$router.replace(this.path).catch(err => err)}原创 2020-09-03 09:48:09 · 2949 阅读 · 3 评论 -
Vue-cli搭建的项目中路径别名的配置
路径别名配置分别有两种方式首先展示一下项目结构 对照项目结构配置在项目根目录下创建vue.config.js文件module.exports = { configureWebpack: { resolve: { alias: { "assets": "@/assets", "common": "@/common", "components": "@/components", "network": "@/netwo原创 2020-09-03 08:22:45 · 932 阅读 · 0 评论 -
Vue路由嵌套控制台发出警告Named Route ‘Home‘ has a default child route. When navigating to this named route (:to
问题描述const routes = [ { path: '/', //重定向 redirect: '/home' }, { path: '/home', name: 'Home', component: Home, //路由嵌套 children: [ { path: '', redirect: 'news' }, { path: 'news',原创 2020-08-29 11:42:21 · 720 阅读 · 0 评论 -
微信小程序 函数防抖和函数节流
函数防抖:延迟函数执行,多用于input框输入时,显示匹配的输入内容的情况函数节流:单位时间n秒内,第一次触发函数执行 之后不管触发多少次都不执行。到下一个单位时间n秒时 第一次触发函数执行,多用于页面scroll滚动、窗口resize、防止按钮重复点击函数节流是减少函数的触发频率;函数防抖是延迟函数执行,且不管触发多少次都只执行最后一次小程序中使用函数防抖、节流一般都将这两种方法封装在公用的js中//common.js/*函数节流*/function throttle(fn, interva原创 2020-08-02 15:29:13 · 1323 阅读 · 1 评论 -
Vue-slot插槽的所有使用方法
1.插槽的基本使用<div id="app"> <cpn><button>按钮</button></cpn></div>//定义一个组件<template id="cpn"> <div> <slot></slot> </div></template>const vm = new Vue({ el: '#app', //注册原创 2020-07-22 18:26:14 · 729 阅读 · 4 评论 -
Vue组件中data必须是一个函数
Vue组件中data属性不能为对象原因是对象是引用类型,组件会被多个实例同时引用导致的结果就是多个实例共享一个对象,其中一个组件改变了data对象中的值,其他实例也会受到影响。如图所示,组件复用后,随机点击其中一个组件中的按钮其他两个组件的数值也会受到影响vue组件data为函数的原因:data为函数,通过return返回对象,可以实现每个实例都有自己独立的对象,实例之间互不影响;如下图所示...原创 2020-07-17 15:32:08 · 116 阅读 · 1 评论 -
在VScode中配置创建Vue实例对象简单模板
1.进入VScode界面 点击文件->首选项->用户片段 选择新建全局代码片段文件 命名为vue.json2.在文件中粘贴以下代码{ "Print to console": { "prefix": "vue", "body": [ " <div id=\"app\">", " <h2>{{msg}}</h2>", "原创 2020-06-12 20:13:44 · 449 阅读 · 0 评论