摘要:Vue监听浏览器的后退与前进按钮 // 检查浏览器是否支持history API if (window.history && window.history.pushState) { // 如果支持,给window添加popstate监听事件,用于监听后退按钮的点击 window.addEventLi
阅读全文
摘要:1、安装Vue CLI脚手架: - 首先,新建一个文件夹,在文件夹内打开命令行(cmd)。 - 输入以下命令来全局安装Vue CLI脚手架: ``` cnpm install -g @vue/cli ``` - 注:这里使用的是cnpm命令,确保您已经安装了cnpm。如果您使用npm,只需将cnpm
阅读全文
摘要:1、最直接整个页面重新刷新: // 使用location.reload()方法刷新页面 location.reload() // 使用Vue路由的$router.go()方法刷新当前页面 this.$router.go(0) 这两种都可以刷新当前页面的,缺点就是相当于按ctrl+F5 强制刷新那种,
阅读全文
摘要:// 导入vue中的相关方法 import { provide, reactive, nextTick } from "vue"; // 定义全局数据 let globeData = reactive({ isRouterAlive: true }) // 通过条件渲染来控制router-view的
阅读全文
摘要:完整的代码, 可以复制引用 toast组件 <template> <Transition name="down"> <div class="xtx-message" :style="style[type]" v-show="visible"> <!-- 上面绑定的是样式 --> <!-- 不同提示图
阅读全文
摘要:Vue 在初始化时,由于 DOM 元素不归 Vue 管理,导致我们在代码中写的模板在未被 Vue 解析之前可能会直接显示在页面上。 这会造成短暂的花屏现象,使得用户可能会看到{{message}}这样的原始模板代码。 虽然这种情况下的显示时间通常非常短暂,但为了优化用户体验,我们还是应该解决这个问题
阅读全文
摘要:chimee 视频插件 和 video.js 视频插件 参考文档: https://www.cxyzjd.com/article/Evil_0_0_0/105768336 chimee 视频插件相关链接 官网 API 文档 cdn.baomitu.com 上的资源 cdnjs.com 上的资源 Gi
阅读全文
摘要:// 定义一个函数用于获取滚动条的距离 function getScrollTop() { let scrollTop = 0; // 如果文档的元素存在,并且文档的元素有滚动条距离 if (document.documentElement && document.documentElement.s
阅读全文
摘要:完整的代码, 可以复制引用 安装 npm i swiper <template> <!-- Swiper组件 --> <swiper :autoplay="swiper_options.autoplay" :loop="swiper_options.loop" :speed="swiper_opti
阅读全文
摘要:在 Vue 3.2 及以后的版本中,引入了对于动态 CSS 变量绑定的支持。这允许您在组件的 style 块内使用 v-bind() 函数来引用 JavaScript 中定义的变量,从而实现响应式的样式。 有单位的需要calc 计算 以下是使用 v-bind() 的基本示例: 在 setup 函数中
阅读全文
摘要:.sync 在 vue@1.x 的时候曾作为双向绑定功能存在,即子组件可以修改父组件中的值;在 vue@2.0 的由于违背单项数据流的设计被干掉了;在 vue@2.3.0+ 以上版本又重新引入了这个 .sync 修饰符; // 父组件 <home :title.sync="title" /> //编
阅读全文
摘要:Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 官网:https://next.vuex.vuejs.org/ 主要功能: 1、vuex可以实现vue不同组件之间的状态共享 (解决了不同组件之间的数据共享) 2、可以实现组件里面数据的持久化。 Vuex的几个核心概念: S
阅读全文
摘要:Vue3.x中的mixin介绍使用 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。 1、新建mixin/base.js const baseMixin =
阅读全文
摘要:一、Vue3.x中的路由 路由可以让应用程序根据用户输入的不同地址动态挂载不同的组件。 https://next.router.vuejs.org/ npm install vue-router@next --save 二、Vue3.x路由的基本配置 1、安装路由模块 npm install vue
阅读全文
摘要:一、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 #
阅读全文
摘要:一、 Composition API的简单介绍 Composition API也叫组合式API,是Vue3.x的新特性。 通过创建 Vue 组件,我们可以将接口的可重复部分及其功能提取到可重用的代码段中。仅此一项就可以使我们的应用程序在可维护性和灵活性方面走得更远。然而,我们的经验已经证明,光靠这一
阅读全文
摘要:一、Vue3.x Teleport、 Vue3.x中的组件模板属于该组件,有时候我们想把模板的内容移动到当前组件之外的DOM 中,这个时候就可以使用 Teleport。 表示teleport内包含的内容显示到body中 <teleport to="body"> 内容 </teleport> <tel
阅读全文
摘要:一、Vue3.x中的mixin介绍使用 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。 1、新建mixin/base.js const baseMixin
阅读全文
摘要:父组件给子组件传值 vue2 1、父组件调用子组件的时候传值 <template> <v-header :title="title"></v-header> </template> <script> import Header from './Header' export default { dat
阅读全文
摘要:Vue3.x中使用Axios请求远程真实Api接口数据 https://github.com/axios/axios 1、安装 npm install axios --save 或者 yarn add axios 或者 cnpm install axios --save 2、引入使用 import
阅读全文