随笔分类 -  vue3.0

上一页 1 2 3 下一页

这里有我的个人心得 和 学习笔记
vue监听 浏览器后退 前进按钮
摘要:Vue监听浏览器的后退与前进按钮 // 检查浏览器是否支持history API if (window.history && window.history.pushState) { // 如果支持,给window添加popstate监听事件,用于监听后退按钮的点击 window.addEventLi 阅读全文

posted @ 2021-09-27 19:31 完美前端 阅读(2529) 评论(0) 推荐(0)

安装vue3
摘要:1、安装Vue CLI脚手架: - 首先,新建一个文件夹,在文件夹内打开命令行(cmd)。 - 输入以下命令来全局安装Vue CLI脚手架: ``` cnpm install -g @vue/cli ``` - 注:这里使用的是cnpm命令,确保您已经安装了cnpm。如果您使用npm,只需将cnpm 阅读全文

posted @ 2021-09-17 18:36 完美前端 阅读(712) 评论(0) 推荐(0)

vue 刷新页面的几种方法
摘要:1、最直接整个页面重新刷新: // 使用location.reload()方法刷新页面 location.reload() // 使用Vue路由的$router.go()方法刷新当前页面 this.$router.go(0) 这两种都可以刷新当前页面的,缺点就是相当于按ctrl+F5 强制刷新那种, 阅读全文

posted @ 2021-09-13 22:55 完美前端 阅读(2552) 评论(0) 推荐(0)

vue 巧妙刷新 provide 和 inject
摘要:// 导入vue中的相关方法 import { provide, reactive, nextTick } from "vue"; // 定义全局数据 let globeData = reactive({ isRouterAlive: true }) // 通过条件渲染来控制router-view的 阅读全文

posted @ 2021-09-11 22:19 完美前端 阅读(486) 评论(0) 推荐(0)

vue3 注册全局的toast组件
摘要:完整的代码, 可以复制引用 toast组件 <template> <Transition name="down"> <div class="xtx-message" :style="style[type]" v-show="visible"> <!-- 上面绑定的是样式 --> <!-- 不同提示图 阅读全文

posted @ 2021-09-04 22:44 完美前端 阅读(2607) 评论(1) 推荐(0)

vue v-cloak妙用 白屏 花屏
摘要:Vue 在初始化时,由于 DOM 元素不归 Vue 管理,导致我们在代码中写的模板在未被 Vue 解析之前可能会直接显示在页面上。 这会造成短暂的花屏现象,使得用户可能会看到{{message}}这样的原始模板代码。 虽然这种情况下的显示时间通常非常短暂,但为了优化用户体验,我们还是应该解决这个问题 阅读全文

posted @ 2021-08-27 21:15 完美前端 阅读(262) 评论(0) 推荐(0)

chimee 视频插件 和 video.js 视频插件
摘要:chimee 视频插件 和 video.js 视频插件 参考文档: https://www.cxyzjd.com/article/Evil_0_0_0/105768336 chimee 视频插件相关链接 官网 API 文档 cdn.baomitu.com 上的资源 cdnjs.com 上的资源 Gi 阅读全文

posted @ 2021-08-23 22:30 完美前端 阅读(589) 评论(0) 推荐(0)

vue获取滚动条距离
摘要:// 定义一个函数用于获取滚动条的距离 function getScrollTop() { let scrollTop = 0; // 如果文档的元素存在,并且文档的元素有滚动条距离 if (document.documentElement && document.documentElement.s 阅读全文

posted @ 2021-08-16 23:42 完美前端 阅读(1294) 评论(0) 推荐(0)

vue3 使用swiper6
摘要:完整的代码, 可以复制引用 安装 npm i swiper <template> <!-- Swiper组件 --> <swiper :autoplay="swiper_options.autoplay" :loop="swiper_options.loop" :speed="swiper_opti 阅读全文

posted @ 2021-08-16 23:09 完美前端 阅读(4140) 评论(0) 推荐(0)

vue3 动态css变量的使用
摘要:在 Vue 3.2 及以后的版本中,引入了对于动态 CSS 变量绑定的支持。这允许您在组件的 style 块内使用 v-bind() 函数来引用 JavaScript 中定义的变量,从而实现响应式的样式。 有单位的需要calc 计算 以下是使用 v-bind() 的基本示例: 在 setup 函数中 阅读全文

posted @ 2021-07-07 23:00 完美前端 阅读(4917) 评论(0) 推荐(0)

vue 技巧
摘要:.sync 在 vue@1.x 的时候曾作为双向绑定功能存在,即子组件可以修改父组件中的值;在 vue@2.0 的由于违背单项数据流的设计被干掉了;在 vue@2.3.0+ 以上版本又重新引入了这个 .sync 修饰符; // 父组件 <home :title.sync="title" /> //编 阅读全文

posted @ 2021-07-07 21:17 完美前端 阅读(76) 评论(0) 推荐(0)

vuex
摘要:Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 官网:https://next.vuex.vuejs.org/ 主要功能: 1、vuex可以实现vue不同组件之间的状态共享 (解决了不同组件之间的数据共享) 2、可以实现组件里面数据的持久化。 Vuex的几个核心概念: S 阅读全文

posted @ 2021-06-11 00:42 完美前端 阅读(177) 评论(0) 推荐(0)

mixin实现组件功能的复用 、全局配置Mixin
摘要:Vue3.x中的mixin介绍使用 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。 1、新建mixin/base.js const baseMixin = 阅读全文

posted @ 2021-06-10 22:08 完美前端 阅读(330) 评论(0) 推荐(0)

vue-Router
摘要:一、Vue3.x中的路由 路由可以让应用程序根据用户输入的不同地址动态挂载不同的组件。 https://next.router.vuejs.org/ npm install vue-router@next --save 二、Vue3.x路由的基本配置 1、安装路由模块 npm install vue 阅读全文

posted @ 2021-06-10 15:55 完美前端 阅读(143) 评论(0) 推荐(0)

3.x中集成Typescript 使用Typescript
摘要:一、Vue3.x集成Typescript Ts基础教程:https://www.itying.com/goods-905.html # 1. Install Vue CLI, if it's not already installed npm install --global @vue/cli # 阅读全文

posted @ 2021-06-08 02:55 完美前端 阅读(220) 评论(0) 推荐(0)

Vue3.x Composition API 详解
摘要:一、 Composition API的简单介绍 Composition API也叫组合式API,是Vue3.x的新特性。 通过创建 Vue 组件,我们可以将接口的可重复部分及其功能提取到可重用的代码段中。仅此一项就可以使我们的应用程序在可维护性和灵活性方面走得更远。然而,我们的经验已经证明,光靠这一 阅读全文

posted @ 2021-06-07 03:04 完美前端 阅读(435) 评论(0) 推荐(0)

Teleport指定显示在什么dom层级中去、使用Teleport自定义一个模态对话框的组件
摘要:一、Vue3.x Teleport、 Vue3.x中的组件模板属于该组件,有时候我们想把模板的内容移动到当前组件之外的DOM 中,这个时候就可以使用 Teleport。 表示teleport内包含的内容显示到body中 <teleport to="body"> 内容 </teleport> <tel 阅读全文

posted @ 2021-05-22 01:13 完美前端 阅读(150) 评论(0) 推荐(0)

Mixin实现组件功能的复用 、全局配置Mixin
摘要:一、Vue3.x中的mixin介绍使用 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。 1、新建mixin/base.js const baseMixin 阅读全文

posted @ 2021-05-22 01:02 完美前端 阅读(183) 评论(0) 推荐(0)

父组件给子组件传值、Props、Props验证、单向数据流
摘要:父组件给子组件传值 vue2 1、父组件调用子组件的时候传值 <template> <v-header :title="title"></v-header> </template> <script> import Header from './Header' export default { dat 阅读全文

posted @ 2021-05-21 22:52 完美前端 阅读(182) 评论(0) 推荐(0)

Vue3.x中全局绑定属性、使用Axios和fetchJsonp请求真实api接口数据、函数防抖实现百度搜索
摘要:Vue3.x中使用Axios请求远程真实Api接口数据 https://github.com/axios/axios 1、安装 npm install axios --save 或者 yarn add axios 或者 cnpm install axios --save 2、引入使用 import 阅读全文

posted @ 2021-05-21 22:50 完美前端 阅读(831) 评论(0) 推荐(0)

上一页 1 2 3 下一页

导航