Vue
文章平均质量分 96
vue从入门到精通
七钥
这个作者很懒,什么都没留下…
展开
-
vue响应式原理源码:带你一步精通vue
vue3.0正式版都快发布了,vue2.0的响应式原理你还写不出来?本文带你彻底理解vue响应式原理,带你写一个简易版的vue,实习vue数据响应式(数据劫持结合发布者-订阅者)、数组变异方法、编译模板(常用的指令如v-html、v-text、v-model、v-on等)、双向数据绑定的功能。原创 2020-05-07 15:29:06 · 11609 阅读 · 18 评论 -
vue中的vuex状态管理:从入门到精通
Vuex当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏:多个视图依赖于同一状态。来自不同视图的行为需要变更同一状态。对于问题一,传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。对于问题二,我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱,通常会导致无法维护的代码。什么情况下我应该使用 Vu...原创 2020-04-26 12:55:48 · 1253 阅读 · 2 评论 -
vue组件和父子组件间通信的13种方式(包含动态、异步组件和常用的prop、$emit、插槽等)
本篇文章分成了两个部分,第一部分是组件基础,介绍全局组件、局部组件的注册,动态组件和异步组件的使用等等,第二部分是组件之间的通信方式,本文整理了13种,在下面依次介绍。文章较长,看的时候要有耐心哦~组件基础我们在制作一个网站的时候,通常会用到代码相同的部分,比如说导航栏,如果不能很好的复用,那么就会导致大量重复代码,不好维护,vue中的组件,很好的解决了这个问题,什么是组件呢?组件是可复用...原创 2020-04-13 08:31:10 · 2142 阅读 · 1 评论 -
vue的生命周期详解:从入门到精通
Vue生命周期在学习vue的过程中,vue的生命周期可谓是重中之重,必学的一部分。每个 Vue 实例在被创建时都要经过一系列的初始化过程,例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。下面这张图想必大家都不陌生生命周期图示:解释:首先创建一个vue实例,...原创 2020-04-06 17:55:10 · 5372 阅读 · 6 评论 -
axios在企业级vue项目中的应用(附带axios正确打开方式)
在一个大型的vue项目中,需要编写请求接口实在太多太多了,如果每一个接口都从创建实例开始,那代码将会相当庞大以及十分臃肿,后期很难维护,那我们来看看企业级项目中,http请求是怎么抽离出来的吧。首先是request.js,这个文件是用来处理axios的配置、设置拦截器等等,它创建了一个实例,并将这个实例导出。代码如下,注释都写在里面啦import Vue from 'vue'import ...原创 2020-04-01 09:19:11 · 8007 阅读 · 6 评论 -
一篇文章带你“深入”了解vue的计算属性computed和侦听属器watch
计算属性computed设计插值表达式的初衷是为了简单运算的。但在模板中放入太多的逻辑会让模板过重、难以维护且难以阅读。例如:<div id="example"> {{ message.split('').reverse().join('') }}</div>在这个地方,我们很难一眼看出来这个是想要得到反转的字符串,如果我们有十个地方需要用到这种反转字符串,就...原创 2020-03-31 16:04:21 · 1112 阅读 · 0 评论 -
vue中插值表达式和14个vue指令详解
在学习vue时,插值表达式和vue指令可谓是基础中的基础,这篇文章,就让你彻底了解怎么使用插值表达式和vue中所有指令的用法。一、插值表达式:{{ }}可以将vue中的数据填写在插值表达式中<div id="app">{{ title }}</div><script> const vm = new Vue({ el:"#app"...原创 2020-03-29 15:27:28 · 9491 阅读 · 0 评论 -
好似大家都在用vue,vue好在哪?
好似周围的人都在使用vue,那么vue到底好在哪呢,我虽然用了好多次,但是也是第一次停下来,整理了一下vue 的优点性能更好视图-模型分离,实现双向数据绑定维护成本低1、性能好在哪?在JavaScript中,操作DOM影响性能,操作DOM是十分昂贵的,因为访问DOM会消耗性能,而修改DOM可能导致重排或者重绘,代价更是可怖。DOM是一个与语言无关的API,它在浏览器中的...原创 2020-03-22 15:36:18 · 2815 阅读 · 0 评论 -
关于vscode使用断点调试vue项目
使用步骤:1.在lanch.json中配置(注意url的端口号需与webpack配置的一致)代码如下:{ "version": "0.2.0", "configurations": [{ "type": "chrome", "request": "launch", "name": "vuejs: chrome", ...原创 2019-12-15 16:37:29 · 2751 阅读 · 1 评论