本文已整理到Github，地址?blog。如果我的内容帮助到了您，欢迎点个Star???鼓励鼓励:)~~我希望我的内容可以帮助你。现在我专注于前端领域，但我也将分享我在有限的时间内看到和感受到的东西。Vue2和Vue3有什么不同？我们以一些简单的示例，来看看具体的变化。你可以查看Vue3文档，以了解更加详细的内容示例。创建模板Vue3支持Fragments，这意味着组件可以有多个根节点。设置数据主要的区别所在：OptionsAPI与CompositionAPIOptionsAPI将我们的代码分为不同的属性：data、computed、methods等。CompositionAPI允许我们按函数

文章序设计稿给的是px，但是需要做自适应，老生常谈的问题了，使用flex布局+rem+按比例设置根节点font-size大小来实现，这里最麻烦的就是把px改写成rem，手工改重复性太大，所幸，可以使用webpack插件在打包过程中帮我们自动转化使用方法1.安装包npmipostcss-px2rem2.编写配置文件编写核心代码，命名随意，我这里命名为px2rem并放在src/utils文件夹内//基准大小constbaseSize=100//设置rem函数functionsetRem(){//当前页面宽度相对于1920宽的缩放比例，可根据自己需要修改。constscale=document.do

目录大纲一、Cli说明二、安装并创建Cli项目三、Cli项目结构说明一、Cli说明CLI是一个基于Vue.js进行项目搭建的脚手架系统，CLI(Command-LineInterface)是一个命令行界面工具,俗称脚手架。CLI是基于webpack进行项目构建，由@vue/cli和@vue/cli-service组成。CLI的目标是将Vue项目的创建开发标准化，让开发者专注于开发项目，而不必花费太多时间去纠结配置的问题。简单的说就是一个创建标准化vue项目的工具@vue/cli@vue/cli是一个全局安装的npm包，提供了终端里的vue命令，是交互式的脚手架工具。我们一般用@vue/cli来

目的：项目投入使用发现很多使用起来不舒服的地方，进行优化注意!!!：最新的一次创建项目运行时候以及配置eslint部分出现了许多问题，可以结合最新的一篇vite+vue+ssg做官网再记录一下项目创建结合起来查看是否有你遇到的问题前提：在上一篇vite+vue3多页面配置记录references,loadEnv等中我详细记录了通过各种配置了解多页面项目。结果：最终代码放到gitee这里的release分支vite-vue3-multip-release之前配置不合理的地方：为了让项目启动的时候自动打开html，修改了项目根目录到views下面root：'./src/views/'，以至于out

本次让我们系统的熟悉vue的面试常用题目，无论是给准备面试还是准备跳槽的小伙伴，一个学习以及温故知新的版块。这其中加入了我的理解，我尽量用白话文和易懂的语言形式进行解释，如果有地方解释的不正确或者不准确的情况，还请大家不吝赐教。2022年大环境的不景气，让我们用知识充实自己，面对生活的一次次挑战与考验，加油！入门级：1：什么是mvvm？MVVM是Model-View-ViewModel的简写，是M-V-VM三部分组成。它本质上是MVC的改进版本，MVVM就是将其中的View的状态和行为抽象化，其中ViewModel将视图UI和业务逻辑分开，它可以取出Model的数据同时帮忙处理View中由于需

vue3发布出来有一段时间了，这篇文章记录一下vue2与vue3的一些区别1.生命周期vue3中新引入了setup生命周期，setup在beforeCreate生命周期之前执行，这个时候data与methods还没有初始化，dom没有挂载，意味着在setup方法里不能获取data，methods，computed与domdestroyed生命周期选项被重命名为unmountedbeforeDestroy生命周期选项被重命名为beforeUnmount1.1vue2生命周期beforeCreate#实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用created#实例创建完成后被立即同

0.前端路的概念和原理image.png1.router-view他的作用很单纯:占位符:只要在项目中安装和配置了vue-router,就可以使用router-view这个组件了,他的作用很单纯:占位符2.路由跳转about2.1他有两个属性:--to属性:是一个字符串或者是一个对象--replace属性:设置replace属性的话,当点击时,会调用router.replace(),也就是没有前进后退功能了3.active-class属性:设置激活a元素后应用的class,默认是router-link-active,这个有什么用呢?--看以下截图:看以下截图:image.png0.1HTML5

一.URL的hash前端路由是如何做到URL和内容进行映射呢？监听URL的改变。URL的hash--URL的hash也就是锚点(#),本质上是改变window.location的href属性；--我们可以通过直接赋值location.hash来改变href,但是页面不发生刷新；--hash的优势就是兼容性更好，在老版IE中都可以运行，但是缺陷是有一个#，显得不像一个真实的路径。实际截图image.png二.HTML5的Historyhistory接口是HTML5新增的,它有l六种模式改变URL而不刷新页面：--replaceState：替换原来的路径；--pushState：使用新的路径；--

Vue3的父子组件传值、绑定表单数据、UI库的二次封装、防抖等，想来大家都很熟悉了，本篇介绍一种使用Typescript的方式进行统一的封装的方法。基础使用方法Vue3对于表单的绑定提供了一种简单的方式：v-model。对于使用者来说非常方便，v-model="name"就可以了。自己做组件但是当我们要自己做一个组件的时候，就有一点麻烦：https://staging-cn.vuejs.org/guide/components/events.html#usage-with-v-modeldefineProps(['modelValue'])defineEmits(['update:modelV

新建文件夹hlAlert在hlAlert文件夹下新建组件模板的HlAlert.vue文件在hlAlert文件夹下新建对应组件模板的index.js文件目录结构HlAlert.vue文件写好组件的正常逻辑(样式没有贴进来){{ensureBtnText}}取消exportdefault{data(){return{message:'111'}},methods:{ensure(){this.ensureHanlder()this.$el.parentNode.removeChild(this.$el)},close(mode){mode===2&&this.cancelHandler()this