![](https://img-blog.csdnimg.cn/20200423191009989.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue2全家桶
武林至尊,宝刀React,
号令天下,莫敢不从,
Vue不出,谁与争锋
whyfail
编程界崇尚以简洁优雅为美,很多时候,如果你觉得一个概念很复杂,那么很可能是你理解错了!
展开
-
Mixin vs Hook:Vue中的功能复用技术对比
在Vue开发中,实现代码的可重用性和功能复用是开发者关注的重点。为此,Vue提供了两种主要的技术实践方式:Mixin(混入)和Hook(钩子)。本文将介绍这两种技术的概念及其在Vue中的应用,并对它们的优缺点进行对比分析。原创 2023-05-18 20:15:00 · 1868 阅读 · 0 评论 -
Vue-pdf预览pdf文档
一款在vue环境进行pdf渲染到 canvas 的库,和`react-pdf`效果相同原创 2022-09-01 16:03:58 · 1542 阅读 · 0 评论 -
Vue2适配方案:postcss-px-to-viewport
基于vue2的vw适配方案原创 2022-06-01 13:33:28 · 2350 阅读 · 0 评论 -
项目运行时:Syntax Error TypeError Cannot read property ‘parseComponent‘ of undefined
vue2项目会出现的小问题原创 2022-06-01 09:29:06 · 2975 阅读 · 1 评论 -
当同时碰到v-for和v-if
一、问题起源在vue实际开发中,我们避免不了会使用v-for和v-if来操作数据但是v-for和v-if同时使用时,有一个先后运行的优先级,v-for比v-if的优先级更高这就说明在v-for的每次循环运行中每一次都会调用v-if的判断,所以不推荐v-if和v-for在同一个标签内同时使用。为了避免上述情况的发生,我们通常会采用如下的两种方法:二、解决方法1ul和li搭配使用,或者是渲染父级标签下的子标签,可以使用如下方法:<ul v-if="state"&.原创 2020-05-14 13:33:06 · 982 阅读 · 0 评论 -
Vue路由懒加载及组件懒加载
一、为什么要使用路由懒加载为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题。二、定义懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载。三、使用常用的懒加载方式有两种:使用vue异步组件 和 ES中的import1、未用懒加载,vue中路由代码如下import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorl.原创 2020-05-10 10:12:55 · 1396 阅读 · 0 评论 -
一次搞定Vue组件传值
1.父组件向子组件传值一般会在子组件里面定义props来做接收,这是比较常见的情况这是父组件<template> <div> <div>我是父组件</div> <div>我发送给第一个组件的信息是:{{msg}}</div> <div> <div id="...原创 2020-05-03 15:50:13 · 1525 阅读 · 0 评论 -
谈谈Vue路由传参
一、使用router-link进行路由导航,传递参数父组件中:使用<router-link to="/需要跳转的路由路径/需要传递的参数"></router-link>标签进行导航child是子页面路由路径,123是需要传递的参数子组件中:使用this.$route.params.num来接收路由参数此时,页面上渲染出路由传递过来的参数num,呈现...原创 2020-05-03 13:13:55 · 1573 阅读 · 0 评论 -
搞定Vue-Slot 插槽
一、插槽更新:2.6.0 中,具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)废弃:slot 和 slot-scope特性二、插槽目的个人理解:子组件提供插槽位置(相当于占位),父组件任意提供插槽内容(相当于如何使用这个位置)三、插槽内容官方:Vue 实现了一套内容分发的 API,将 <slot>元素作为承载分发内容的出口。自己:...原创 2020-05-03 09:47:06 · 1206 阅读 · 0 评论 -
Axios
1、简介Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。简单来说就是前端最火最简单的一个 http 请求解决方案。2、安装npm install vuex --save3、功能从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据...原创 2020-04-26 22:07:14 · 1346 阅读 · 0 评论 -
Vue中报错Uncaught (in promise)解决方案
今天在写vue项目配置好路由点击菜单时,突然在控制台报错。错误信息如下:Uncaught (in promise) NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated"};解决方法一:经过多次尝试发现原因可能是 在重新下载依赖包时,安装的vue-router还是之前...原创 2020-04-25 20:29:56 · 20691 阅读 · 0 评论 -
Vuex(二)修改状态 - 传递参数 - 模块组
一、mutations-getters-actions异步1、mutations(修改状态)(1)template中直接使用$store.commit( )触发// template<button @click="$store.commit('ADD')">+</button>// src/vuex/store.jsconst mutations = {...原创 2020-04-23 20:45:23 · 1884 阅读 · 0 评论 -
Vuex(一)Vuex基本使用-状态对象的获取
一、背景引言1、vuex是什么?vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。chrome安装调试工具 devtools2、单向数据流示意图说明:State:驱动应用的数据源(单向数据流)View:以声明方式将 state 映射到视图(静态显示出来的数据源)Ac...原创 2020-04-23 19:06:46 · 2773 阅读 · 0 评论 -
Vue-Router(二)命名路由-过渡动画-mode与404-路由钩子-路由懒加载
一、 命名路由-命名视图-重定向-别名1、命名路由给一个路由命一个唯一的名称,然后跳转调用这个名称即可。(1)在src/router/index.js中加一个带name的路由,代码如下:{ path: 'one', // 子页面1 name: 'one', // 路由名称-命名路由 component: One // 页面组件}(2)在src/comp...原创 2020-04-22 19:48:31 · 1434 阅读 · 0 评论 -
Vue-Router(一)路由配置-页面跳转-子路由-路由传递参数
1、快速入门一、简单介绍vue-router是vue官方的路由解决方案,简单易用二、安装vue-router是一个插件包,需要用npm来进行安装的。如果采用vue-cli构建初始化项目会提示安装,也可以自己使用命令安装:npm install vue-router --save三、解读核心文件用vue-cli构建项目之后,在src/router/index.js文件...原创 2020-04-22 19:13:55 · 16602 阅读 · 0 评论 -
NPM 更换淘宝镜像源
打开终端npm install -g cnpm --registry=https://registry.npm.taobao.org默认源npm config set registry https://registry.npmjs.org换源npm config set registry https://registry.npm.taobao.org配置后通过以下方...原创 2020-04-21 23:42:46 · 336 阅读 · 0 评论 -
Vue-Cli2 安装- 初始化项目- 项目结构
一、安装安装vue-cli的前提是你已经安装了npm,在命令行工具中输入npm -v 命令来检测npm的安装以及版本情况。1、npm安装node下载地址: http://nodejs.cn/download/安装成功提示:npm -v3.10.52、vue-cli安装全局安装vue-cli,命令行:npm install vue-cli -gPS:-g代...原创 2020-04-21 18:51:00 · 1269 阅读 · 0 评论 -
Vue(三)制作模板-插槽slot
1、制作模板vue中的模板使用template来实现1、选项模板<div id="app"></div><script type="text/javascript"> // 实例化 new Vue({ el: '#app', data: { message: 'hello'...原创 2020-04-21 18:27:14 · 1694 阅读 · 0 评论 -
Vue(二)常用选项-实例事件-自定义指令-组件基础
1、常用选项vue有许多配置选项,这节之类出常用的一些选项1、computed计算属性:主要是对原数据进行改造输出。改造输出:包括格式化数据(价格,日期),大小写转换,排序,添加符号computed: { newPrice () { return '¥' + this.price + '元'; }}2、methods方法属性:用于绑定ht...原创 2020-04-21 17:58:54 · 1096 阅读 · 0 评论 -
Vue(一)Vue基本概念-内部命令-生命周期
一、Vue.js概念简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。简单小巧是指Vue.js压缩后大小仅有17KB。所谓渐进式(Progressive),就是你可以一步一步、有阶段性地来使用Vue.js,不必一开始就使用所有的东西。二、Vue.js使用直接通过script加载CDN文件<!--自动识别最新稳定版本的 Vue.js -->&l...原创 2020-04-18 05:57:36 · 1184 阅读 · 0 评论