文章分类 - 前端-Vue
摘要:Action 类似于 mutation,不同在于: 1.Action 提交的是 mutation,而不是直接变更状态。 2.Action 可以包含任意异步操作。 官方给的定义我没什么意见,事实上我通过mutation异步操作,好像跟用action管理也没什么区别。关于为什么要用Action管理异步操
阅读全文
摘要:更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。 关于vuex为什么这样做,先不要管,但请相信他这么做必然有很多的好处.在vue中,我们要修改data中的值,一般会怎么做. this.count = 2 //count from 1 to 2,触发视图更新 很简单,直接赋
阅读全文
摘要:Vuex提供了state这样的状态统一管理树,你可以在vue中用computed计算属性接收这些公共状态,以便使用,当然你也可以在接收原值的基础上对这个值做出一些改造,如 computed:{ sex:function(){ return this.$store.state.sex + '加个字符串
阅读全文
摘要:上一章大概说明了vuex的设计初衷和基本用法,从这一章开始详解一下vuex的几个关键配置. 1.state state是什么? 定义:state(vuex) ≈ data (vue) vuex的state和vue的data有很多相似之处,都是用于存储一些数据,或者说状态值.这些值都将被挂载 数据和d
阅读全文
摘要:开一个Vuex的坑. 先来谈谈个人看法,之前很早的时候就用过Vuex做组件间通信,对于单页面应用来说,也就是不同的router子组件的一些数据通信,当然我也尝试过event bus的解决方案,这里不进行横向对比了,如果想做组件间的复杂通信,直接选择Vuex即可(个人建议).如果有人想学习Vuex,个
阅读全文
摘要:VeeValidate vee validate 一个轻量级的 vue表单验证插件。基于模板的验证既熟悉又易于设置。验证html输入和vue组件,生成本地化错误,可扩展,它可以完成所有操作。 安装:npm i vee-validate --save 入门使用 // ValidationProvide
阅读全文
摘要:本篇总结 API v-validate directive v-validate 指令是验证我们的 inputs 输入框的主要方式,该指令接受一个字符串或对象作为值。 如果传递了一个字符串,它必须是一个有效的 rules 字符串,由 '|' 分隔的验证规则。 <input v-validate="'
阅读全文
摘要:vee-validate使用教程 *本文适合有一定Vue2.0基础的同学参考,根据项目的实际情况来使用,关于Vue的使用不做多余解释。本人也是一边学习一边使用,如果错误之处敬请批评指出* 一、安装 npm install vee-validate@next --save 注意:@next,不然是Vu
阅读全文
摘要:从2.3.0起,Vue重新引入了 .sync修饰符,但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。 示例一: 父组件: <parent :items.sync="data1"></parent> 等同 <parent :items="data1"
阅读全文
摘要:vuex的dispatch是异步执行的,所以如果有用到state的地方但是又没有绑定组件的话就会导致渲染完成了但是数据没有获取到的情况 如何检测state中的数据变化,下面举个栗子 /*store.js*/ const state={ existSSID:{}, wifiList:[] }; con
阅读全文
摘要:定义 setTimeout():延时任务。在指定的毫秒数后调用函数或计算表达式,setInterval():定时任务。在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除。setTimeout()只执行一次,而setInterval可以多次调用。 栗子 setInterva
阅读全文
摘要:今天看vue的API,看到组件通信这一块,发现通信方式有好多种,但官网上的说明都是一笔带过,而且语句有点拗口,里面又有很多不理解的专有名词,以致于以前看的时候漏掉了很多东西,今天就好好总结一下。 1. props传值 props方式是用得比较多的: <div id="app"> <child :va
阅读全文
摘要:vue项目中配置环境变量 此篇文章是在网上看到的,项目中我采用的是第二种方式,此文章出处. 1.环境背景 项目环境一般分为开发环境,测试环境,线上环境 因为每个环境的接口域名、webpack 配置都是不同的,所以在打包构建时,我们需要区分这些环境,这时就用到了环境变量 在工作中使用到了两种方法来区分
阅读全文
摘要:keep-alive以及activated,deactivated生命周期的用法 这是在网上看到的一篇文章 vue官网的描述: 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 < transition> 相似, 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。
阅读全文
摘要:https://blog.csdn.net/weixin_42218847/article/details/81474923
阅读全文
摘要:vue中transition标签如何使用 概述 Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具: 在 CSS 过渡和动画中自动应用 class可以配合使用第三方 CSS 动画库,如 Animate.css在过渡钩子函数中使用 JavaScript 直接操作 D
阅读全文
摘要:内置组件component的用法 <component></component>标签是Vue框架自定义的标签,它的用途就是可以动态绑定我们的组件,根据数据的不同更换不同的组件 先看一下vue.js官网的用法: 也就是说component通过属性is的值可以渲染不同的组件。 看一下实际开发中的用法:
阅读全文
摘要:.sync是vue中用于实现简单的“双向绑定”的语法糖,在平时的开发中是非常使用的。 vue的prop是单向下行绑定:父级的prop的更新会向下流动到子组件中,但是反过来不行。可是有些情况,我们需要对prop进行“双向绑定”。这个时候,就可以用.sync来解决 .sync用法 <text-docum
阅读全文