![](https://img-blog.csdnimg.cn/132b26bc317341d69d80403453d89fb3.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue
文章平均质量分 76
此专栏讲述了,前端 vue 框架的所有内容,和所有基于 vue 框架实现的小型项目,练习,一些功能
清风 与我
这个作者很懒,什么都没留下…
展开
-
Vue 常用的修饰符有哪些?
在程序世界里,修饰符是用于限定类型以及类型成员的声明的一种符号。在Vue中,修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间去处理这些烦恼的事情,而能有更多的精力专注于程序的逻辑处理vue中修饰符分为以下五种:表单修饰符事件修饰符鼠标按键修饰符键值修饰符v-bind修饰符原创 2023-01-18 14:34:31 · 5378 阅读 · 0 评论 -
基于 Vue 制作一个猜拳小游戏
在工作学习之余玩一会游戏既能带来快乐,还能缓解生活压力,跟随此文一起制作一个小游戏吧。描述:石头剪子布,是一种猜拳游戏。起源于中国,然后传到日本、朝鲜等地,随着亚欧贸易的不断发展它传到了欧洲,到了近现代逐渐风靡世界。简单明了的规则,使得石头剪子布没有任何规则漏洞可钻,单次玩法比拼运气,多回合玩法比拼心理博弈,使得石头剪子布这个古老的游戏同时用于“意外”与“技术”两种特性,深受世界人民喜爱。游戏规则:石头打剪刀,布包石头,剪刀剪布。现在,需要你写一个程序来判断石头剪子布游戏的结果。原创 2023-01-03 16:43:54 · 2781 阅读 · 10 评论 -
Vue2和Vue3的双向数据绑定原理
当你把一个普通的 js 对象传入 vue 实例作为 data 选项,vue 将遍历此对象的所有prototype(属性),并使用 object.defineProperty(),将这些 prototype(属性),全部转换为 getter / setter,在 getter 中收集数据依赖,在 setter 中监听数据变化,一旦数据发生改变,在通知订阅者。每个组件实例,都对应一个 watcher 实例,它会在组件渲染的过程把 "接触" 过的数据 prototype(属性)记录为依赖,之后当依赖项的 set原创 2022-12-29 14:21:26 · 1888 阅读 · 1 评论 -
vue 前端实现随机背景色
要求是页面对应的几个模块每次打开都要显示多个不同的随机颜色,点击刷新则显示的颜色改变。我就封装成了一个函数,有不足的地方,还希望多多指点。代码如下。步骤:1. 封装一个函数2. 使用for循环,需要使用多少个背景色,就循环几次3. 使用Math.floor()下舍入,把获取到的值进行取整4. 使用Math.random()方法获取随机数5. toString(16)转换为16进制6. 点击刷新则重新调用封装的函数7. 点击颜色块则把颜色赋值到input框中8. 背景色页随之改变原创 2022-12-11 20:48:32 · 3133 阅读 · 0 评论 -
vue 如何获取路由详细内容信息
vue 中路由(router)的功能就是:把 url 与 应用中的对应的组件进行关联,通过不同的 url 访问不同的组件。但是如果我们想要获取路由中的信息改如何做呢,今天我就给大家详细讲解一下如何获取路由的详细信息。获取路由信息的代码为:this.$router.options.routes原创 2022-12-07 09:55:04 · 12317 阅读 · 1 评论 -
vue 实现页面反转到背面
点击从中间反转到背面,点击在反转回来,来回重复.具体思路: 1. 在 data 中设置一个方法,值为 false 2. 给 整个页面的 div 绑定点击事件,执行 data 里的值等于它的相反 3. 设置 css 样式(所有子元素在3D空间中呈现,背向屏幕时不可见,但占据空间,反转度数)原创 2022-10-19 10:37:21 · 1298 阅读 · 0 评论 -
如何引入svg并使用
如何引入svg并使用原创 2022-10-17 15:55:36 · 6433 阅读 · 0 评论 -
滚动条案例(点击跳转到指定地点,上下滑动跟随显示标题)
1. 给按钮绑定点击事件并传递下标 2. 给需要跳转的位置进行 some 循环 3. 判断点击按钮传递过来的下标是否等于 some 循环的下标 4. 等于则根据距离顶部的距离进行跳转(把需要滑动元素的 scrollTop 赋值为条件成立的标签距离顶部的距离) 5. 滑动时点击事件跟随显示 6. 给需要滑动的标签绑定 scroll 事件 7. 给点击按钮进行 some 循环 8. 判断滑动标签距离顶部的距离是否大于需要跳转的位置距离顶部的距离 9. 判断成功则给当前标签选中,其他全部取消选中原创 2022-10-17 15:32:36 · 805 阅读 · 0 评论 -
AlloyTeam(腾讯全端博客)
AlloyTeam(腾讯全端博客)大致效果:列表页面显示数据,点击跳转到对应的详情页,实现分页效果,点击回到顶部原创 2022-10-09 11:15:46 · 474 阅读 · 0 评论 -
列表添加至购物车(Typescript React Shopping cart)
列表页面显示数据,实现按尺码进行过滤,实现价格高低排序。点击添加至购物车,实现购物车所需内容。原创 2022-10-11 09:28:18 · 729 阅读 · 1 评论 -
基于Vue+nodejs+Element-ui的聊天框项目
一、项目简介本项目基于纯前端(移动端)技术开发一个聊天系统,界面美观大方,采用Nodejs+Vue+ElemenetUI开发实现,主要包含:登录注册,修改个人资料,更改头像,发送消息,单对单聊天等。二、环境介绍语言环境:nodejs数据库:MySQL应用服务器:nodejs开发工具:vscode开发技术:nodejs+vue+elementUI原创 2022-12-02 17:31:35 · 8391 阅读 · 0 评论 -
vue基于 input 实现密码的显示与隐藏功能
前言:大家都知道,一般情况下,输入框的密码我们是看不到密码的,只有当我们点击查看密码的小图标时,密码才会显现出来,实现起来也非常简单,通过点击图标让input的type属性变化即可。代码讲解:使用Color的true或false判断显示图标的样式,input框则使用Type的样式进行显示,@click="Show"点击修改密码的显示或者隐藏原创 2022-12-03 16:43:38 · 4787 阅读 · 0 评论 -
vue 中实现下拉至底部自动加载数据
vue 中经常会出现下拉至底部自动加载数据功能,给页面添加滚动事件,根据底部图标的位置进行判断优点:尽量减少请求的数据,使数据加载的更快,方便用户的使用缺点:浪费宽带,因数据过大使加载过程太慢原创 2022-11-04 10:19:37 · 3981 阅读 · 0 评论 -
vue 过渡和动画
vue 过渡和动画为什么要学习过渡和动画:提高用户体验 与 页面的交互性。过渡:从一个状态向另一个状态插入值,新的状态替换了旧的状态从而 影响用户的行为,引导用户,帮助用户看到动作行为的反馈。原创 2022-11-02 11:09:40 · 393 阅读 · 0 评论 -
Vue - Todos 案例
vue 实现 todos 具体代码思路和代码给 input 框绑定回车事件,回车后把数据请求到 vuex 中把数据保存至本地存储中给下拉箭头绑定点击事件,点击则给所有多选框进行反选判断是否选中,如果选中则禁用给数组进行过滤,然后渲染至页面中双击 input 框 则允许改变样式,平时则禁止改变原创 2022-10-27 17:23:49 · 1240 阅读 · 0 评论 -
vue中devTools插件安装教程
为了更方便的在开发过程中对 Vue 程序进行调试,除了传统的浏览器自带的 debug 工具以外,我们还可以通过一些专门为 Vue 提供的扩展插件来进行调试原创 2022-10-01 08:00:00 · 7470 阅读 · 1 评论 -
如何创建 vue-cli 项目
官网直接下载并安装node,安装过程很简单一路下一步就行,安装完成后打开命令行(window+r,输入cmd),输入node-v 如下图出现版本号则成功。打开命令行输入:npm install vue-cli -g,安装完成后输入 vue-V(这里的‘V’是大写),如下图如果出现对应的版本号则安装成功。通过上面两步,我们需要的环境和工具都准备好了,接下来就使用vue-cli来创建项目。以上就是安装vue-cli的全过程,后续会持续发布新文章,敬请关注。原创 2022-09-24 08:00:00 · 3013 阅读 · 0 评论 -
如何在 vue 中使用axios
Axios 是一个基于 promise 的 HTTP 库,简单的讲就是可以发送get、post请求。原创 2022-09-23 11:27:48 · 220 阅读 · 0 评论 -
vuex 详细介绍和使用
什么是vuex,为什么使用Vuex?Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式,类似 edux为处理复杂的组件通信,所以使用的一种状态管理模式原创 2022-09-23 08:24:51 · 310 阅读 · 0 评论 -
vue-router的基本使用方法
vue-router 是 Vue.js 官方的路由管理器,它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。当应用变得复杂以后,我们就需要通过一种便捷、高效的方式来管理应用,最常见的就是通过路由。路由:把 url 与 应用中的对应的组件进行关联,通过不同的 url 访问不同的组件原创 2022-09-26 20:25:14 · 497 阅读 · 0 评论 -
vue的滚动行为和路由信息
使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。路由的滚动行为,它让你可以自定义路由切换时页面如何滚动。原创 2022-09-29 10:39:30 · 646 阅读 · 0 评论 -
vue 实现列表跳转至详情且能添加至购物车
列表页面显示数据,点击跳转到对应的详情页,详情页可以添加并跳转到购物车,购物车具有常见功能。原创 2022-09-28 19:58:57 · 1853 阅读 · 3 评论 -
vue的导航守卫详细介绍和应用场景
在VUE官方文档中有写到 ‘导航”表示路由正在发生改变’,正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。原创 2022-09-30 11:25:49 · 425 阅读 · 0 评论