VUE
A-Tione
前端工作人员
展开
-
在nuxt.js框架下阻止路由跳转
前言在nuxt.js框架中,是自带了路由处理的,但是它自带的路由功能并没有vue-router的功能强大。例如我们的要做一个路由守卫,在路由发生跳转前做一些判断,如果判断不通过则不给路由跳转。怎么做?仅仅只用nuxt.js框架很难解决,但我们可以通过nuxt.js中的plugin插件系统引入vue-router。解决文件路径:src/plugins/router.jsexport default ({ app ,store }) => { app.route.原创 2021-04-29 09:51:24 · 2105 阅读 · 0 评论 -
在vue框架中配置测试覆盖率
什么是测试覆盖率这个要从测试的流派说起了,测试分为黑盒测试(不知道代码如何写的)、白盒测试(知道代码是如何写的)。测试人员通常进行黑盒测试,在集成环境下参照写好的测试用例,用鼠标点点点跑流程。按测试代码的颗粒度来划分,也可以叫集成测试,属于最大颗粒度的测试。而开发人员对自己的代码进行测试,叫做白盒测试,一般是单元测试,属于是最小颗粒度的测试,对函数进行断言。对一个项目来说最好是既要有黑盒测试(人肉测试)又要有白盒测试(机器测试,代码测代码)。而测试覆盖率指的就是通过写单元测试测试项目代码原创 2020-07-04 10:51:45 · 2553 阅读 · 0 评论 -
在Vue中,如何用lib模式发布自己的库代码
使用lib模式打包在vue-cli官网中有指出如何使用lib模式构建代码。当你运行vue-cli-service build时,你可以通过--target选项指定不同的构建目标。它允许你将相同的源代码根据不同的用例生成不同的构建。lib模式默认是不含有Vue的,若原代码中有vue,则会将原代码中的vue删除。注意对 Vue 的依赖在库模式中,Vue 是外置的。这意味着包中不会有 Vue,即便你在代码中导入了 Vue。如果这个库会通过一个打包器使用,它将尝试通过打包器以依赖的方式...原创 2020-06-29 16:55:33 · 4202 阅读 · 0 评论 -
Vue中的六种过渡动画解析
过渡CSS的类名:v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。 v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。 v-enter-to:2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生...原创 2020-05-05 21:41:09 · 1482 阅读 · 0 评论 -
Vue Composition API 原文中文翻译
摘要:Composition API简介:一组基于功能的附加API,允许灵活地组成组件逻辑基本例子:<template> <button @click="increment"> Count is: {{ state.count }}, double is: {{ state.double }} </button><...翻译 2020-04-22 22:16:23 · 1425 阅读 · 0 评论 -
vue中函数回调传值
在业务开发中,有时候会碰到一种情况:组件内部会触发一些事件用来请求新的数据,数据请求到后将新的数据继续在组件内进行处理。这个场景我们有三种方式可以实现它:将数据请求写在组件内部,缺点不好维护,违反了单项数据流的原则。 通常我们可以通过this.$emit() 将事件传递到父组件中,让父组件请求数据,然后再传值给子组件,子组件拿到数据后进行下一步处理。适用大部分场景。 在父组件中写一个数据请...原创 2020-04-20 20:31:30 · 3793 阅读 · 0 评论 -
如何在vue中,不知道有几层v-for的情况下实现递归组件?
有一个需求,需要我们渲染一个未知层级关系的cascader级联选择器。这样在template模版当中是无法写死v-for嵌套的,因为数据是活的,可能三个嵌套子集,也有可能有四个。下面是element-ui当中的例子:那么我们如何解决这个需求呢?用递归组件。html:<t-cascader :source="source">联级选择框</t-cascader...原创 2020-04-12 15:38:29 · 4859 阅读 · 0 评论 -
Vue项目中引用svg时webpack如何配置?
引入svg的配置当我们项目中遇到需要引用图片目录下svg图片的需求时,如果图片不多我们可以直接在项目文件中引用:<script lang="ts"> import svg from './assets/icons/label.svg' console.log(svg) export default { // ... }<...原创 2020-03-17 11:14:49 · 2230 阅读 · 0 评论 -
Vue单文件组件TypeScript写法
最近学习TypeScript(简称ts),用vue2.6.11+TypeScript3写了一个本地记账项目,ts在vue的单文件模版中写法和传统vue单文件模版挺不一样的。在此记录一下其中的区别。ts是js的超集,严格的js,变量定义输入输出都需要规定相应js类型。到目前vue单文件模版一共有三种方式书写。传统写法,data() {return{}}。 <script lang="...原创 2020-03-17 09:51:00 · 3936 阅读 · 0 评论 -
vue项目双语国际化——使用vue-i18n
前言最近在维护的项目明年可能需要支持双语国际化,于是便提前找了些资料了解了一番。i18n是市面上比较成熟的国际化库,因此我决定用vue + vue-i8n 技术栈先做一个demo。一、下载vue-i8nNPMnpm install vue-i18nYarnyarn add vue-i18n二、在main.js文件中配置i18n如果在一个模块系统中...原创 2019-12-21 18:33:28 · 1531 阅读 · 0 评论 -
vue组件模板加载出现同名的情况如何处理 For recursive components, make sure to provide the "name" option
昨天在用uni-app写h5项目时出现了一个问题:报错:Unknown custom element: <swiper-img> - did you register the component correctly? For recursive components, make sure to provide the "name" option.本身uni-app中自带了名...原创 2019-03-02 10:49:57 · 5830 阅读 · 0 评论 -
Vue生命周期钩子
刚开始接触vue时对生命周期这个概念还不清晰,随着用vue做了四五个项目,对生命周期的概念算理解了不少,乘现在印象深刻的时候用文字将我个人对vue生命周期的理解记录下来。目前vue最新稳定版本为:2.5.16,他的生命周期一共有十一个:beforeCreate在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。cre...原创 2019-08-02 12:41:18 · 248 阅读 · 0 评论 -
Vue Router路由搭建
用Vue.js + Vue Router 创建单页面应用,是很方便的。使用Vue.js,我们通过组合组件来组成应用程序,当你要把Vue Router 添加进来,我们需要做的是将组件(components)映射到路由(routes),然后告诉Vue Router 在哪里渲染它们。搭建一个简单路由的例子:HTML<script src="https://unpkg.com/vue/...原创 2019-08-15 11:24:46 · 503 阅读 · 0 评论 -
用vue实现一个todoMVC备忘录
此项目是基于vue官网上的todoMVC示例仿写而成。基于MVC设计思想,用到了vue2中的双向绑定、侦听器深度监听、计算属性、过滤器、自定义指令,以及基于localStorage的永久化存储和路由监听触发事件。此项目覆盖了vue的大部分基础知识。功能点:刷新页面,列表中的内容不会丢失,保持刷新前的状态。 input输入框输入内容,回车后内容渲染到input下方列表,原input...原创 2019-09-07 17:44:25 · 710 阅读 · 1 评论 -
什么是Vuex?
Vuex是专门为Vue.js应用程序开发的状态管理模式。 它采用集中式储存管理类应用的所有组件的状态,并以响相应的规则保证状态以一种可预测的方式发生变化。另外:理解Vuex的前提需要掌握vue的相关基础知识。Vuex相关基础概念:例子:new Vue({ // state data () { return { count: 0 } }, /...原创 2019-09-27 16:45:52 · 185 阅读 · 0 评论 -
vue中的单元测试
先介绍一下什么是单元测试:在计算机编程中,单元测试(英語:Unit Testing)又称为模块测试,是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作。 程序单元是应用的最小可测试部件。 在过程化编程中,一个单元就是单个程序、函数、过程等;对于面向对象编程,最小单元就是方法,包括基类(超类)、抽象类、或者派生类(子类)中的方法。需要了解的三个概念:BDD(Behavior ...原创 2019-10-10 11:39:42 · 236 阅读 · 0 评论 -
基于vue实现自定义video与audio播放器,支持拖拽进度条
在最近的vue项目中,有一个需求是实现自定义样式的video播放器和audio播放器。在这里记录下实现的思路。首先得熟悉video与audio原生标签中的API——传送门这里需要用到API有:play;//开始播放音频/视频pause;//暂停当前播放的音频/视频loadedmetadata;//当浏览器已加载音频/视频的元数据时timeupdate;//当目前的播放位置已更改...原创 2019-06-14 15:06:53 · 15302 阅读 · 11 评论