-
vue3.0+vite+typescript+element-plus搭建项目（一）
随着vue3.0的越来越受欢迎，开始有许多公司和个人开始学习并使用vue3开发项目。我从接触学习并使用vue2，到现在的vue3，一直是vue的忠实粉丝和追随者。vue3也发布很长时间了，目前vue3+vite+ts再结合一些优秀的UI框架，如Element plus，Ant design，Naive UI，移动端的Vant UI，成为了较为流行的前端技术之一。那么今天就带大家...
-
vue 3 学习笔记 (七)——vue3 中 computed 新用法
vue3 中 的 computed 的使用，由于 vue3 兼容 vue2 的选项式API，所以可以直接使用 vue2的写法，这篇文章主要介绍 vue3 中 computed 的新用法，对比 vue2 中的写法，让您快速掌握 vue3 中 computed 的新用法。组合式 API 中使用 computed 时，需要先引入：import { computed } from "v...
-
从使用到自己实现简单Vue Router看这个就行了
Vue Router 基础让我们先来了解下Vue Router的简单使用吧，先了解怎么使用，之后再去想办法怎么去实现1.简介路由：本质上是一种对应关系分类分为前端路由和后端路由后端路由比如node.js 的路由是 URL的请求地址和服务器上面的资源对应，根据不同的请求地址返回不同的资源前端路由在SPA（单页应用）中根据用户所触发的事件改变了URL 在无需刷新的前提下 显示不同的...
-
如何手动解析vue单文件并预览？
开头笔者之前的文章里介绍过一个代码在线编辑预览工具的实现（传送门：快速搭建一个代码在线编辑预览工具），实现了css、html、js的编辑，但是对于demo场景来说，vue单文件也是一个比较好的代码组织方式，至少笔者就经常在写vue项目的同时顺便写写各种demo，但是分享不太方便，因为单文件不能直接运行看效果，基于此，笔者决定在之前的基础上再增加一个vue单文件的编辑及预览功能。...
-
Vuex 学习笔记
1.1 vuex的核心概念State （驱动应用的数据源）Mutation （以声明方式将 state 映射到视图）Action（响应在 view 上的用户输入导致的状态变化）Getter （对 Store 中的数据进行加工处理形成新的数据）1.1.1 Startstart 提供唯一的公共数据源，所以共享的数据要统一放到Store 的 Stare 中进行存储。// 创建 sto...
-
Vue.js 3.2 关于响应式部分的优化
Vue 3 正式发布距今已经快一年了，相信很多小伙伴已经在生产环境用上了 Vue 3 了。如今，Vue.js 3.2 已经正式发布，而这次 minor 版本的升级主要体现在源码层级的优化，对于用户的使用层面来说其实变化并不大。其中一个吸引我的点是提升了响应式的性能:More efficient ref implementation (~260% faster read / ~5...
-
尤雨溪凌晨官宣：Vue 3.2 已发布
今日凌晨，尤雨溪在微博平台官宣 Vue 3.2 已发布，并表示：<script setup> + TS + Volar = 真香Vue 3.2 版本包括许多重要的新功能和性能改进，但并不包含重大更改。新的单文件组件功能：`<script setup>` 是一种编译时语法糖，可在 SFC 内使用 Composition API 时极大地提升工作效率。`&l...
-
Vue之MVVM模型和MVC模型
MVVMMVVM简介核心思想：分而治之（不同业务代码放到不同业务模块当中，通过特定逻辑组织到一块）MVVM其实是 M、V、VM，即 Model-View-ViewModel 的缩写。它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得 ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。Vue.js 是...
-
总结50个Vue知识点，全都会你就是神
1. Vue的优点？Vue的缺点？优点：渐进式，组件化，轻量级，虚拟dom，响应式，单页面路由，数据与视图分开缺点：单页面不利于seo，不支持IE8以下，首屏加载时间长2. 为什么说Vue是一个渐进式框架？渐进式：通俗点讲就是，你想用啥你就用啥，咱也不强求你。你想用component就用，不用也行，你想用vuex就用，不用也可以3. Vue跟React的异同点？相同点：1.都使...
-
一个号称最完整的Vue UI组件库的Vue组件框架——PrimeVue
介绍PrimeVue是一个在Github上开源的，功能强大、易于使用、多功能、高性能的 Vue UI 组件库，可帮助Web开发者构建高性能的UI页面，在当前Vue3生态的生态下（PrimeVue全面支持Vue2和Vue3），是对Vue3生态的一个极大的补充和促进！我们来简单地看一看PrimeVue有何过人之处！Githubhttps://github.com/primeface...
-
Vue 中 强制组件重新渲染的正确方法
有时候，依赖 Vue 响应方式来更新数据是不够的，相反，我们需要手动重新渲染组件来更新数据。或者，我们可能只想抛开当前的DOM，重新开始。那么，如何让Vue以正确的方式重新呈现组件呢？强制 Vue 重新渲染组件的最佳方法是在组件上设置:key。当我们需要重新渲染组件时，只需更 key 的值，Vue 就会重新渲染组件。这是一个非常简单的解决方案。当然，你可能会对其他方式会更感兴趣...
-
Vue nextTick彻底理解
前言含义和使用nextTick的官方解释：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。啥意思呢，即我们对Vue中data数据的修改会导致界面对应的响应变化，而通过nextTick方法，可以在传入nextTick的回调函数中获取到变化后的DOM，讲起来可能还是有点梦幻，下面我们直接使用nextTick体验一下效果。比如我们有...
-
tiptap - 基于 vue 的优雅流畅的富文本编辑器
一款专为 vue.js 打造，设计优雅，体验流畅舒服的现代富文本编辑器。关于 TiptapTiptap 是一款专为 vue 打造的简洁明快的富文本编辑器，通过简单的设置能为用户提供多种优秀的文字编辑体验。Tiptap 官网基于 vue.js 的富文本编辑器Tiptap 最大的特点是预置的渲染，没有任何 CSS，用户可以更全面地控制段落标记和样式视觉设计以及交互动效简洁明快，能够...
-
Vuex 4 正式发布：打包现在与 Vue 3 一致
Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式。Vuex 采用集中式存储管理应用的所有组件组件的状态。换句话说，Vuex 就是帮开发者存储多个组件共享的数据，方便开发者对其读取的更改的工具。Vuex 4 正式版本现已正式发布。Vuex 4 的改进重点是兼容性。Vuex 4 支持 Vue 3，并提供了与 Vuex 3 完全相同的 API，因此用户可以在 Vue ...
-
Element UI 多选框组用法笔记
今天给大家分享一下Element UI 多选框组用法笔记，直接上代码！<html> <head></head> <body> <el-form> <el-form-item label="兴趣爱好:"> <el-checkbox-group v-model="form.che...
-
在Vue3中点击链接下载文件
我在用 Vue 3 重写我之前开发的 Vue 2项目的时候，在创建 Vue 3 的项目时没有直接在 HTML 里嵌入 vue 的 JavaScript 代码，而是通过 vue-cli 4.5.11 的方式创建的。发现它的项目文件的目录结构有所变化。那么在项目里需要提供一个功能，就是在点击 HTML 里的<a>标签后并不是进行页面的跳转，而是要直接下载文件。此时<...
-
vue3中对computed，watch等方法的详解
我们在使用vue3之前，先来看看vue2中mounted，computed，watch等都是怎么用的，钩子函数、计算属性computed和监控器watch，是我们在vue2中必不可少的必学方法，我们来对比学习看在vue3中如何使用，会加深我们的印象。请看下面的代码：<script> export default { data: { return {...
-
尤雨溪新品Vite的魔力，详解
Webpack工具的出现是为了解决 ES Modules 模块系统本身的环境兼容问题、以及零散的模块文件导致的频繁网络请求发送和模块化发散的问题等等。既然已经有了 Webpack，尤大再整一个 Vite 到底有啥用呢？本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器（module bundler）。Vue 脚手架工具 vue-cli 使用 we...
-
前端：ElementUI+VUE 日期控件禁用用法
今天给大家整理一下ElementUI+VUE 日期控件禁用用法，希望对大家有所帮助！HTML文件<el-date-picker v-model="value" type="date" :editable="false" placeholder="开始日期" value-format="yyyy-MM-dd" :picker-options="pic...
-
vue3的ref、reactive、toRefs特性详解
了解ref()、reactive()这两个特性之前，我们先回顾一下vue2中data和method方法。在vue2中我们定义一个响应式变量name，通过点击事件handle来改变name的值是通过如下方式写的。这样只要name改变则界面相应的会发生改变，这就是数据的双向绑定。<template> {{name}} <template> <...
-
封装一个基于Vue的评论留言编辑器组件
基本介绍现在市面上有非常多的基于 Vue 的组件库，但是看了好多都没有发现有关留言评论的组件，这对于想做一些文章信息展示类的项目可就显得棘手了，因为有太多的页面需要这个功能了，难道我们需要重复的去写（复制粘贴）这些代码吗？对于现在模块化体系逐渐完善的前端工程项目来说，一次性封装一个通用功能的组件式非常有必要的，那现在我们就去封装这样一个组件吧！必备技术（Vue）由于封装的组件式...
-
如何使用Select组件封装成级联组件
前言因为工作内容变更的原因，在20年的时候，我的前端技术栈由Angular转移到了Vue。 它们都是现阶段比较火的前端框架，在一开始的时候，需要快速地转换一下组件设计的思想。到现在也有半年多的时间了，我现在的前端技术栈主要如下：前端框架：Vue 2UI框架： Element UI开发语言： TypeScript使用这些技术，不断地开发、封装一些项目中的组件，乐此不疲。需求在项目...
-
ElementUI：文本框实现远程搜索的用法
今天继续给大家分享一下Element UI 多选框组用法笔记，直接上代码！1、HTML<el-form-item label="用户列表"> <el-autocomplete class="inline-input" @clear="clearUser" clearable ...
-
vue 监听 全屏退出事件
解决1["fullscreenchange", "webkitfullscreenchange", "mozfullscreenchange"].forEach((item, index) => { window.addEventListener(item, () => { // 执行的操作 }); });
-
Vue.js添加全局过滤器的几种方法
过滤器基础知识Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。<!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | formatId">&l...
-
从零开始学VUE
Vue.js作为目前最热门最具前景的前端框架之一,帮助我们快速构建并开发前端项目。 本文旨在帮助大家认识Vue.js，了解Vue.js的开发流程。本节导航Vue CLI安装创建项目启动打包环境变量Vue生命周期Data模板语法复杂业务组件常用库Element安装配置栅格系统Form 表单Table 表格Vue CLIVue CLI 是官方提供快速搭建Vue项目的脚手架工具零配置...
-
vue前端根据菜单数据生成当前路由的面包屑
这段时间做了个项目，之前的前端直接用vue路由的matched参数生成面包屑，我接手项目后，发现这样生成面包屑有时候不太准，就封装了个从菜单数据里生成面包屑的方法，分享给大家，大家有其他更好的方法也可以分享出来！图一是菜单数据的json结构图二是封装的方法path：当前页面的路径！必填menuData：菜单数据！必填最后返回的是由菜单数据生成的面包屑数组！子菜单层级无限！
-
记录基于vue在我的真实项目中的性能优化
最近一段时间一直在处理公司的一个内部项目哈，因为页面卡的问题被吐槽了一个月了。因为是接手别人的项目，虽然说不是自己直接造成的。但是解决这个问题已是迫在眉睫了。可能我们在做前端开发的时候，很少去关注内存的问题，这是因为JS有自己垃圾回收机制，如果代码不是滥用闭包，一般来说，不会出现性能问题。先来大概说下我的项目中性能瓶颈的现象：项目是一个基于electron+vue的一个类似微信...
-
Vuex状态管理插件
一、引言在Vue.js的组件基础中，我们在两个组件之间传值使用的是props（父组件向子组件传值），自定义事件this.$emit方法（子组件向父组件传值），对于简单的组件比较少的，而且依赖不复杂的我们可以使用，但是，如果组件很多，而且依赖很复杂，两个组件不一定是父子关系，而且关系比较远的时候，如果我们还是使用传统的传值方式，那将会是一场灾难（两个距离比较远的组件如果使用传统方...
-
快速入手vue3.0新增常用API，起步上车
1. 初始化项目2. setup方法 setup是vue3.x中新的操作组件属性的方法，它是组件内部暴露出所有的属性和方法的统一API。setup的执行时机在：beforeCreate 之后 created之前，可以接受props数据ctx上下文对象(这些属性在 vue 2.x 中需要通过 this 才能访问到，在 vue 3.x 中无法访问到 组件的this)。3. reac...
