vue
文章平均质量分 89
vue
醉逍遥neo
少而精,胜于多而劣。
展开
-
Vue3 有哪些提升
这里的主要关注点是vue3相比于vue2带来了哪些提升,具体API的使用就不再细述。下面从vue3的几大新特性来逐个展开。一、Composition APIComposition API,即组合式API高内聚聚合业务逻辑,提高代码可读性vue2 通过属性选项(options,如 data、computed、methods 等)书写代码逻辑,代码逻辑点是碎片化、跳跃式的,在大型项目和复杂组件中使得维护变得困难。vue3 的组合式API能够将分散的逻辑代码组合在一起,使代码逻辑更清晰易原创 2021-12-09 09:41:41 · 1631 阅读 · 0 评论 -
vue 理解&使用render函数
render函数是vue中生成虚拟dom的底层api,可用于在组件封装中使用js编写动态模板,实现js的完全编程能力。vue中在一些复杂场景下使用template模板不太方便,例如需要引入大量子组件时,使用template模板会使代码重复冗余,这时用render函数就可以轻松解决问题。一、render函数的背景在深入渲染函数之前,建议先了解一下vue的渲染原理。1、虚拟domvue通过建立一个虚拟DOM来追踪自己要如何改变真实DOM。真实DOM的属性有几百个,为了更高效的来完成dom对比及局部更新原创 2021-09-10 17:12:33 · 4200 阅读 · 0 评论 -
script setup 语法使用
vue3.2正式版已经发布,script setup语法已经由实验性质改为了正式语法,可以放心大胆的在项目中用了。官方文档:https://v3.cn.vuejs.org/api/sfc-script-setup.html#basic-syntax相比于常规的composition api语法,script setup语法更加简练方便,官方文档纯英文且不够详细,下面分享一下个人整理的语法使用方式。(看这篇文章之前需先提前熟悉vue3新语法变化)。1、基础用法<template> &原创 2021-08-18 15:36:58 · 14694 阅读 · 4 评论 -
ref、reactive、toRef、toRefs的区别
vue3.0里给数据添加响应式有很多api可用,有时傻傻分不清,网上还有很多错误的解读,哎,分享一下个人的理解。1、reactivereactive 用于为对象添加响应式状态。接收一个js对象作为参数,返回一个具有响应式状态的副本。获取副本原始数据值的时候直接获取,不需要加.value参数只能传入对象类型import { reactive } from 'vue'// 响应式状态const state = reactive({ count: 0})// 打印count的值co原创 2021-01-06 18:41:38 · 31778 阅读 · 7 评论 -
vue3 自定义hooks / 可组合函数
vue2.x下封装的mixins在引入文件都是通过this上下文来调用封装的属性或方法,而在vue3.0的composition API下不再使用this上下文,所以,实际上这两者就是冲突的,只能重新封装一套全新的方式来使用类似mixins的功能。一、vue2.x里mixins的痛点传统的mixins有很多让人诟病的地方,mixins 的深度合并非常隐式,这让使代码逻辑更难理解和调试,具体表现为如下几点:mixin 很容易发生冲突:因为每个特性的属性都被合并到同一个组件中,所以为了避免 proper原创 2020-12-25 17:41:06 · 6242 阅读 · 2 评论 -
项目升级vue3.0总结
vue3.0正式版已经发布几个月了,ui框架也跟进的差不多了,咱也得紧跟潮流不能落伍,所以趁着空闲就升级了项目vue框架,由vue2.6升级到vue3.0,总结下升级过程中的遇到的问题及解决方法。一、项目简介基于vue2框架的多项目聚合方案,分为多个子项目,主要运行在hybrid app中,之前也写过一个教程,讲了这个项目的搭建过程,传送门。不过原项目刚搭建时是js版本,在我升级vue3.0之前这个项目已经升级为ts版了(可参考vue2升级ts教程),所以这次就只升vue框架就行了,如果你的项目还没t原创 2020-12-17 16:53:13 · 10596 阅读 · 7 评论 -
vue2配置使用typescript教程
本文是vue项目的js升级ts教程,也可以作为vue项目的ts使用教程。项目背景:vue版本:2.6.11基于vue-cli4脚手架生成已配置eslint(配置教程参考:传送门)一、安装依赖vue ts基础:npm i -D typescript @vue/cli-plugin-typescriptts校验相关:npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/eslint-config-原创 2020-10-26 18:31:46 · 12939 阅读 · 4 评论 -
vue elementui 表格搜索筛选栏组件封装
1、背景vue后台管理系统,会有很多表格页面,表格上方会有一些搜索选项,表格直接使用el-table即可,而搜索栏区域每次写起来都很繁琐,而且多人开发情况下每个人写的样式都不相同,布局样式无法统一。所以要考虑对搜索栏做一个封装,统一配置引用,提升开发维护效率和界面统一。完成后的效果大概就是长这样:2、分析项目使用的是elementui框架,搜索栏这种表单提交,首先要使用el-form组...原创 2020-01-19 15:35:54 · 18266 阅读 · 27 评论 -
vue elementui 实现图片上传后拖拽排序功能
vue elementui 实现图片上传后拖拽排序功能。1、主要技术栈vue、elementui、vuedraggable2、需求分析产品的要求就是多图上传完后,可以对图片列表进行拖拽排序。本身elementui的el-...原创 2020-01-19 11:12:15 · 22647 阅读 · 77 评论