![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue3
文章平均质量分 63
进阶学习中
勇敢牛牛,冲冲冲
勇敢牛牛,不怕困难
展开
-
vue2和vue3的区别
vue2和vue3的区别main.jsapp.vue选项式(option API)和组合式(Composition API)钩子函数路由vuex响应式数据main.jsmain.js入口文件 :初始化实例使用的插件(css、router、store),将内容渲染到页面上,项目文件的入口,执行js的时机是从main.js从上到下的执行的vue2import Vue from 'vue'import App from './App'import router from './router'new原创 2021-09-10 22:01:50 · 314 阅读 · 0 评论 -
vue3项目头部吸顶
头部吸顶1.功能实现背景2.交互要求3.实现思路4.具体实现4.1新建吸顶导航组件src/layout/components/header-sticky.vue4.2Layout首页引入吸顶导航组件 src/views/layout/index.vue4.3在滚动到78px完成显示效果(添加类名)4.4 通过控制滚动距离,动态添加类名 src/views/layout/components/header-sticky.vue5.基于第三方实现5.1安装@vueuse/core 包,它封装了常见的一些交互逻辑原创 2021-09-14 19:36:05 · 1839 阅读 · 0 评论 -
vue3手动封装骨架屏组件
骨架屏1.封装组件2.封装插件:插件定义 src/componets/library/index.js 使用插件 src/main.js3.最后使用组件完成左侧分类骨架效果: src/views/home/components/home-cate.vue5.效果展示1.封装组件<template> <div class="xtx-skeleton" :style="{width,height}" :class="{shan:animated}"> <!-原创 2021-09-14 20:44:29 · 382 阅读 · 0 评论 -
vue3实现图片懒加载
图片懒加载1.目的2.具体实现2.1 在src/components/library/index.js定义指令2.2使用指令1.目的当图片进入可视区域内去加载图片,且处理加载失败,封装成指令2.具体实现2.1 在src/components/library/index.js定义指令import defaultImg from '@/assets/images/200.png'const defineDirective=(app)=>{ //扩展自定义指令,lazyload是指令名称 a原创 2021-09-16 18:45:16 · 607 阅读 · 0 评论 -
vue3.0手动封装分页组件
封装分页组件1.父组件引入2.子组件1.父组件引入src/views/goods/components/goods-comment.vue <!-- page表示初始化分页时,默认显示第几页 --> <XtxPagination @change-page='changePage' :pagesize='reqParams.pageSize' :total='total' :page='1' /> //调接口 import {findCommentListByG原创 2021-09-23 11:24:18 · 438 阅读 · 0 评论 -
vue3.0手动封装消息提示框
封装消息提示框1.使用场景2.提示组件 message.vue3.滑动效果4. 通过方法的形式调用1.使用场景场景还是比较多的 例如常见的登录、做一些功能发送失败的ajax都可以用弹框提示2.提示组件 message.vue<template> <div class="xtx-message" :style="style[type]"> <!-- 上面绑定的是样式 --> <!-- 不同提示图标会变 --> <i转载 2021-09-23 18:45:02 · 2038 阅读 · 0 评论