![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
文章平均质量分 60
以实战为线索,记录开发过程中遇到的问题
小于___
十八线小城市搬砖工人
展开
-
JavaScript缓动函数
var Tween = { Linear: function(t, b, c, d) { return c * t / d + b; }, Quad: { easeIn: function(t, b, c, d) { return c * (t /= d) * t + b; }, easeOut: function(t, b, c, d) { return - c * (t原创 2021-09-20 10:15:28 · 752 阅读 · 0 评论 -
MVVM原理的理解和实现
MVVM框架概念1.概念经典MVVM模型图,由 View、Model、ViewModel 三部分组成。View:视图模版,负责将Model转化为UI,并展示;Model:数据模型,根据业务逻辑操作数据;ViewModel:通过*双向绑定*连接了View和Model;2.原理在MVVM的架构中 Vue.js 的原理是对数据(Model)进行劫持(Object.defineProperty( )),在数据发生变化时,数据会触发劫持时绑定的setter方法,对视图(View)进行更新。3.对比原创 2021-01-25 09:19:15 · 1083 阅读 · 0 评论 -
Vue-Router路由使用详解(二)
文章目录1.路由守卫2.路由元信息3.过渡动效4.数据获取5.滚动行为6.路由懒加载7.导航故障1.路由守卫全局前置守卫全局前置守卫的应用场景之一就是在触发路由跳转后,对其拦截判断是否登陆或登陆是否失效,根据判断结果进行处理。router.beforeEach((to, from, next) => { // 进行逻辑判断,demo const isLogin = localStorage.getItem("isLogin"); // 这里的meta就是下边要说的“路由元信息”原创 2021-01-21 11:37:01 · 448 阅读 · 0 评论 -
Vue-Router路由使用详解(一)
0.安装及使用npm install vue-router --save<!-- 使用 router-link 组件来导航 --><router-link to="/index">Index</router-link><!-- 路由出口,路由匹配到的组件将渲染在这里 --><router-view></router-view>router/index.tsimport Vue from 'vue'import Vue原创 2021-01-21 11:34:29 · 473 阅读 · 0 评论 -
vue+typescript解决无法使用路由组件内守卫
vue + typescript 开发环境组件内无法调用路由钩子:beforeRouterEnter等守卫需要向Component注册hooksimport { Vue, Component } from "vue-property-decorator";import { Divider } from "ant-design-vue";import { RouteConfig } from "vue-router";import { getUserList } from "@/api/use.原创 2021-01-20 22:44:38 · 714 阅读 · 3 评论 -
Vue路由跳转传参
该部分内容即官方文档中的“编程式导航”vue路由传参是在路由跳转时传递参数。传参方式分为params和query。params传参分为url中显示参数和不显示参数两种方式。官方文档本部分内容为官方文档中编程式导航的 router.push() 部分。router.replace() 的用法同 router.push() ,唯一区别就是replace不会向history中添加记录。router.go() 用法同 window.history.go(n)1. 通过path匹配路径:1. 通原创 2021-01-13 22:47:45 · 274 阅读 · 0 评论 -
axios拦截器以及全局设置loading
涉及到一下点:vuex状态机axios拦截器antd的Spin组件请求拦截器在请求发送前进行拦截,按需求进行设置操作,比如请求需要携带token。在请求拦截器中统一设置。axios.interceptors.request.use( config => { // 获取到请求参数,按需设置 const token = sessionStorage.getItem("token"); if (token) { Object.assign(conf.原创 2021-01-09 22:32:38 · 987 阅读 · 1 评论 -
Vue的Mixins详解及用法
mixins 选项接收一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项,这些选项将会被合并到最终的选项中,使用的是和 Vue.extend() 一样的选项合并逻辑。也就是说,如果你的混入包含一个 created 钩子,而创建组件本身也有一个,那么两个函数都会被调用。Mixin 钩子按照传入顺序依次调用,并在调用组件自身的钩子之前被调用。如果发生合并冲突,则以组件对象为主。1.使用场景多个业务组件的数据或者逻辑相似的时候,可以将公共部分抽取。在各个业务组件中通过 mixins .原创 2020-12-27 12:41:58 · 2153 阅读 · 0 评论 -
Vue自定义指令以及自定义指令的模块化
如果Vue内置的指令不能满足功能需求的时候,可以进行自定义指令。自定义指令的使用场景就是操作基础DOM,实现功能需求。官方文档1.关于自定义指令的钩子函数自定义指令的五个钩子函数都是可选的,比如 v-once 指令。bind指令第一次绑定到元素上;只调用一次;可以做相关初始化的操作;inserted被绑定的元素插入到其父元素节点时调用;update当所在组件的VNode更新时调用;但是update和VNode的更新顺序不定,所以需要比较;componentUpdat.原创 2020-12-26 12:18:29 · 296 阅读 · 0 评论 -
Vuex状态机的理解和使用
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。以上是官方套话,详情直接看官网。1.对状态机vuex的理解是一种状态管理模式,抽取共享状态保证状态是可预测的变化单向数据流官方祖传的单向数据流图。官方祖传的单向数据流图。官方祖传的单向数据流图。2.安装npm install vuex --save3.vuex的基础结构import Vue from 'vue'im.原创 2020-12-24 22:15:42 · 658 阅读 · 0 评论 -
vue-property-decorator装饰器
vue-property-decorator装饰器直接上代码,针对每个装饰器都有注释。<!-- fatner --><template> <div> <div>我是父组件的: {{models}}</div> <child :params.sync="params" v-model="models" @emit-test="hanlerEmit1" @emitTestName="handlerEmit2">&l原创 2020-12-23 21:42:55 · 351 阅读 · 0 评论 -
Vue的几种通信方式
组件间通信Vue也是从基础开始学起,边学边整理,同类文章很多,本文仅供参考。如有不到之处,请指正。组件关系:A/B、B/C、B/D为父子关系; C/D为兄弟关系; A/C为隔代关系;其中隔代关系可能隔多代;文章目录组件间通信1.父子组件通信1.props/$emit????????2.provide/inject3.$ref4.\$parent/$children5.\$attrs/$listeners2.兄弟组件通信1.eventBus2.vuex3.隔代组件通信1.\$attrs/$l原创 2020-12-23 15:01:27 · 198 阅读 · 0 评论 -
Vue函数式组件
函数式组件 Functional用法,在template标签使用 functional<template functional> <div :class="['y-divider', 'y-divider-' + props.direction]"> <div :class="['y-divider__text', 'is-' + props.position]" v-if="slots().default && prop原创 2020-12-18 10:37:06 · 102 阅读 · 1 评论 -
TypeScript 中 any 和 unknown 的区别
译者: 在实际场景中, 很少看到有人在 Typescript 中使用 unknown , 使用unknown 可以保证类型安全,使用 any 则彻底放弃了类型检查 , 在很多情况下, 我们可以使用 unknow 来替代 any , 既灵活, 又可以继续保证类型安全.原文链接在我们的项目中实现 TypeScript 时,我们努力写出最好的类型。我们可能经常觉得使用any类型违背了 TypeScript 的目的,确实如此。还有其他一些类型值得了解,我们可能会发现它们在尝试不使用 any 时很有用,比如 .转载 2020-12-16 16:42:33 · 1928 阅读 · 0 评论 -
Vue的数据双向绑定原理及实现
MVVM框架概念1.概念经典MVVM模型图,由 View、Model、ViewModel 三部分组成。View:视图模版,负责将Model转化为UI,并展示;Model:数据模型,根据业务逻辑操作数据;ViewModel:通过*双向绑定*连接了View和Model;2.原理在MVVM的架构中 Vue.js 的原理是对数据(Model)进行劫持(Object.defineProperty( )),在数据发生变化时,数据会触发劫持时绑定的setter方法,对视图(View)进行更新。3.对比原创 2020-12-12 12:27:30 · 1780 阅读 · 2 评论 -
ElementUI Tree组件单击双击操作
场景业务需要,要求ElementUI的Tree组件同时拥有单击和双击两种事件。官方组件API只提供了单击事件,双击事件则需要自己扩展。(扩展不是本篇的重点)问题扩展好双击事件,代码如下:<template> <div> <el-tree :data="data" node-key="id" :props="defaultProps"> <span slot-scope="{ node, data }"> <原创 2020-12-10 14:30:04 · 1581 阅读 · 0 评论 -
Mac安装vue-cli3时报gyp: No Xcode or CLT version detected!
产生原因缺了xcode 的CLI 工具解决办法sudo rm -rf $(xcode-select -print-path)xcode-select --install原创 2020-11-05 19:45:34 · 166 阅读 · 0 评论 -
安装node-sass,报错Error: Node Sass version 5.0.0 is incompatible with ^4.0.0
npm uninstall node-sassnpm install node-sass@4.14.1原创 2020-11-02 19:21:54 · 1002 阅读 · 0 评论 -
vue安装sass后,报错TypeError [ERR INVALID ARG TYPE]: The “path“ argument must be of type string
产生原因安装sass的时候,默认安装最新版本。版本号过高,导致的报错解决方法降低sass-loader版本号npm uninstall sass-loadernpm install sass-loader@7.3.1 --save-dev这个问题关联上一个vue的报错。原创 2020-11-02 19:31:35 · 456 阅读 · 0 评论