- 博客(154)
- 收藏
- 关注
RSS订阅原创 Vue3使用setup-extend简化组件名写法
如果我们在Vue3中要使用setup的语法糖，就需要使用两个script标签，一个用于设置组件的name属性，一个用于编写setup中的代码。因此我们可以使用插件来进行简化，将name作为script标签的属性来设置组件名。但是我们有觉得光是因为一个name属性就多写一个script标签有点麻烦了。
2024-01-29 22:17:55
675
原创 better-scroll插件使用
当我们在制作APP页面的时候，往往需要将内容固定，但是固定后并不能滑动，所以可以借助better-scroll插件来实现滚动。
2023-12-29 09:25:59
416
原创 Vue使用ly-tab实现选项栏
如果需要修改样式，直接查找到该HTML元素上的class类进行修改样式，修改的时候要使用!important 进行覆盖。使用ly-tab插件可以实现如下效果。1.安装ly-tab。
2023-12-26 19:34:59
540
原创 Vue项目打包处理map文件
项目打包过后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。有了map文件就可以像未加密压缩那样，准确的输出是哪一行哪一列有错。再次npm run build进行打包，就不会打包map文件了。其实大部分情况下项目上线了，也不会再去管哪一行报错的问题了。所以该文件如果项目不需要是库去除掉的。
2023-12-21 17:23:00
690
原创 Vue-图片懒加载
npm i [email protected] // 如果是vue2就需要安装1.3.3版本。可以在使用该插件的时候传入一个配置对象，其中就可以配置loading配置项，其为图片还没返回时的加载图。我们一般会将这类图片放在assets文件夹下，图片是默认暴露的，所以使用require就可以获取。配置完成后，在服务器还未返回数据的时候，会显示我们配置的loading图片。实现图片懒加载可以使用vue-laz。1. 安装vue-lazyload。vue-lazyload并使用。
2023-12-19 21:39:47
461
原创 使用qrcode实现微信二维码转网址链接
但是我们并无法直接打开或者是展示该二维码，毕竟浏览器不认识weixin://xxx ，只认识http://xxx。QRCode.toDataURL(text) // 这里的text是 "weixin://xxx"如果想要实现weixin://xxx 转化为http:// 的形式，可以使用第三方库，3. 使用qrcode。2. 引入qrcode。
2023-12-14 19:52:28
668
原创 使用 watch+$nextTick 解决Vue引入组件无法使用问题
所以我们就可以使用watch 来监视是否改变从而达到判断数据是否已经请求回来了，使用$nextTick 等到DOM已经放到页面上后再执行new Swiper。也就是说，在new Swiper的时候，数据还没从服务器返回回来new Swiper操作就已经执行完了！比如我们在下面的Swiper例子中，我们需要new Swiper 才能让这个这个轮播图运行起来。如果我们想要在这些结构中传入自己从服务器请求中获取的数据就会出现无法显示的问题。我们在new Swiper对象的时候必须要保证DOM元素是完整的。
2023-11-28 20:59:13
596
原创 使用mock.js模拟数据
我们在mock文件夹下创建一个mockServe.js 文件，用于编写mock模拟数据的相关代码。我们将数据全部放在xxx.json文件夹下，里面配置我们需要的JSON格式的数据。Mock.mock("请求地址", {code:xxx, data:xxx})我们创建一个mock文件夹，用于存放mock相关的模拟数据和代码实现。然后就可以使用我们配置的虚拟接口去发送请求获取到mock虚拟数据了。如果json数据中有用到图片，记得配置图片的路径。我们编写完如上代码过后必须要引入，否则就没有意义。
2023-11-28 10:04:05
658
原创 解决Vue编程式导航路由跳转不显示目标路径问题
我们配置一个编程式导航的路由跳转，跳转到 /search 页面，并且携带categoryName和categoryId两个query参数。如果我们点击跳转，路径应该是localhost:8080/#/search?我们在search路由的配置上配置了一个params 参数占位符。我们可以在占位符后加上一个问号，表示该参数可传可不传。但是我们上面并没有使用params参数进行传参！可能是在路由配置上出了问题。
2023-11-26 21:48:58
764
原创 事件委派+自定义属性+编程式导航实现路由跳转及传参
我们在上面使用了事件委派后，改标签下的所有元素都拥有了该事件，那我们接下来要做的就是判断我们点的到底是不是a标签，只有我们点击了a标签才会实现路由跳转，点击h3，dt，div啥的都不会跳转。我们可以使用自定义属性来标识该标签是否为a标签。:data-属性名 = "属性值"我们给每一级菜单都加上一个categoryName和categoryId属性，其值为就是我们要传参的菜单名和该标签的id号。categoryName属性用来判断点击对象是否为a标签和传参，categoryId用来传参。
2023-11-26 21:32:40
464
原创 函数的防抖与节流
防抖就是将所有的触发都取消，在规定的时间结束过后才会执行最后一次，也就是说连续快速的触发只会执行最后一次结果。也可以理解为游戏里的回城按钮，每点一下就会重新刷新回城进度，永远以最后一次点击为准。例如：我们现在有一个输入框，在没有使用防抖的情况下，我们输入一个字符就会给服务器发送一次请求。但是我们使用防抖过后，我们只会发送最后一次输入事件触发的请求。
2023-11-26 14:31:40
488
原创 axios二次封装配置请求拦截器和响应拦截器
因为我们可以使用请求拦截器在发送请求之前处理一些业务，使用响应拦截器在服务器数据返回后处理一些业务。我们通常创建一个api文件夹，再创建一个request.js文件，用于存放重写后的axios。我们为什么要对axios进行二次封装？
2023-11-23 20:08:58
952
原创 Vue 重写push和replace方法，解决：Avoided redundant navigation to current location
我们输出一下引入的VueRouter构造函数，会发现在其prototype下的push方法和replace方法。既然push方法是我们引入的vue-router中的方法，那么我们就去找创建$router 的实例对象。但是使用这种方法治标不治本，难道我们每一次调用push和replace都要额外写两个回调函数吗？我们都知道，我们在使用一个Promise对象是时候需要配置成功执行函数和失败回调函数，所以我们只需要在使用push方法的时候额外传入一个成功回到函数和一个失败回调函数即可。
2023-11-22 21:28:10
591
原创 Vue3 常用组件
Vue2 的template 模板中必须要有一个根标签，而我们在Vue3 的模板中不需要使用根标签就能渲染，因为Vue3 在内部会将多个标签包含在一个Fragment 虚拟元素中。好处就在于可以减少标签的层级，减小内存占用。
2023-11-20 21:49:40
311
原创 Vue3 响应式数据类型的判断
isProxy -- 检查一个对象是否是由 reactive 或者readonly 方法创建的代理。响应式数据类型常用的有ref、reactive、readonly 这三种数据类型。isReadonly -- 检查一个对象是否是由readonly |创建的只读代理。isReactive -- 检查一个对象是否是由reactive创建的响应式代理。isRef -- 检查一个值是否为一个ref对象。
2023-11-20 20:44:49
201
原创 Vue3 provide 和 inject 实现祖组件和后代组件通信
provide 和 inject 能够实现祖组件和其任意的后代组件之间通信： 我们在祖组件中使用provide 将数据提供出去。使用provide 之前需要先进行引入：语法格式如下：例如：我们将祖组件中的person 使用provide提供出去我们在后代组件中使用inject 来使用数据。使用inject之前需要在该组件中对其进行引入：使用语法：我们在后代组件中接受上面祖组件提供的person 数据
2023-11-20 20:28:21
152
原创 Vue3 customRef自定义ref 实现防抖
当我们在模板中读取使用自定义ref 定义的数据时就会调用get 函数，修改数据时就会调用set 函数。而set 函数中，参数newValue为value修改后的值，我们需要将新的值赋值给传入的value值，才能实现页面的响应式。原因就在于我们改变value值后触发get 函数后并没有去重新解析模板，set 也没有收到解析模板的命令。因此customRef 函数中又有两个参数，track 函数和trigger 函数。在这个函数中，我们有一个返回值，这个返回值是customRef 函数。
2023-11-20 20:08:39
523
原创 Vue3 toRaw 和 markRaw
我们可以使用ref 和 reactive 将普通对象类型的数据变为响应式的数据。我们可以使用toRaw 将reactive 对象的数据变为一般对象类型的数据。使用toRaw 需要先进行引入：语法格式：const xxx = toRaw(数据)注意：toRaw不能用在ref 对象上，如果用在ref 对象上将不起作用。
2023-11-18 21:45:00
390
原创 Vue3 readonly 和 shallowReadonly
使用readonly 可以将数据变为只读的，不管这个数据是ref对象类型的数据还是Proxy对象类型的数据。使用readonly 需要先进行引入：语法格式：const xxx = readonly(数据);只读表示数据只能被读取而不能被改变，不能和数据可以改变但是没有响应式混淆！
2023-11-18 19:37:22
178
原创 Vue3 shallowRef 和 shallowReactive
使用shallowRef之前需要进行引入：使用方法和ref 的使用方法一致，以下是二者的区别：如果ref 和 shallowRef 都传入的是普通数据类型的数据，那么他们的效果是一样的，数据都能实现响应式。如果ref 和 shallowRef 传入的是对象数据类型的数据，那么ref 中的数据能够实现响应式，而shallowRef 中的数据无法实现响应。因为很简单，如果ref中传入的是对象数据类型的数据，那么就会调用reactive 形成拥有对象响应式的Proxy 对象。
2023-11-18 18:56:56
505
原创 Vue3 toRef函数和toRefs函数
为什么呢？因为我们返回的数据有问题，例如我们返回了 name: person.name，我们其实返回的并不是person的name 属性，而是返回的这个属性的属性值。也就是说，你返回的是 name: "张三"。他并不是一个ref 对象，所以无法拥有响应式。
2023-11-18 18:12:56
124
原创 Vue3 自定义hook函数
我们将usepoint.js 文件编写完成后，需要在组件中进行引入和使用。直接使用一个变量接收函数的返回值，然后return 出去即可。setup() {// 点击页面输出坐标return {num,point},
2023-11-16 20:23:54
347
原创 Vue3 生命周期
如下是Vue3的生命周期函数图： 1. Vue2 中，只要创建Vue实例对象而不需要挂载就可以实现beforeCreate 和 created 生命周期函数。Vue3中必须要将Vue实例对象挂载完成，所有的准备工作做完，才可以开始实现beforeCreate 和 created 生命周期函数。2. Vue2 我们销毁组件，触发的是beforeDestroy 和 destroyed 函数。在Vue3中，我们销毁组件变为了卸载组件，实现的功能是一致的，不过只是称呼变了，触发的生命周期函数为beforeUnm
2023-11-16 19:26:02
205
原创 Vue3 watch监视和watchEffect函数
Vue3 中的watch使用效果和Vue2 中配置watch配置项的使用效果是一致的。使用watch监视之前，需要先对watch进行引入。
2023-11-14 21:01:36
567
原创 Vue3 Computed属性
set (value) { // 对修改值value进行操作 }计算属性 = computed( ()=> { return 计算属性值 })这种写法用于计算属性需要修改的场景，能够自定义get和set来对值进行操作。get () { retrun 读取值 },计算属性 = computed({
2023-11-14 17:53:57
57
原创 Vue3 ref函数和reactive函数
我们在setup函数中导出的属性和方法虽然能够在模板上展示出来，但是并没有给属性添加响应式，因此，我们需要使用ref函数来为我们的数据提供响应式。
2023-11-13 20:07:24
1292
1
原创 Vue3 数据响应式原理：Proxy和Reflect
我们在Vue2中使用的是Object.defineProperty方法来实现数据响应式的，可以通过get和set方法来监听对象的访问和修改。但是并不能响应对象中属性的增加和删除，只能使用Vue.$set 和Vue.$delete 来对对象中的属性进行增加和删除。数组也不能直接通过下标来对数组进行修改，只能使用Vue封装过的数组方法来实现数组的响应式。以上问题在Vue3中就不会存在，因为其使用的是Proxy代理。
2023-11-13 20:04:21
470
原创 Vue3 setup函数
setup函数是Vue3中全新的一个配置项，值为一个函数，是所有 Composition API 中“表演的舞台”。我们在Vue2中用到的所有数据、方法，都需要配置在setup中。
2023-11-12 21:32:57
180
原创 Vue多级路由的实现
router-link to="完整路径">内容component : 子组件。path : "子路径",component : 父组件,path : "/父路径",注意：子路径不能带 ' / '
2023-11-06 20:58:09
312
原创 Vue-router 路由的基本使用
Vue-router是一个Vue的插件库，专门用于实现SPA应用，也就是整个应用是一个完整的页面，点击页面上的导航不会跳转和刷新页面。
2023-11-06 19:46:50
153
原创 VueX 模块化和namespace
当我们的项目很大的时候，VueX中的代码会越来越多，会有处理数据的，处理人员列表的，处理订单的...如果我们将这些东西都写在一个state、actions和mutations中的话，就非常不方便后期的维护。所以我们引入了VueX的模块化的概念，每一个模块存储对应操作的数据和方法，方便后期的维护。
2023-11-04 20:59:16
162
原创 VueX mapState、mapGetters、mapActions和mapMutaions 的使用
如果我们想要读取VueX中的State数据的Getters数据时，需要使用$store.state.数据名 和 $store.getters.数据名。当我们State和getters中的数据多了以后，书写会很麻烦：如果我们想要使用方便可以配置计算属性来简化书写：但是这样配置计算属性过于繁琐，为了便于书写，VueX为我们提供了mapState和mapGetters来方便我们书写。
2023-11-04 17:37:10
243
原创 VueX中的getters配置项
当我们想对VueX中的state中的数据进行处理，我们就可以使用getter配置项。就像是组件中的数据和计算属性之间的关系。属性名 (state) {return 处理结果;我们能够直接拿到state进行操作，并返回操作结果。如：实现将sum数据放大10倍。
2023-11-02 21:30:42
152
原创 VueX的基本使用
我们在store文件下将index.js文件基本的配置配置完成过后就可以进行正式的使用了。我们现在要实现以下场景：在VueX中有一个值sum，在组件中可以进行自定义加减的操作。
2023-11-02 21:13:56
78
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人