// 定义混入方法时，需要在类选择器之后添加一个小括号// 定义混入方法.abc () {color: red;}.active {border: 1px solid blue;// 使用混入方法.abc();}.current {background: orange;// 使用混入方法.abc();}混入的好处：把重复的代码抽离出去，使用的时候可以多次导入，降低代码的冗余度定义一个less文件/

今天我们手动封装一个下拉加载更多组件，类似于vant组件库中的list功能loading.vue<template><div class="infinite-loading" ref="container"><div class="loading" v-if="loading"><span class="img"></span><s

友友们，今天我们来使用Vue3封装一个轮播图组件第一步：我们先来封装一个轮播图组件的通用组件：（1）轮播图组件的结构 carousel.vue<template><div class='xtx-carousel'><ul class="carousel-body">// 放置图片<li class="carousel-item fade"><R

在Vue3中封装一个导航栏组件，并且实现，随着滚动条滚动实现一个吸顶效果导航栏组件的效果图：滚动条滚动以后的吸顶效果示意图：具体代码展示：<template><header class="app-header"><div class="container"><!-- 头部导航区域 --><HeaderNavCommon /><...

computed函数，是用来定义计算属性的，计算属性不能修改应用场景：基于已有的数据，计算一种数据（1）基本使用：只读<template><div><div>计算属性</div><button>点击</button><div>今年：{{age}}岁了</div><div>明年：{{nextA

使用require.context() 是webpack提供的一个自动导入的API大致步骤：使用 require 提供的函数 context 加载某一个目录下的所有 .vue 后缀的文件。然后 context 函数会返回一个导入函数 importFn它又一个属性 keys() 获取所有的文件路径通过文件路径数组，通过遍历数组，再使用 importFn 根据路径导入组件对象遍历的同时进行全局注册即可

在vue3中setup默认返回的普通数据不是响应的，如果希望数据是响应式的，有4种方式，今天我就来和大家介绍一下这4种方式（1）reactive（）：reactive是一个函数，它可以定义一个复杂数据类型，成为响应式数据。代码演示：<template><div>数据响应式</div><div>{{ obj.msg }}</div><