![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 70
木偶☜
CSDN博客专家认证、前端领域优质创作者,InfoQ写作社区专家博主,擅长PC端开发,精通uniapp。人生就是个不断成长、不断学习的过程,努力只为让自己变得更优秀!
展开
-
基于vue实现滑块动画效果
主要实现:通过鼠标移移动、触摸元素、鼠标释放、离开元素事件来进行触发创建了一个滑动盒子,其中包含一个滑块图片。通过鼠标按下或触摸开始事件,开始跟踪滑块的位置和鼠标/触摸位置之间的偏移量。然后,通过计算偏移量和起始时的位移值,设置滑动盒子的 transform 属性来实现滑动效果。使用 transition 属性,还可以为滑块添加滑动动画。原创 2023-10-17 01:44:01 · 7600 阅读 · 0 评论 -
我有一个页面a,在页面a中调用了一个组件,然后组件中要切换页面a的一块区域,该怎么实现?
你可以在组件中使用路由的编程式导航,通过访问路由实例来切换页面a的对应区域。具体来说,你可以先在页面a中设置一个具有唯一标识的占位符元素,然后在组件中通过路由实例访问这个元素并修改其内容或样式来实现区域切换。你可以在组件中使用路由的编程式导航,通过访问路由实例来切换页面a的对应区域。具体来说,你可以先在页面a中设置一个具有唯一标识的占位符元素,然后在组件中通过路由实例访问这个元素并修改其内容或样式来实现区域切换。方法,该方法会接收一个包含目标路由信息的对象,其中可以包含要传递给目标路由的参数和查询参数。原创 2023-05-26 11:17:29 · 14996 阅读 · 0 评论 -
uniapp自定义弹窗时去掉title栏
最近在微信小程序项目中有这么一个需求,当点击页面中某一个元素时,调起弹窗显示相应的组件并且隐藏掉`title`栏,点击组件中的关闭图标时,弹窗销毁并显示相应的`title`栏。找了一下发现好多都不太对,于是记录下实现过程。原创 2022-11-21 11:59:39 · 66751 阅读 · 0 评论 -
uniapp进行交互反馈
显示消息提示框顾名思义,这个api就是隐藏消息提示框显示 loading 提示框,通常我们可以使用在进行网络请求或者在进行下一步操作中使用。隐藏 loading 提示框。原创 2022-10-24 10:05:12 · 78110 阅读 · 0 评论 -
Vue中为什么v-if和v-for不建议同时使用呢?
的,如果同时使用,那么每次渲染都会先循环再进行条件判断造成性能的浪费。指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回。指令基于一个数组来渲染一个列表。则是被迭代的数组元素的别名。是源数据数组或者对象,而。形式的特殊语法,其中。值是独一无二的,这便于。...原创 2022-07-26 11:49:48 · 109798 阅读 · 0 评论 -
404页面跳转倒计时实现原理
在页面销毁时,一定要清除计时器,因为有时候会点击首页超链接进行跳转,如果不清除会浪费资源。原创 2022-07-26 11:45:03 · 102084 阅读 · 0 评论 -
一文看懂Vue2和Vue3中设置404界面
vue2以及vue3中404页面实现原创 2022-07-26 11:34:30 · 103958 阅读 · 0 评论 -
vue封装jquery修改自身以及兄弟元素的方法
在项目中我们经常有,点击某一个元素让其自身样式发生变化,同时其兄弟元素改变的需求,最简单的就是通过Jquery来操作,但是如果需求多的话,那么我们就可以对这个方法进行封装,然后再引入使用。今天我们就来看看这个封装…目录一.引入Jquery1.下载jquery源码:2.NPM安装二.封装三.引用1.单文件应用2.全局引用四.结尾一.引入Jquery1.下载jquery源码:我们在网页中打开https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js,复制代码粘贴原创 2022-05-31 11:01:51 · 95872 阅读 · 0 评论 -
uniapp之uviewUi框架的使用,入门级别教程
在进行uniapp项目开发的时候,难免会用到一些其他的组件,今天我们来讲一下uviewUI的具体安装配置过程。目录:一.介绍:二.安装:1. 正如官方文档所说,我们需要在我们的根目录下(进入终端,通常在`HbuliderX`中的内置终端就可以)执行如下操作:2. 在我们安装完成后,还需要进行一些详细的配置信息才可以再进行使用,具体配置如下:三.结尾:一.介绍:uview官网- - -uview:uView UI,是全面兼容nvue的uni-app生态框架,全面的组件和便捷的工具会让您信手拈来,如鱼得原创 2022-05-27 14:01:45 · 101694 阅读 · 1 评论 -
Vue中父组件以及子组件传值问题
前言:在一些页面中不单单的纯纯的一个vue文件,vue讲究组件化开发,但是一般的肯定会产生交互事件,今天了解了这个传值,特此的来记录一下。目录一.父组件向子组件传值二.子组件向父组件传值一.父组件向子组件传值父组件向子组件传值会用到:Prop,一般的我们需要在子组件中进行相关的声明,如下所示:子组件为HellowWorld.vue<script>export default { name: 'HelloWorld', //接收的变量 props: { //声明相关的原创 2021-11-24 17:35:09 · 118609 阅读 · 0 评论 -
vue+axios实现简易的天气查询
我们先来看一下效果图,原理很简单就是接口的调用以及数据的呈现,界面的布局而已通过如上我们可以看到输入正确的城市名称后会查询出未来四天以及昨天和今天总共六天的天气,输入不正确的名称时会进行提示,并且清空输入栏目录:一.资源引入:二.实现:1.HTML:2.CSS:3.js:三.详细代码:四.实例:一.资源引入:因为是vue项目所以我们需要引入vue,官网:vue官网,我们使用cdn方式进行引入:<!-- 开发环境版本,包含了有帮助的命令行警告 --><script src=原创 2021-07-25 15:21:15 · 84356 阅读 · 2 评论 -
Vue中进行全局守卫
前言:项目中大多数都是通过路由来进行跳转的,但是普遍的都会进行登陆验证后才能进入下一页面,这时候就需要守卫了,本博文主要讲解vue中的全局守卫 。全局守卫在main.js中进行配置:import Vue from 'vue'import App from './App'import router from './router'import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'//原创 2021-06-18 11:10:04 · 83501 阅读 · 0 评论 -
Vue中进行对于axios的封装
前言:在我们进行前后端数据交互的时候,避免不了的就是数据的请求与处理,通常我们都会使用axios来进行数据的一些操作,但是普通的请求又过于繁琐,那么我们就来对axios进行封装处理。看到乱麻麻的数据请求,估计大家都会是这样子的吧- - -简直是欲哭无泪啊目录:一.引入axios:二.http.js1. 引入axios进行简单的配置:2. 请求拦截器:3. get、post和push请求的封装:三.引入文件:四.运行测试:一.引入axios:在终端情况下,我们使用以下命令进行引入:npm i原创 2021-06-18 10:32:49 · 83194 阅读 · 2 评论 -
服务器中进行搭建node.js环境并开启node服务
前言:一般来说我们都喜欢我们的代码看起来简洁美观而且性能也能大大提升,那这个时候我们就需要进行前后端分离,为什么俺会这样说呢,因为俺最近就要搞这个(ヽミ ´∀`ミノ<)。简介:项目采用的是webpack+vue做的,后端用的node.js来实现,服务器nginx(本文主要阐述:如何在服务器上进行node.js的配置以及启动该服务)项目部署的话请移步至:项目部署至服务器 可以去看看哦…目录:一.必备的:二.node.js文件:三.启动服务:一.必备的:既然是node.js那么必不可少的就是n.原创 2021-06-03 10:02:45 · 87168 阅读 · 1 评论 -
服务器指定端口部署vue项目(webpack打包后的文件)
前言:之前部署项目一直都是往服务器上面一扔,就直接可以访问了,但是向指定的端口部署项目这个貌似还不一样╮( ̄▽ ̄")╭目录:一.项目打包:二.修改nginx配置文件:三.nginx的操作:一.项目打包:配合webpack工具对VUE项目进行打包,我们可以在package.json文件下修改好build的命令,或者在文件目录下打开终端使用npm run build命令对项目进行打包。打包成功后会生成dist文件,这个就是我们必需的文件。二.修改nginx配置文件:一般的nginx的配置文件会原创 2021-05-31 10:15:33 · 84865 阅读 · 0 评论