Vue
爱玲姐姐
大家好,我是计爱玲,英文名:Cathy,是一名前端开发工程师,热爱解锁各种前端新技术。我的爱豆是王一博,当然我也想认识更多同行的帅哥,
我的微信jal517486222,欢迎加我好友交流编程技术*^_^*
个人网站:https://jiailing.com
展开
-
大前端学习笔记 -- Vite实现原理
Vite实现原理一、Vite介绍1. Vite概念Vite是一个面向现代浏览器的一个更轻更快的web应用开发工具它基于ECMAScript标准原生模块系统(ES Modules)实现2. Vite项目依赖Vite@vue/compiler-sfc3. 基础使用vite serve / vite build在执行vite serve的时候不需要打包,直接开启一个web服务器,当浏览器请求服务器,比如请求一个单文件组件,这个时候在服务器端编译单文件组件,然后把编译的结果返回给浏览器原创 2020-09-29 17:59:18 · 1743 阅读 · 2 评论 -
大前端学习笔记 -- Vue.js 3.0响应式系统原理
Vue.js 3.0响应式系统原理一、介绍1. Vue.js响应式回顾Proxy对象实现属性监听多层属性嵌套,在访问属性过程中处理下一级属性默认监听动态添加的属性默认监听属性的删除操作默认监听数组索引和length属性可以作为单独的模块使用2. 核心函数eactive/ref/toRefs/computedeffecttracktrigger二、Proxy对象回顾1. 在严格模式下,Proxy的函数得返回布尔类型的值,否则会报TypeErrorUncaught Ty原创 2020-09-29 17:59:39 · 1018 阅读 · 0 评论 -
Vue3.0实现todoList案例
Vue3.0实现todolist案例代码地址:https://gitee.com/jiailing/lagou-fed/tree/master/fed-e-task-03-05/code/04-todolist1. ToDoList功能列表添加待办事项删除待办事项编辑待办事项切换待办事项存储待办事项2. 项目结构使用vue脚手架创建Vue项目,先升级vue-cli,4.5.6版本的vue-cli创建项目时可以选择vue版本。Vue CLI 的包名称由 vue-cli 改成了 @v原创 2020-09-29 18:00:07 · 5474 阅读 · 1 评论 -
大前端学习笔记 -- Composition API
Composition API一、Composition API使用1. 使用Vue3.0先创建一个空文件夹,然后进入文件夹执行npm init -y,再执行npm install vue@3.0.0-rc.1安装vue3.0创建index.html,vue3.0的使用<body> <div id="app"> x: {{ position.x }} <br> y: {{ position.y }} <br> </div原创 2020-09-29 18:00:27 · 1237 阅读 · 1 评论 -
大前端学习笔记--Vue.js 3.0
Vue.js 3.0 介绍文章内容输出来源:大前端高薪训练营一、Vue.js 源码组织方式1. 源码采用TypeScript重写提高了代码的可维护性。大型项目的开发都推荐使用类型化的语言,在编码的过程中检查类型的问题。2. 使用Monorepo管理项目结构使用一个项目管理多个包,把不同功能的代码放到不同的package中管理,每个功能模块都可以单独发布,单独测试,单独使用。3. 不同构建版本Vue3中不再构建UMD模块化的方式,因为UMD会让代码有更多的冗余,它要支持多种模块化的方式。V原创 2020-09-29 22:17:58 · 3490 阅读 · 0 评论 -
大前端学习笔记 -- 封装Vue.js组件库
封装Vue.js组件库一、组件库介绍1. 开源组件库Element-UIIView2. 组件开发方式CDD自下而上从组件级别开始,到页面级别结束3. CDD的好处组件在最大程度上被重用并行开发可视化测试二、处理组件边界情况vue中处理组件边界情况的API1. $root01-root.vue<template> <div> <!-- 小型应用中可以在 vue 根实例里存储共享数据 组件中可以通过 $原创 2020-09-29 22:27:06 · 1406 阅读 · 2 评论 -
大前端学习笔记 -- NuxtJS项目案例--RealWorld(Nuxt脚手架创建项目、Git Actions自动发布和PM2部署)
NuxtJS项目案例–RealWorld(创建Nuxt项目、Git Actions自动发布和部署)一、案例项目realworld介绍1. 案例项目介绍案例名称:RealWorld这是一个开源的学习项目,目的就是帮助开发者快速学习新技能。GitHub仓库:https://github.com/gothinkster/realworld在线实例:https://demo.realworld.io/2. 案例相关资源页面模板:https://github.com/gothinkster/real原创 2020-09-29 22:19:02 · 2722 阅读 · 1 评论 -
大前端学习 -- NuxtJS学习笔记
NuxtJS学习笔记文章内容输出来源:大前端高薪训练营代码仓库地址:https://gitee.com/jiailing/nuxtjs-demo,在多个分支里都有代码一、Nuxt.js是什么一个基于Vue.js生态的第三方开源服务端渲染应用框架它可以帮我们轻松的使用Vue.js技术栈构建同构应用官网:https://zh.nuxtjs.org/Github仓库:https://github.com/nuxt/nuxt.js二、Nuxt.js的使用方式初始化项目已有的Node.j原创 2020-09-30 10:35:37 · 1763 阅读 · 1 评论 -
大前端学习--Vuex状态管理
Vuex状态管理文章内容输出来源:大前端高薪训练营一、组件内的状态管理流程1. 状态管理state:驱动应用的数据源view:以声明方式将state映射到视图actions:相应在view上的用户输入导致的状态变化二、组件间通信方式1. 父组件给子组件传值子组件通过props接受数据<template> <div> <h2>{{title}}</h2> </div></templa原创 2020-09-29 22:29:13 · 892 阅读 · 0 评论 -
大前端学习 -- Vue.js源码分析(响应式、虚拟DOM、模板编译和组件化)-- 总结
Vue.js源码分析(响应式、虚拟DOM、模板编译和组件化)Vue.js源码剖析-响应式原理一、准备工作1. Vue源码的获取项目地址:https://github.com/vuejs/vueFork一份到自己仓库,克隆到本地,可以自己写注释提交到GitHub为什么分析Vue2.6到目前为止Vue3.0的正式版还没有发布新版本发布后,现有项目不会升级到3.0,2.x还有很长的一段过渡期3.0项目地址:http://github.com/原创 2020-09-29 22:23:12 · 2011 阅读 · 4 评论 -
大前端学习 -- 虚拟 DOM 和 Diff 算法 学习笔记
虚拟 DOM 和 Diff 算法Virtual DOM的实现原理一、Virtual DOM介绍1. 什么是Virtual DOMVirtual DOM(虚拟DOM),是由普通的JS对象描述DOM对象,因为不是真实的DOM对象,所以叫做Virtual DOM真实的DOM成员 非常非常多,所以创建一个DOM对象的成本非常高可以通过Virtual DOM来描述真实DDOM,示例:{ sel: 'div', data: {}, text: 'Hello Virtual DOM'原创 2020-09-29 22:30:36 · 1167 阅读 · 0 评论 -
大前端学习 -- 手写Vue响应式实现
手写Vue响应式实现Vue响应式一、数据驱动1.数据响应式数据模型仅仅是普通的JavaScript对象,而当我们修改数据时,视图会进行更新,避免了繁琐的DOM操作,提高开发效率2. 双向绑定数据改变,视图改变;视图改变,数据也随之改变我们可以使用v-modle在表单元素上创建双向数据数据3. 数据驱动是Vue最独特的特性之一开发过程中仅需要关注数据本身,不需要关心数据是如何渲染到视图二、数据响应式的核心原理1. Vue原创 2020-09-29 22:22:07 · 1401 阅读 · 0 评论 -
大前端学习 -- 手写 Vue Router
手写 Vue RouterVue-Router代码仓库地址:https://gitee.com/jiailing/lagou-fed/tree/master/fed-e-task-03-01/code/06-my-vue-routervue-router核心代码:App.vue<template> <div id="app"> <div id="nav"> <router-link to="/">Home</route原创 2020-09-29 22:30:01 · 1087 阅读 · 0 评论