Vue 从0到1
文章平均质量分 71
前端攻城狮
°PJ想做前端攻城狮
始终相信不能更进一步不是因为困难,而是畏惧困难的自己。所以想做前端攻城狮的PJ正在将键盘敲烂的路上,一直敲
展开
-
关于虚拟DOM,这些你都知道了么?
什么是虚拟dom?用js模拟一颗dom树,放在浏览器内存中.当你要变更时,虚拟dom使用diff算法进行新旧虚拟dom的比较,将变更放到变更队列中,反应到实际的dom树,减少了dom操作.虚拟DOM将DOM树转换成一个JS对象树,diff算法逐层比较,删除,添加操作,但是,如果有多个相同的元素,可能会浪费性能,所以,react和vue-for引入key值进行区分.优点:保证性能下限: 框架的虚拟 DOM 需要适配任何上层 API 可能产生的操作,它的一些 DOM 操作的实现必须是普适的,所以它原创 2021-04-13 11:59:54 · 681 阅读 · 0 评论 -
Vue中的computed(计算属性)和watch(监听属性)的区别
计算属性computed :支持缓存,只有依赖数据发生改变,才会重新进行计算不支持异步,当computed内有异步操作时无效,无法监听数据的变化computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed如果computed属性属性值是函数,那么默认会走get方法;函数的返回值就是属性的属性值;在c原创 2021-04-12 21:21:06 · 4377 阅读 · 3 评论 -
10分钟快速理解JS的节流、防抖
前言今天看到阿里有一道面试题就是谈谈函数节流和函数防抖。 糟了,这可触碰到我的知识盲区了,好像听也没听过这2个东西,痛定思痛,赶紧学习学习。here we go![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Os3MsZDw-1617719777291)(js防抖和节流.assets/165a252b4b69aab5)]概念和例子函数防抖(debounce)函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设原创 2021-04-06 22:50:54 · 655 阅读 · 0 评论 -
Vue生命周期详解
前言首先,每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期。首先看一张图吧~这是官方文档上的图片相信大家一定都会很熟悉,左边是官网的,右边是加了一定注解的。咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了。这里有一份代码,先在浏览器里面跑一遍,然后F12,打开console。方面下面一一解读钩子函数。<!DOCTYPE html><html lang="en"><head> <meta原创 2021-04-06 01:08:23 · 668 阅读 · 0 评论 -
vue-router路由详解
什么是路由?说起路由你想起了什么?路由是一个网络工程里面的术语。路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动. — 维基百科额, 啥玩意? 没听懂在生活中, 我们有没有听说过路由的概念呢? 当然了, 路由器嘛.路由器是做什么的? 你有想过吗?路由器提供了两种机制: 路由和转送.路由是决定数据包从来源到目的地的路径.转送将输入端的数据转移到合适的输出端.路由中有一个非常重要的概念叫路由表.路由表本质上就是一个映射表, 决定了数据包原创 2021-04-04 02:33:49 · 1092 阅读 · 1 评论 -
vue-router路由传参的三种方式
前言我们在组件切换时经常会有传递一些数据的需求,这样就涉及到了路由传参的问题。vue-router传递参数有两个大类:①编程式的导航router.push。②声明式的导航 <router-link>编程式导航router.push通过params属性传值-name//路由配置文件中{ path: '/detail', name: 'Detail', component: Detail }//跳转时页面this.$router.push({原创 2021-04-04 01:11:15 · 5735 阅读 · 10 评论 -
路由的懒加载
认识路由的懒加载官方给出了解释:当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了官方在说什么呢?首先, 我们知道路由中通常会定义很多不同的页面.这个页面最后被打包在哪里呢? 一般情况下, 是放在一个js文件中.但是, 页面这么多放在一个js文件中, 必然会造成这个页面非常的大.如果我们一次性从服务器请求下来这个页面, 可能需要花费一定的时间, 甚至用户的电脑原创 2021-04-03 22:25:55 · 643 阅读 · 1 评论 -
Vuex详解
Vuex是做什么的?官方解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用 集中式存储管理 应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能状态管理到底是什么?状态管理模式、集中式存储管理这些名词听起来就非常高大上,让人捉摸不透。其实,你可以简单的将其看成把需要多个组件共享的原创 2021-04-03 20:28:49 · 546 阅读 · 0 评论 -
mutation响应规则
前言 我们都知道,Vuex的store中的state是响应式的,当state中的数据发生改变时,Vue组件会自动更新。但是是不是任何情况都会自动更新的呢?显示不是的。那什么情况下才能响应呢,那我们的先知道它响应的原理。响应原理 当我们在state里添加属性时,都会被添加到响应式系统中,响应式系统会监听属性的变化,当属性发生变化时,会通知所有页面中用到该属性的地方,让界面发生刷新。后添加的属性由于之前没有在store里初始化,我们就无法监听该属性,界面不能刷新。响应规则这就要求我们必原创 2021-04-03 19:25:54 · 689 阅读 · 1 评论 -
Vue 插槽slot的使用(具名插槽、作用域插槽)
编译作用域在理解插槽前,不得不先理解一个概念:编译作用域。官方对于编译的作用域解析比较简单,我们自己来通过一个例子来理解这个概念:我们来考虑下面的代码是否最终是可以渲染出来的:<my-cpn v-show="isShow"></my-cpn>中,我们使用了isShow属性。isShow属性包含在组件中,也包含在Vue实例中。答案:最终可以渲染出来,也就是使用的是Vue实例的属性。原因分析官方给出了一条准则:父组件模板的所有东西都会在父级作用域内编译;子组原创 2021-03-25 23:10:05 · 981 阅读 · 0 评论 -
Vue 组件化思想和实现步骤
什么是组件化?组件化思想组件化是Vue.js中的重要思想它提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用任何的应用都会被抽象成一颗组件树组件化思想的应用:有了组件化的思想,我们在之后的开发中就要充分的利用它。尽可能的将页面拆分成一个个小的、可复用的组件。这样让我们的代码更加方便组织和管理,并且扩展性也更强。注册组件步骤注册组件步骤解析1.Vue.extend():调用Vue.extend()创建的是一个组件构造器。通常在创建原创 2021-03-25 22:27:16 · 1155 阅读 · 0 评论 -
Vue 父子组件的通信传参(props、$emit)
简述我们知道子组件是不能引用父组件或者Vue实例的数据的。但是,在开发中,往往一些数据确实需要从上层传递到下层:比如在一个页面中,我们从服务器请求到了很多的数据。其中一部分数据,并非是我们整个页面的大组件来展示的,而是需要下面的子组件进行展示。这个时候,并不会让子组件再次发送一个网络请求,而是直接让大组件(父组件)将数据传递给小组件(子组件)。如何进行父子组件间的通信呢?Vue官方给出以下方法通过props向子组件传递数据通过事件向父组件发送消息真实的开发中,Vue实例原创 2021-03-25 22:24:17 · 938 阅读 · 0 评论 -
Vue 父子组件的相互访问 ($refs、$children)
简述有时候我们需要父组件直接访问子组件,子组件直接访问父组件,或者是子组件访问跟组件。父组件访问子组件:使用$children或$refs子组件访问父组件:使用$parent父访问子$children(不推荐)this.$children是一个数组类型,它包含所有子组件对象。我们这里通过一个遍历,取出所有子组件的message状态。$children的缺陷通过$children访问子组件时,是一个数组类型,访问其中的子组件必须通过索引值。但是当子组件过多,我们需要拿到其中原创 2021-03-25 22:21:41 · 2948 阅读 · 4 评论 -
数据双向绑定v-model的使用和原理
简述表单控件在实际开发中式非常常见的,特别是对于用户信息的提交,需要大量的表单Vue中使用v-model指令来实现表单元素和数据的双向绑定简单使用当我们在输入框输入内容时,因为input中的v-model绑定了message,所以会实时将输入的内容传递给message,message发生改变当message发生改变时,因为上面我们使用Mustache语法,将message的值插入到DOM中,所以会发生响应的改变所以,通过v-model实现双向绑定,我们也可以将v-model用原创 2021-03-25 20:36:16 · 6591 阅读 · 0 评论 -
Vue里面数组哪些方法是响应式的
简述因为Vue是响应式的,所以当数据发生变化时,Vue会自动检测数据变化,视图会发生对应的更新。Vue中包含了一组观察数组编译的方法,使用它们改变数组也会触发视图的更新。尾部追加:push()尾部删除:pop()首部删除:shift()首部添加:unshift()删除/插入/替换元素:splice()排序:sort()反转数组:reverse()push() //1.push方法,最后一位添加元素,响应式,数据改变let letters=['A','B','C','D原创 2021-03-23 16:51:07 · 1500 阅读 · 0 评论 -
条件渲染 v-if和v-show
v-ifv-if、v-else-if、v-else这三个指令与JavaScript的条件语句if、else、else if类似。Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件简单的案例演示v-if的原理:v-if后面的条件为false时,对应的元素以及其子元素不会渲染。也就是根本没有不会有对应的标签出现在DOM中。在 template 元素上使用 v-if 条件渲染分组因为 v-if 是一个指令,所以必须将它添加到一个元素上。但是如果想切换多个元素呢?此时可以把原创 2021-03-23 15:03:41 · 880 阅读 · 0 评论 -
Vue v-for对数据的遍历
场景当我们有一组数据需要进行渲染时,我们就可以使用v-for来完成。v-for的语法类似于JavaScript中的for循环。格式:v-for = “item in items”数组数据情况1: 不需要使用索引值格式:``v-for=" item in items "依次从items 中取出item,并且在元素的内容中,我们可以使用Mustache语法(插值{{item}}),来使用item<!-- 1.在遍历的过程中,没有使用索引值(下标值)--> <原创 2021-03-23 15:02:00 · 1855 阅读 · 0 评论 -
Vue 事件监听v-on(简单使用,参数问题,修饰符)
简述在前端开发中,我们需要经常和用户交互这个时候,我们就必须监听用户发生的事件,比如点击,拖拽,键盘事件等等在Vue中使用v-on监听事件v-on介绍作用:绑定事件监听器缩写:@预期:Function | Inline Statement | Object参数:event简单使用/*这里,我们用一个监听按钮的点击事件,来简单看看v-on的使用*/<div id="app"> <h2>当前计数器为:{{counter}}</h2>原创 2021-03-23 14:09:47 · 939 阅读 · 0 评论 -
Vue 条件渲染v-if和v-show
v-ifv-if、v-else-if、v-else这三个指令与JavaScript的条件语句if、else、else if类似。Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件简单的案例演示v-if的原理:v-if后面的条件为false时,对应的元素以及其子元素不会渲染。也就是根本没有不会有对应的标签出现在DOM中。在 template 元素上使用 v-if 条件渲染分组因为 v-if 是一个指令,所以必须将它添加到一个元素上。但是如果想切换多个元素呢?此时可以把原创 2021-03-23 13:37:04 · 798 阅读 · 0 评论 -
Vue 计算属性
前言人生如逆水行舟,不进则退简介在vue中一些数据经常依赖于别的数据做出改变,且改变的逻辑也较复杂,这个时候就需要用到计算属性computed。通俗来说就是当前数据不是确定的,要经常做出改变,而这个改变是其他数据改变导致的。简单使用<div id="app"> <h2>{{firstName}} {{lastName}}</h2> <h2>{{firstName+" "+lastName}}</h2> <h2>.原创 2021-03-21 22:52:39 · 951 阅读 · 0 评论 -
v-bind——Class 与 Style 绑定
前言本篇记录一下的v-bind指令,从简单使用到复杂应用。简述v-bind 主要用于动态地属性绑定,比方你的class属性,style属性,value属性,href属性等等,只要是属性,就可以用v-bind指令进行绑定.简单使用<div id="app"> //错误写法 <img src="{{imgURL}}" alt=""> //正确写法 <img v-bind:src="imgURL" alt=""> <原创 2021-03-21 16:40:43 · 1168 阅读 · 4 评论 -
Vue 快被大家遗忘的指令
前言本篇做了一些对不被常用的指令的汇总。了解即可,知道他们能做什么就好了v-once该指令后面不需要跟任何表达式该指令表示元素和组件只渲染一次,不会随着数据的改变而改变 <div id="app"> message只会渲染一次,数据改变后也不能更新 <h2 v-once>{{message}}</h2> </div>这个还是算没那么不常用的,还是有一定的应用的场景。v-html该指令原创 2021-03-21 15:00:45 · 808 阅读 · 0 评论 -
Vue MVVM模型
简介MVVM 是Model-View-ViewModel的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定。 Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层。它的核心是 MVVM 中的 VM,也就是 ViewModel。 ViewModel负责连接 View 和 Model,保证视图和数据的一致性,这种轻量级的原创 2021-03-21 12:28:47 · 991 阅读 · 0 评论