- 博客(81)
- 收藏
- 关注
RSS订阅原创 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
7787
原创 为什么要用Action管理异步操作?
Action 类似于 mutation，不同在于：1.Action 提交的是 mutation，而不是直接变更状态。2.Action 可以包含任意异步操作。官方给的定义我没什么意见,事实上我通过mutation异步操作,好像跟用action管理也没什么区别。关于为什么要用Action管理异步操作，我会通过一个简单的例子和一个复杂的例子来进行说明，事实上，如果初学者没有考虑到实际场景的复杂情况，会觉得Action根本没有一点软用，这个时候就要把问题想得复杂一些了，然后才能看到Action的作用。先来看
2020-08-04 09:09:28
1235
2
原创 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
196
原创 浅谈vue中的几个重要的钩子函数
生命周期 钩子函数 一个组件从创建到销毁的过程就是生命周期。 beforeCreate:创建前 1、当前vue实例化的时候会做一个初始化的操作，在这个生命周期函数里面我们可以做初始化的loading 2、在当前函数里面是访问不到data中的属性，但是可以通过vue的实例对象进行访问 created:创建后 1、当beforeCreate执行完毕以后，会执行created. 在当前函数中我们可以访问到data中的属性
2020-08-03 08:42:58
222
原创 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
2174
原创 vue 在哪个生命周期进行数据请求
看实际情况，一般在 created（或beforeRouter） 里面就可以，如果涉及到需要页面加载完成之后的话就用 mounted。在created的时候，视图中的html并没有渲染出来，所以此时如果直接去操作html的dom节点，一定找不到相关的元素而在mounted中，由于此时html已经渲染出来了，所以可以直接操作dom节点，（此时document.getelementById 即可生效了）。应用vue中实现先请求数据再渲染dom在项目中遇到了一个问题，下面是vue template
2020-07-31 08:59:08
11085
原创 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
1726
原创 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
162
原创 vue操作dom元素的三种方法介绍和分析
相信大家在做项目的时候，肯定会遇到这样的问题：我点击新增按钮，需要弹出个弹框，然后我点击对应的关闭按钮，关闭弹框，但是新增按钮和关闭按钮操作的是另一个元素，所以需要获取dom元素进行操控，那么在vue中怎么操作dom呢？以下是常用的三种方法：1、jQuery操作dom只要拿jQuery的选择器，选中相应的dom进行操作就可以了，但是大家都知道jQuery获取元素是查找页面所有，相当于“循环”所有元素直至找到需要的dom，但是vue是单页面的，jQuery获取dom并不只是获取vue当前页面，而是从根路
2020-07-31 08:49:43
566
原创 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
438
原创 直接给一个数组项赋值，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
2637
原创 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
304
原创 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
180
原创 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
332
原创 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
271
原创 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
93
原创 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
266
原创 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
550
原创 vue中created钩子函数与mounted钩子函数的使用区别
1：在使用vue框架的过程中，我们经常需要给一些数据做一些初始化处理，这时候我们常用的就是在created与mounted选项中作出处理。首先来看下官方解释，官方解释说created是在实例创建完成后呗立即调用。在这一步，实例已完成以下配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。这话的意思我觉得重点在于说挂架阶段还没开始，什么叫还没开始挂载，也就是说，模板还没有被渲染成html，也就是这时候通过id什
2020-07-30 16:43:38
440
原创 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
365
原创 $router和$route的区别
一1.router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象。。。经常用的跳转链接就可以用this.$router.push，和router-link跳转一样。。。this.$router.push会往history栈中添加一个新的记录。。详细见vue官方文档https://router.vuejs.org/zh/guide/essentials/navigation.html2.route相当于当前正在跳转的路由对象。。可以从里面获取na
2020-07-30 16:38:31
239
原创 v-model的原理描述
一，v-model是什么v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。二，为什么使用v-modelv-model作为双向绑定指令也是vue两大核心功能之一，使用非常方便，提高前端开发效率。在view层，model层相互需要数据交互，即可使用v-model。三，v-model的原理简单描述v-model主要提供了两个功能，view层输入值影响data的属性值，data属性值发生改变会更新vie
2020-07-30 16:32:21
678
1
原创 v-bind和v-model的区别及用法
v-bind 缩写 :动态地绑定一个或多个特性，或一个组件 prop 到表达式。官网举例<!-- 绑定一个属性 --><img v-bind:src="imageSrc"> <!-- 缩写 --><img :src="imageSrc"> <!-- 内联字符串拼接 --><img :src="'/path/to/images/' + fileName"> <!-- class 绑定 -->&l
2020-07-30 16:29:45
550
原创 用纯CSS创建一个三角形的原理是什么？
1.采用的是均分原理盒子都是一个矩形或正方形，从形状的中心，向4个角上下左右划分4个部分2.代码的实现第一步 保证元素是块级元素第二步 设置元素的边框第三步 不需要显示的边框使用透明色示例代码[css] view plain copy.square{ width:0; height:0; margin:0 auto; bor...
2020-03-11 20:26:05
1362
原创 li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
有时，在写页面的时候，会需要将这个块状元素横排显示，此时就需要将display属性设置为inline-block，此时问题出现了，在两个元素之间会出现大约8px左右的空白间隙，下面举例说明：<html><head><title>demo</title><style type="text/css">*{ margin:0;...
2020-03-11 20:21:44
762
原创 为什么要初始化css样式？
为什么要初始化css样式？1.浏览器差异不同浏览器对有些标签的默认值是不同的，如果没对css初始化会出现浏览器之间的页面显示差异2.提高编码质量如果不初始化，整个页面做完会很糟糕，重复的css样式很多最简单的初始化方法是：（不建议）1 * {padding: 0; margin: 0;}淘宝样式 样式初始化 1 body, h1, h2, h3, h4, h5, h6, hr, p...
2020-03-11 20:17:54
251
原创 png，jpg，gif这些图片格式解释一下，分别什么时候用，webp呢？
1.gif图形交换格式，索引颜色格式，颜色少的情况下，产生的文件极小，支持背景透明，动画，图形渐进，无损压缩（适合线条，图标等），缺点只有256种颜色2.jpg支持上百万种颜色，有损压缩，压缩比可达180：1，而且质量受损不明显，不支持图形渐进与背景透明，不支持动画3.png为替代gif产生的，位图文件，支持透明，半透明，不透明。不支持动画，无损图像格式。Png8简单说是静态gif，也只有25...
2020-03-11 20:14:18
1221
原创 伪类和伪元素的区别？
为什么要引入伪类与伪元素？css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或是列表中的第一个元素，又或者是鼠标悬停在某个超链接上时要设置的样式。什么是伪类，伪元素？伪类：用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:...
2020-03-11 20:11:27
318
原创 HTML中的空元素?
HTML元素的内容是开始标签与结束标签之间的内容。某些 HTML 元素具有空内容。含有空内容的HTML元素，就是空元素。常见空元素不常用的空元素
2020-03-11 20:07:02
215
原创 事件冒泡
事件冒泡当事件发生后，这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢？因为事件源本身（可能）并没有处理事件的能力，即处理事件的函数（方法）并未绑定在该事件源上。例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身可能不能处理这个事件，事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如我们给按钮的onclick属性赋一个函数的名字，就是让这个函数去处理该...
2020-03-11 20:02:38
109
原创 CSS常见的五大布局
CSS常见的五大布局一、单列布局常见的单列布局有两种：header,content 和 footer 等宽的单列布局header 与 footer 等宽,content 略窄的单列布局1.如何实现对于第一种，先通过对 header,content,footer 统一设置 width：1000px;或者 max-width：1000px(这两者的区别是当屏幕小于 1000px 时，前者...
2020-03-11 19:33:49
478
原创 前端与后端数据交互的方式之Ajax
web前端与后端是怎么连接的网站数据处理主要分为三层。第一层，表示层，这部分可以用HTML代码，CSS/Javascript代码来实现等。通过前端代码可以实现网页的布局和设计。这层又可以称为显示层。也就是你用浏览器打开能看到的网页。第二层，业务层，这层是负责处理数据的。常用的代码语言有PHP,JSP，Java等。通过这些后台处理语言的算法来处理前台传回的数据。必要的时候进行操作数据库，然后把...
2020-03-11 18:01:19
3635
原创 ajax常见面试题
1:什么是ajax？ajax作用是什么？异步的javascript和xml AJAX 是一种用于创建快速动态网页的技术。 ajax用来与后台交互2:原生js ajax请求有几个步骤？分别是什么//创建 XMLHttpRequest 对象var ajax = new XMLHttpRequest();//规定请求的类型、URL 以及是否异步处理请求。ajax.open('GET',u...
2020-03-11 17:10:57
172
原创 JS中document对象和window对象有什么区别么？
简单来说，document是window的一个对象属性。Window 对象表示浏览器中打开的窗口。如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。所有的全局函数和对象都属于Window 对象的属性和方法。document 对 Document 对象的只读引用。区别：一、指...
2020-03-11 14:50:12
274
原创 js中new操作符到底干了什么？
先看一个例子： function Person() { this.name = 'Andy'; this.age = 20; this.say = function () { console.log('hello everybody'); } } Per...
2020-03-11 14:47:32
228
原创 Vuex的五个核心属性（概念）
Vuex是什么？VueX 是一个专门为 Vue.js 应用设计的状态管理架构，统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。Vue有五个核心概念，state, getters, mutations, actions, modules。本文将对这个五个核心概念进行梳理。总结state => 基本数据getters => 从基本数据派...
2020-03-11 14:39:02
332
1
原创 vue中的v-if和v-show的区别
官方文档的介绍：Vue中文社区说明文档中简单来说是：初始渲染的时候进行条件判断展示；在实际开发中我们会经常使用到v-if和v-show来进行判断展示，我们可以这么理解<div class="tc" v-if="pload && list.length<1" > <img src="../assets/img/mall_none_order.png...
2020-03-11 14:30:52
348
原创 Vue路由传参的三种基本方式
Vue路由传参的三种基本方式现有如下场景，点击一个button按钮跳转到另外一个路由页面，并向目标路由页面传递参数，便于目标路由页面获取源页面传递的数据信息。源页面中：<button @click="gotoTargetView">点击跳转到目标路由user页面</button>方案一，通过调用$router对象的push()方法，向push()方法传递一个路由配...
2020-03-11 14:12:28
262
原创 ajax的同步和异步有怎样的区别？ajax同步与异步的区别介绍
对于ajax我们应该知道ajax是主要用来在前端页面中向服务器后端请求数据，ajax中根据async的值不同分为**同步（async = false）和异步（async = true）**两种执行方式，那么，ajax的同步和异步请求两种方式有什么区别呢？本篇文章就来给大家详细分析一下ajax同步与异步执行的区别。首先我们来分别看一下ajax同步与异步请求是什么？ajax异步请求：异步请求就当...
2020-03-11 13:58:07
1339
原创 浅谈Promise（ES6)
我们知道的，在 JavaScript 中，所有代码都是单线程的，也就是同步执行的。而 Promise 就为异步编程提供了一种解决方案。1 基本概念名称：promise译为“承诺”，这也就表达了将来会执行的操作，代表异步操作；状态：一共有三种状态，分别为pending（进行中）、fulfilled（已成功）和rejected（已失败）。特点：(1)只有异步操作可以决定当前处于的状态，并...
2020-03-11 13:27:21
234
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人