petite-vue源码剖析-逐行解读@vue-reactivity之effect
当我们通过effect将副函数向响应上下文注册后,副作用函数内访问响应式对象时即会自动收集依赖,并在相应的响应式属性发生变化后,自动触发副作用函数的执行。 // ./effect.ts export funciton effect<T = any>( fn: () => T, options?: R ... »
当我们通过effect将副函数向响应上下文注册后,副作用函数内访问响应式对象时即会自动收集依赖,并在相应的响应式属性发生变化后,自动触发副作用函数的执行。 // ./effect.ts export funciton effect<T = any>( fn: () => T, options?: R ... »
前情 Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,在项目中我们就使用了它,非常nice 坑位 在使用Element组件的时候,一切都十分顺利,但是在使用弹框类组件Popover 的时候,发现并没有效果。 Why? 通过控制台查看元素后发现,其实Popov ... »
新项目了 浑浑噩噩一个五年前的vue2的项目维护了一年多,要开始重构了。前端还是vue2,要加个后台系统来管理配置化功能。后台管理就捡起vue3吧,好久没写了,看看有啥新东西玩,有空了再更新一下博客。 Vite搭建 之前写了个用vue-cli来搭建的(vue-cli脚手架搭建vue3.0+types ... »
CLI创建项目、如何删除CLI预设、Vue项目目录及运行、es6语法之导入导出、定义并使用组件、集成Bootstrap,jQuery,Elementui、使用axios与后端交互 ... »
axios实现数据请求、计算属性、监听属性、局部组件、全局组件、组件通信之父传子、组件通信之子传父、 ref属性(组件间通信)、动态组件和keep-alive ... »
vue 生产环境默认是无法启用vue devtools的,如果生产应用出了问题,就很难解决。 先说下vue如何判断devtools是否可用的。 vue devtools扩展组件会在window全局注入__VUE_DEVTOOLS_GLOBAL_HOOK__变量,Vue就是根据这个变量判断是否需要调试 ... »
前言 在Vue中State使用是单一状态树结构,应该的所有的状态都放在state里面,如果项目比较复杂,那state是一个很大的对象,store对象也将对变得非常大,难于管理。于是Vuex中就存在了另外一个核心概念 modules。本文就来总结 modules 相关知识点。 正文 1 、什么是模块M ... »
本篇我们会继续探索reactive函数中对Map/WeakMap/Set/WeakSet对象的代理实现。 Map/WeakMap/Set/WeakSet的操作 由于WeakMap和WeakSet分别是Map和Set的不影响GC执行垃圾回收的版本,这里我们只研究Map和Set即可。 Set的属性和方法 ... »
第一步我们可以先更新源(我所有的步骤都在root账户下操作的) sudo apt-get update 然后安装node sudo apt-get install nodejs 安装成功后可以查看版本是否成功安装 node -v nodejs -v 继续安装 npm sudo apt-get ins ... »
我们继续上一章的内容,上一章讲到我们已经能将项目成功跑起来了,那么我们接下来把项目必用的东西完善一下。 一、安装elementUI 终于到了我们的男二了,继续在VSCode中新建一个终端,然后通过这个命令来安装: npm i element-ui -S 至于为什么要-S呢?即--save(保存)包名 ... »
Vue生命周期八个钩子函数详细剖析,如何使用created进行前后端交互,前后端交互的常用方法 »
Vue实战-购物车案例 普通购物车 实现的功能:添加商品到购物车,计算总价 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物车</title> <script src="https://cdn.bootc ... »
动态绑定属性v-bind:,语法糖形式:省略v-bind,仅写一个冒号。 一、动态绑定基本属性 1 <body> 2 <!-- v-bind 动态绑定属性-基本用法 --> 3 <img v-bind:src="imgUrl" alt=""> 4 <script src="../js/vue.js" ... »
本文总结:条件渲染、列表渲染(v-for)、什么时候数据才会更新,数组更新与检测都包括哪几种方法?,数据双向绑定(v-model),事件处理,表单控制,v-model 之 lazy、number、trim,需要拿走~ ... »
今日内容概要 属性指令 style和class 条件渲染 列表渲染 事件处理 数据的双向绑定 v-model进阶 购物车案例 内容详细 1、属性指令 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title ... »
Vue3.0 发布第一个版本至今有一段时间了,到现在一直在更新优化,在性能方面,对比 Vue2.x ,性能的提升比较明显,打包后体积更小 来看下 Vue3.x 新增了哪些功能和特性。 Performance:性能优化 Tree-shaking support:支持摇树优化 Composition A ... »
Vue快速入门(一) 介绍 Vue.js 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具 ... »
Vue入门 1.什么是MVVM? MVVM(Model-View-ViewModel)是一种软件架构设计模式,是一种简化用户界面的事件驱动编程方式。它源自与经典的MVC模式,MVVM的核心是ViewModel层,负责转换Model中的数据对象来让数据变得更容易管理和使用 为什么要使用MVVM? MV ... »
1. 概述 老话说的好:取乎上,得其中;取乎中,得其下。因此我们不妨把目标定的高一些,去努力,才能得到更好回报。 言归正传,今天我们来聊聊 使用 Nginx 实现 URL 的重定向。 2. 使用 Nginx 实现 URL 的重定向 2.1 使用场景 我们日常分享一个网站地址时,常常会有这样的效果,同 ... »
基于个人写的以下关于Vue框架基础学习的三篇随笔,在此基础上,做一个阶段性的知识总结,以此来检验自己对Vue这一段时间学习的成果,内容不多,但很值得一看。(思维导图详解) ... »