![](https://img-blog.csdnimg.cn/2019092715111047.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
文章平均质量分 76
vue相关
前端御书房
保持对编程的热爱
展开
-
前端技术的新趋势:React、Vue与Angular的比较
本文将比较当前最流行的前端框架React、Vue和Angular,探讨它们各自的优缺点,并分析它们在未来的发展趋势。原创 2023-12-18 17:45:47 · 1711 阅读 · 1 评论 -
H5实现扫描二维码
扫描二维码是app常用的一种基础功能,该功能使用户能够方便地登录、浏览网站、获取信息等操作,鉴于此,把该功能引入H5,利用H5实现扫描二维码功能在把扫描二维码功能引入H5的过程中,通过对比5中工具库找到了两种比较好用的第三方库。接下来就对这两种库进行记录。原创 2023-10-07 19:52:54 · 11312 阅读 · 23 评论 -
vite打包优化
因为浏览器的缓存策略,当请求的文件名不变时,会直接从缓存中获取文件,所以只要每次 main.js 中内容发生了变化,打包后的文件名中的 hash 值都会不一样。也就是说,当项目业务代码发生变化,例如 main.ts 中循环体内的内容发生了变化时,打包后的文件名就发生了变化,浏览器就会重新请求文件。原创 2023-06-07 21:14:11 · 2274 阅读 · 0 评论 -
vue打包优化-webpack打包器
1、项目启动速度,和性能2、必要的清理数据3、减少打包后的体积。原创 2023-06-07 20:45:33 · 2042 阅读 · 0 评论 -
Vue:CSR(客户端渲染)、SSR(服务端渲染)、同构渲染
CSR(客户端渲染) 是在浏览器中完成模板与数据的融合,并渲染出最终的 HTML 页面。原创 2022-11-12 12:16:47 · 1042 阅读 · 0 评论 -
Vue内置组件:teleport和transition组件
该组件可以将指定内容渲染到特定容器中,而不受 DOM 层级的限制。原创 2022-11-11 19:57:28 · 799 阅读 · 0 评论 -
vue内置组件:keep-alive
KeepAlive 通过缓存管理和特殊的挂载/卸载逻辑以达到减小同一个组件频繁的创建、销毁造成的性能开销的目的。原创 2022-11-10 20:47:38 · 1399 阅读 · 2 评论 -
VUE:组件
组件被编译为一个虚拟DOM,虚拟DOM中的props存储组件绑定的所有属性,在渲染时遍历虚拟DOM中的props数据判断数据是否是在选项对象中props被定义,如果定义了就存储在props中,否则就视为attrs存储在atts中。组件在注册生命周期时,会通过一个全局变量保存当前组件实例,然后当调用注册生命周期的函数时,将函数注册到当前实例上,实例上的对应事件使用数组存储事件处理函数,当触发对应的事件,遍历执行该事件存储的处理函数。组件的插槽会被编译成为函数,在渲染时调用对应的函数,并渲染函数返回的结果。原创 2022-10-29 16:11:03 · 682 阅读 · 0 评论 -
VUE:简易解析器实现
compileNode()方法读取元素的attribute,根据前缀判断是否为指令,如果是指令就把指令名称截取出来,并交给对应的指令函数执行,然后将函数执行结果赋值给元素。compileText()方法读取节点的nodeContent内容,使用replace将{{}}中的数据进行替换,然后把替换后的内容赋值给nodeContent。Compiler构造函数,用于获取指定元素的内容,并进行解析,根据内容的不同使用不同的函数进行处理。本文主要介绍解析器,如何将模板解析,然后替换,再输出到页面上。原创 2022-10-28 15:25:42 · 572 阅读 · 0 评论 -
Vue:array的变化侦测
这个过程中,我们去记录思考的过程,便于日后复习,梳理自己的思路。学习之乐,独乐乐,不如众乐乐,把知识讲给更多的人听,何乐而不为呢?接下来,实现array的拦截器。首先找出能够改变数组自身的数组api,分别为:push、pop、shift、unshift、splice、sort、reverse,然后使用自定义函数覆盖。先把数组原本的原型缓存起来,然后创建一个继承原本的原型的对象,在该对象上定义与数组api同名的api。接下来开始覆盖数组的原型,在原来侦听对象变化的基础上添加对数组数据变化的侦测即可。原创 2022-09-28 18:13:22 · 138 阅读 · 0 评论 -
Vue:object变化侦测
object的变化侦测的核心是监听object数据的变化,可以通过Object.defineProperty和Proxy实现,Vue2.x时,ES6支持不是很理想,采用的是Obejct.definedProperty,Vue3已经使用Proxy对数据侦测进行重写。object变化侦测的流程是当对象触发getter时对依赖进行收集,当对象触发setter时触发与该数据相关的所有依赖,就是通知所有使用了该数据的地方。变化侦测指的是对数据进行监听当数据发生变化时,对变化的数据重新渲染,实现响应式渲染。原创 2022-08-06 11:00:00 · 647 阅读 · 0 评论 -
vue-class与style
Vue样式,持续更新中……原创 2022-07-26 10:30:00 · 705 阅读 · 0 评论 -
vue3语法糖
script语法糖<template><div>{{count}}</div></template>import {ref} from 'vue'<script setup>const count = ref('0');<script>这种写法让script中的变量直接作为被暴露的数据,可以在模板中直接使用,不需要手动returnstyle语法糖<template><div :class="$sty原创 2022-05-13 20:38:40 · 1466 阅读 · 1 评论 -
Vue2.x与3.x生命周期
Vue什么是 VueVue.js 是目前最火的前端框架,Rect是最流行的前端框架(Rect除了可以开发网页之外还可以开发手机,Vue也可以用于开发手机)Vue.js 前端的主流框架之一,和Angular.js Rect.js 一起并称为前端的三大主流框架他不仅容易上手,Vue.js 是一套用于构建用户界面的框架,只关注视图层,还便于与第三方库或所有既有项目的整合为什么要学习流行框架......原创 2021-07-31 09:19:53 · 303 阅读 · 1 评论 -
vue2.x与3.x路由简介及简单封装
路由什么是路由后端路由:对于普通的网站,每个页面的链接都是url地址,所有的url地址都对应服务器上的资源前端路由:通过url的hash(#号)来实现不同的页面间的跳转安装下载链接在vue.js后面链接vue-router.jsnpm安装npm install vue-router创建路由路由传参通过query方式参,在to属性中用?后面接要传入的属性名和属性值<router-link to="/login?id=10">登录</router-link&原创 2021-07-28 16:46:50 · 380 阅读 · 0 评论 -
vue2.x与3.x组件
组件什么是组件为了拆分vue实例的代码量,用不同各组件划分不同的功能,需要什么功能就调用什么组件组件化和模块化模块化是从代码逻辑的角度进行划分的,保证每个模块功能的单一组件化是从ui界面的角度划分的,前端的组件化,方便ui的重用定义组件Vue.extend()创建var coml = Vue.extend({ template:'<h1>这是vue组件<h1>'});Vue.component('mycoml',coml);Vue.componen原创 2021-07-28 16:43:56 · 143 阅读 · 0 评论 -
vue计算属性和侦听器
计算属性:我们在开发当中通常会遇到这种情况,需要返回的是两个变量的计算值 ,那我们就在computed属性中去定义计算的方法:eg:我们现在有两个变量:fristname·和lastname 。我们想要页面输出的是fullname全名:方法一:用computed计算属性来实现(内置缓存机制)当更改age的时候,fullName 函数不执行;只有当更改firstname或 lastname ``fullname才会执行data(){return{ firstname:'hani', l原创 2021-01-23 10:13:07 · 145 阅读 · 1 评论 -
vue插槽
插槽插槽顾名思义,是一个容器,用来放置一些内容,也叫内容分发器。这些内容可以是文本、组件、html代码。插槽通常用来动态的插入一些内容。定义插槽插槽的关键词是slot,在要插入内容的地方放置<slot></slot>,一个插槽就定义好了,可以防止你想放置的内容基本插槽 <div id="app"> <slot>hello world</slot> </div>在插槽中间写入hello worldco原创 2021-01-23 09:52:18 · 113 阅读 · 0 评论 -
vue2.x过渡与动画
过渡过渡和动画分为单组件过渡和列表过渡。单组件过渡使用vue中的transition组件,该组件要有一个name属性,表示过渡的名称,该名称与过渡类名的开头相关联。当点击按钮时会更改show的值,从而控制div的显示与隐藏,在div在dom上插入和删除时会触发过渡效果。 <div id="app"> <input type="button" @click="show=!show" value="btn"> <transition name原创 2021-01-16 11:15:58 · 243 阅读 · 1 评论 -
vue2.X过滤器与修饰符
过滤器过滤器用于常见文本的格式化,用在两个地方,插值表达式即大括号内和 v-bind 中定义过滤器Vue.filter('过滤器的名称',function(){});调用过滤器{{name | 过滤器的名称}}可以多次调用{{name | 过滤器1的名称 | 过滤器2的名称……}}定义私有过滤器在 data 中的filters中定义私有过滤器过滤器在调用时有就近原则,如果共有过滤器和私有过滤器名称重合,使用私有过滤器filters:{ dateFormat:function()原创 2021-01-16 10:12:43 · 219 阅读 · 0 评论 -
vue导航守卫
导航守卫导航守卫是指在导航发生变化时调用的一系列方法。导航守卫的级别全局守卫全局守卫又分为全局前置守卫(beforeEach)、全局后置钩子(beforeAfter)和全局解析守卫(beforeResolve)beforeEach(全局前置守卫):当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中beforeAfter(全局后置钩子):这不是守卫,他不会改变导航不会接受next参数beforeResolve(全局解析原创 2021-01-09 15:55:53 · 173 阅读 · 0 评论 -
vue2.x与3.x路由模式
路由模式原创 2021-01-09 14:56:02 · 603 阅读 · 0 评论 -
vue概述
Vue什么是 VueVue.js 是目前最火的前端框架,Rect是最流行的前端框架(Rect除了可以开发网页之外还可以开发手机,Vue也可以用于开发手机)Vue.js 前端的主流框架之一,和Angular.js Rect.js 一起并称为前端的三大主流框架他不仅容易上手,Vue.js 是一套用于构建用户界面的框架,只关注视图层,还便于与第三方库或所有既有项目的整合为什么要学习流行框架企业为了开发效率提供开发效率的发展历程在 Vue 中一个最核心的概念,就是让用户不再操作DOM元素,解放原创 2021-01-03 16:30:14 · 274 阅读 · 3 评论 -
vue2.x与3.x指令
指令v-cloak解决插值表达式闪烁的问题v-text把内容显示出来,但会覆盖元素的内容v-html把内容当做 html 元素渲染,但会覆盖元素的内容v-bind绑定属性,把后面字符串中的值当做是变量将之绑定,可以简写为英文的 :要绑定的属性<input type="button" v-bind:title="mytitle"/>v-on绑定事件,缩写为@<input type="button" v-on:click=""/>v-moudel 和双向数据原创 2021-01-03 15:09:08 · 186 阅读 · 1 评论 -
vue组件及其通信
组件在vue中组件是一个可复用的vue实例创建组件的方式全局注册Vue.extend()创建var coml = Vue.extend({ template:'<h1>这是全局vue组件my-coml<h1>'});Vue.component('my-coml',coml);<div id="app"> <my-coml></my-coml> </div>Vue.component原创 2020-12-26 09:49:19 · 280 阅读 · 1 评论 -
vue2.x与3.x静态路由和动态路由
vue2.x与vue3.x的静态路由和动态路由原创 2020-12-26 10:53:05 · 1058 阅读 · 0 评论