![](https://img-blog.csdnimg.cn/20200401171238192.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
文章平均质量分 88
vue学习记录
零度碳酸-
“前端小白”求知若渴,日常学习总结
展开
-
vue一些demo整理
vue基础案例汇总001 tab切换002 todolist简陋版001 tab切换<template> <div> <ul> <li :class="currentIndex == index ? 'active' : ''" v-for="(item, index) in lis...原创 2020-04-18 10:17:50 · 1688 阅读 · 0 评论 -
剖析vue内部核心运行机制-----学习笔记
响应式系统的基本原理 依赖收集追踪原理 实现 Virtual DOM 下的一个 VNode 节点 template 模板是怎样通过 Compile 编译的 数据状态更新时的差异 diff 及 patch 机制 批量异步更新策略及 nextTick 原理首先看下 Vue.js 内部的整个流程,希望能让大家对全局有一个整体的印象,然后我们再来逐个模块进行讲解初始化及挂载在new Vue()之后。 Vue 会调用_init函数进行初始化,也就是这里的init过程,它会...原创 2022-03-14 11:00:00 · 1643 阅读 · 0 评论 -
探秘vue核心之虚拟DOM与diff算法
探秘vue核心之虚拟DOM与diff一、真实DOM和其解析流程所有的浏览器渲染引擎工作流程大致分为5步:创建 DOM 树 —> 创建 Style Rules -> 构建 Render 树 —> 布局 Layout -—> 绘制 Painting。第一步,构建 DOM 树:用 HTML 分析器,分析 HTML 元素,构建一棵 DOM 树;第二步,生成样式表:用 CSS 分析器,分析 CSS 文件和元素上的 inline 样式,生成页面的样式表;第三步,构建 Rende原创 2021-11-08 00:05:02 · 784 阅读 · 2 评论 -
vueSSR学习记录
https://ssr.vuejs.org/zh/理解SSR传统服务端渲染SSR单页面应用SPA服务端渲染SSR1、传统web开发传统web开发,网页内容在服务端渲染完成,一次性传输到浏览器。2、单页应用 Single Page App单页应用优秀的用户体验,使其逐渐成为主流,页面内容由JS渲染出来,这种方式成为客户端渲染。spa缺点:seo非常差首屏内容到达时间慢概念- 服务端渲染:将vue实例渲染为HTML字符串直接返回,在前端激活为交互程序优点seo首屏内原创 2021-07-14 23:19:06 · 135 阅读 · 3 评论 -
vue2.x---mustache模板引擎学习记录
mustache模板引擎1.什么是模板引擎数据变为视图的方法1.纯Dom法(非常笨拙,没有实战价值)2.数组join法(曾经非常流行)3.es6模板字符串法(ES6中新增的`${a}`语法糖,很好用)4.模板引擎(解决数据变为视图最优雅的方法)2.mustache基本使用3.mustache底层核心机理1.什么是模板引擎模板引擎是将数据要变为视图最优雅的解决方案数据变为视图的方法1.纯Dom法(非常笨拙,没有实战价值)实现代码:<!DOCTYPE html><html原创 2021-05-31 23:26:41 · 211 阅读 · 7 评论 -
vue2.x源码----响应式原理学习笔记
深入响应式原理当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的 property,并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。这些 getter/setter 对用户来说是不可见的,但是在内部它们让 Vue 能够追踪依赖,在 p原创 2021-05-21 23:36:38 · 159 阅读 · 4 评论 -
34条Vue之实操篇
7种组件通信方式随你选组件通信是 Vue 的核心知识,掌握这几个知识点,面试开发一点问题都没有。props/@on+$emit用于实现父子组件间通信。通过 props 可以把父组件的消息传递给子组件:// parent.vue <child :title="title"></child>// child.vueprops: { title: { type: String, default: '', }}这样一来原创 2020-11-16 14:21:29 · 448 阅读 · 0 评论 -
vue一些基础组件封装
vue基础组件封装测试组件占位Dialog 弹框组件测试组件占位阿谁发的很舒服阿大放送发阿斯顿发大水发aasdfasdfasdfDialog 弹框组件效果图:dialog组件<template> <transition name="slide-down"> <div class="ta-dialog__wrapper" v-if="isShow"> <div class="ta-dialog">原创 2020-11-11 17:28:33 · 485 阅读 · 0 评论 -
vue一些utils
utils1.blob2base642.base64 字符串之间的转化3格式化日期相关4防抖与节流1.blob2base64let blob2base64 = async (blobData, type = 'image/jpeg') => { let blob = new Blob([blobData], { type: type }) let fileReader = new FileReader() let result = await new Promise((resolve,原创 2020-06-12 14:43:19 · 2229 阅读 · 0 评论 -
记录vue项目中遇到的一些问题
这里写目录标题2.某些华为机型微信授权回调问题1.利用伪元素自定义input =radio 样式2.某些华为机型微信授权回调问题就是在提交完订单后需要跳到微信授权页面然后在跳转回来。结果就是进不去确认订单页 会停留在白屏状态。原因:是因为好像是因为华为手机会自动清理存储在sessionStorage里的东西。后来放到localStorage也不行。最后在是放在cookie中 这样就可以了1.利用伪元素自定义input =radio 样式自定义input type=radio 样式时候ap原创 2020-06-12 13:40:02 · 323 阅读 · 0 评论 -
vue 路由懒加载
一、懒加载也叫延迟加载或者按需加载,即在需要的时候进行加载,二、像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时简单的说就是:进入首页不用一次加载过多资源造成用时过长1.使用vue的异步组件,可以实现路由的懒加载 {原创 2020-05-13 15:24:38 · 116 阅读 · 0 评论 -
自定义配置vscode快捷生成vue模板 代码
步骤:文件–>首选项—>用户代码片段新建全局json 文件 命名为 vue.json复制以下代码{ // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix...原创 2020-04-24 17:55:31 · 2339 阅读 · 1 评论 -
vue---项目接口统一管理
一、前言在vue开发中,会涉及到很多接口的处理,当项目足够大时,就需要定义规范统一的接口假设后端的文档分成了以下几个模块1、发现模块2、个人信息模块3、商品模块4、评论模块…一般来说,网站的首页都是复杂的,会用到很多其他页面也会用到api,所以接口统一管理可以做到api的复用二、接口管理1、在src目录下创建api文件夹2、按照后台文档划分模块find.jsinfo.js...原创 2020-04-01 17:30:07 · 828 阅读 · 0 评论 -
Vue.config.js常用配置项
Vue.config.js常用配置项一、前言二、只需要在项目的根目录下新建 vue.config.js 文件(是根目录,不是src目录)一、前言Vue-cli3 搭建的项目 相比较Vue-cli2界面相对较为简洁,之前的build和config文件夹不见了,那么应该如何配置 如webpack等的配呢?二、只需要在项目的根目录下新建 vue.config.js 文件(是根目录,不是src目录...原创 2020-04-01 17:09:31 · 899 阅读 · 0 评论