1 Warriorkris0816

尚未进行身份认证

我要认证

暂无相关简介

等级
TA的排名 13w+

vuex中mutation和action的详细区别

一、vuex中mutation和action的详细区别const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit('increment') } }}) 1、流程

2020-08-04 09:13:32

为什么要用Action管理异步操作?

Action 类似于 mutation,不同在于:1.Action 提交的是 mutation,而不是直接变更状态。2.Action 可以包含任意异步操作。官方给的定义我没什么意见,事实上我通过mutation异步操作,好像跟用action管理也没什么区别。关于为什么要用Action管理异步操作,我会通过一个简单的例子和一个复杂的例子来进行说明,事实上,如果初学者没有考虑到实际场景的复杂情况,会觉得Action根本没有一点软用,这个时候就要把问题想得复杂一些了,然后才能看到Action的作用。先来看

2020-08-04 09:09:28

Vue之axios基础使用

axios 简介axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:1.从浏览器中创建 XMLHttpRequest2.从 node.js 发出 http 请求3.支持 Promise API4.拦截请求和响应5.转换请求和响应数据6.取消请求7.自动转换JSON数据8.客户端支持防止 CSRF/XSRF安装npm安装$ npm install axios --save通过cdn引入<script src="http

2020-08-03 17:06:26

浅谈vue中的几个重要的钩子函数

生命周期 钩子函数 一个组件从创建到销毁的过程就是生命周期。 beforeCreate:创建前 1、当前vue实例化的时候会做一个初始化的操作,在这个生命周期函数里面我们可以做初始化的loading 2、在当前函数里面是访问不到data中的属性,但是可以通过vue的实例对象进行访问 created:创建后 1、当beforeCreate执行完毕以后,会执行created. 在当前函数中我们可以访问到data中的属性

2020-08-03 08:42:58

vue 子组件修改props中的值

问题:子组件想修改父组件传来的值(props中的值)。普通的修改会报错,因为这个值是单向的,只能传进来,要是想修改就要用v-model解决办法:用v-model写个简单粗暴例子:父组件 <control :lingthData="lingthData" v-model="deviceF"></control> //v-model里面写上我们要传给子组件,并且还会在子组件中改变这个值 import control from '@/page/map/control'e

2020-07-31 09:03:01

vue 在哪个生命周期进行数据请求

看实际情况,一般在 created(或beforeRouter) 里面就可以,如果涉及到需要页面加载完成之后的话就用 mounted。在created的时候,视图中的html并没有渲染出来,所以此时如果直接去操作html的dom节点,一定找不到相关的元素而在mounted中,由于此时html已经渲染出来了,所以可以直接操作dom节点,(此时document.getelementById 即可生效了)。应用vue中实现先请求数据再渲染dom在项目中遇到了一个问题,下面是vue template

2020-07-31 08:59:08

VUE中$refs的基本用法

ref 有三种用法:1、ref 加在普通的元素上,用this.$refs.(ref值) 获取到的是dom元素2、ref 加在子组件上,用this.refs.(ref值)获取到的是组件实例,可以使用组件的所有方法。在使用方法的时候直接this.refs.(ref值) 获取到的是组件实例,可以使用组件的所有方法。在使用方法的时候直接this.refs.(ref值)获取到的是组件实例,可以使用组件的所有方法。在使用方法的时候直接this.refs.(ref值).方法() 就可以使用了。3、如何利用 v-fo

2020-07-31 08:56:22

vue动态绑定class和style

vue动态绑定class的几种方式通过对象绑定:class="{ 'active': isActive }"1.绑定多个第一种(用逗号隔开):class="{ 'active': isActive, 'sort': isSort }"第二种(放在data里面)//也可以把后面绑定的对象写在一个变量放在data里面,可以变成下面这样:class="classObject"data() { return { classObject:{ active: true, sort:fa

2020-07-31 08:52:24

vue操作dom元素的三种方法介绍和分析

相信大家在做项目的时候,肯定会遇到这样的问题:我点击新增按钮,需要弹出个弹框,然后我点击对应的关闭按钮,关闭弹框,但是新增按钮和关闭按钮操作的是另一个元素,所以需要获取dom元素进行操控,那么在vue中怎么操作dom呢?以下是常用的三种方法:1、jQuery操作dom只要拿jQuery的选择器,选中相应的dom进行操作就可以了,但是大家都知道jQuery获取元素是查找页面所有,相当于“循环”所有元素直至找到需要的dom,但是vue是单页面的,jQuery获取dom并不只是获取vue当前页面,而是从根路

2020-07-31 08:49:43

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在同一个标签内同时使用。为了避免上述情况的发生,我们通常会采用如下的两种方法:1>ul和li搭配使用,或者是渲染父级标签下的子标签,可以使用如下方法:<ul v-if="state"> <li v-for="(item,

2020-07-31 08:46:17

直接给一个数组项赋值,Vue 能检测到变化吗?

由于 JavaScript 的限制,Vue 不能检测到以下数组的变动:当你利用索引直接设置一个数组项时,例如: vm.items[indexOfItem] = newValue当你修改数组的长度时,例如: vm.items.length = newLength为了解决第一个问题,Vue 提供了以下操作方法:通过索引来修改数组,使其能成为响应式,解决直接使用赋值不能响应的问题Vue.set(vm.data,2,'huanpu','name') 对数组Vue.$set(vm.data,'K',

2020-07-31 08:41:29

Vue.js中过滤器(filter)的使用

Vue.js中过滤器(filter)的使用Vue.js 过滤器的基本使用(filter)vue中的过滤器分为两种:局部过滤器和全局过滤器1、定义无参全局过滤器 Vue.filter('msgFormat', function(msg) { // msg 为固定的参数 即是你需要过滤的数据 return msg.replace(/单纯/g, 'xxx') })完整示例<div id="app"> <p>{{ msg | ms

2020-07-31 08:39:51

Vue中watch用法详解

基本用法:当fullName值变化时,watch监听到并且执行<div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p></div> new Vue({ el: '#root', data: { firstName: 'Dawei', las

2020-07-31 08:34:45

vue中computed和watch的区别,以及适用场景

computed通过属性计算而得来的属性1、computed内部的函数在调用时不加()。2、computed是依赖vm中data的属性变化而变化的,也就是说,当data中的属性发生改变的时候,当前函数才会执行,data中的属性没有改变的时候,当前函数不会执行。3、computed中的函数必须用return返回。4、在computed中不要对data中的属性进行赋值操作。如果对data中的属性进行赋值操作了,就是data中的属性发生改变,从而触发computed中的函数,形成死循环了。5、当com

2020-07-30 17:09:46

SPA单页面

单页Web应用(single page web application,SPA): SPA 是一种特殊的 Web 应用,是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的。它将所有的活动局限于一个 Web 页面中,仅在该 Web 页面初始化时加载相应的 HTML 、 JavaScript 、 CSS 。一旦页面加载完成, SPA 不会因为用户的操作而进行页面的重新加载或跳转,而是利用 JavaScript 动态的变换 HTML(采用的是 div 切换显示和隐藏),从而实现UI与用户的交互。在

2020-07-30 17:05:59

Vue修饰符

Vue提供了一些修饰符,这些修饰符在使用起来非常方便,比如阻止默认事件、冒泡等。.lazyv-modeil不用多说,输入框改变,这个数据就会改变,lazy这个修饰符会在光标离开input框才会更新数据:<input type="text" v-model.lazy="value">.trim输入框过滤首尾的空格:<input type="text" v-model.trim="value">.number先输入数字就会限制输入只能是数字,先字符串就相当于没有加nu

2020-07-30 17:01:55

vuejs中的事件绑定

vuejs中的事件绑定,使用<v-on:事件名 = 函数名>来完成的,这里函数名是定义在Vue实例中的methods对象中的,Vue实例可以直接访问其中的方法.事件绑定的方式(1) 内联直接把js写在标签上调用方法 <button v-on:click="alert('hi')">执行方法的第一种写法</button>(2)调用methods里定义的方法 <button v-on:click="run()">执行方法的第一种写法</bu

2020-07-30 16:57:51

Vue.js 组件中的v-on绑定自定义事件理解

每个 Vue 实例都实现了事件接口(Events interface),即:使用 $on(eventName) 监听事件使用 $emit(eventName) 触发事件Vue的事件系统分离自浏览器的EventTarget API。尽管它们的运行类似,但是$on 和 $emit 不是addEventListener 和 dispatchEvent 的别名。另外,父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。下面是一个文档上面的例子:<div id="counter-e

2020-07-30 16:48:41

vue中created钩子函数与mounted钩子函数的使用区别

1:在使用vue框架的过程中,我们经常需要给一些数据做一些初始化处理,这时候我们常用的就是在created与mounted选项中作出处理。首先来看下官方解释,官方解释说created是在实例创建完成后呗立即调用。在这一步,实例已完成以下配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。这话的意思我觉得重点在于说挂架阶段还没开始,什么叫还没开始挂载,也就是说,模板还没有被渲染成html,也就是这时候通过id什

2020-07-30 16:43:38

Vue组件中的data为什么必须是一个函数

1、从声明式渲染说起vue文档在声明式渲染这一节中给了我们这样的一个demo:<div id="app"> {{ message }}</div>var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }})在这个demo中data是一个对象,通过 new Vue 创建的 Vue 实例中,我们直接把data上的message属性通过模板渲染到页面上去了。但是在文档上Vue组件

2020-07-30 16:42:02

查看更多

勋章 我的勋章
  • 签到新秀
    签到新秀
    累计签到获取,不积跬步,无以至千里,继续坚持!
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 勤写标兵Lv4
    勤写标兵Lv4
    授予每个自然周发布9篇以上(包括9篇)原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。