![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
VUE
文章平均质量分 80
啾比特
这个作者很懒,什么都没留下…
展开
-
Vue3+Ts实现贪吃蛇小游戏
启动必须在DOM渲染完成之后再启动即Mounted,否则无法获取到DOM元素。原创 2023-02-23 10:44:13 · 408 阅读 · 1 评论 -
一起从零开始学VUE(18)TypeScript
使用继承之后,子类将会拥有父类所有的方法和属性,通过继承可以将多个类中共有的代码写在一个父类中,这样只需要写一次就可以让所有的子类都同事拥有父类的属性,如果在子类中添加了与父类重名的方法,则会重写父类对应的方法。上述所讲的属性是在对象中设置的,属性可以任意的被修改,会导致对象中的数据变得非常不安全,通过在属性前面添加属性的修饰符可以限制属性的访问。接口用来定义一个类结构,在定义类时,限制类的结构,接口中的所有的属性都不能有实际的值,在接口中的所有方法都是抽象方法。npm i -D sass 下载处理器。原创 2023-02-07 15:56:18 · 739 阅读 · 0 评论 -
一起从零开始学VUE(17)VUE3.0新的组件
在Son组件中添加一个div,点击按钮出现此div模拟出弹框效果。等待异步组件时渲染一些额外内容,让应用有更好的用户体验。但是发现弹框会将组件撑开,无法达到预期效果。原创 2022-12-29 15:48:06 · 106 阅读 · 0 评论 -
一起从零开始学VUE(16)生命周期与组合式API
hook本质是一个函数,把setup函数中使用得composition API封装,能够更好的复用代码,让setup中的逻辑更加清楚易懂。原创 2022-12-27 11:33:58 · 590 阅读 · 2 评论 -
一起从零开始学VUE(15)初识VUE3
在模板中使用ref的值不需要通过value获取,vue会自动给ref的值加上.value。在js中使用ref的值必须使用.value获取。作用:定义一个响应式数据结构。原创 2022-12-16 10:09:22 · 1391 阅读 · 0 评论 -
VUE+Nodejs 商城项目练习项目(后台管理)
用户管理用户列表查看角色对应用户分配权限编辑/新增商品原创 2022-10-18 10:48:40 · 1617 阅读 · 2 评论 -
ant vue table表格数据动态合并
3.如果是一次性获取所有数据进行分页的话,计算columns的时候需要进行修改一下。1.在computed节点下动态计算每次要合并的行数。2.在methods节点下定义合并单元格的方法。原创 2022-10-13 11:39:12 · 5192 阅读 · 2 评论 -
VUE+Nodejs 商城项目练习项目(前台购物)
vue和node的学习基本已经结束了,由于是新手脱离视频教程的第一个实践项目所以代码上面还有很多问题,请多指教。有些页面后台部分写了一些所以测试的数据我替换成接口了,有些页面还没有。### 首页(@/view/shop/index.vue)原创 2022-10-10 13:56:40 · 2704 阅读 · 2 评论 -
Vue动态设置img的src不生效的问题
在VUE项目中有时会遇到需要动态修改Img的src的情况,如果直接修改会使得图片无法显示出来。这是由于src被当做静态资源处理了,并没有进行编译。原创 2022-09-22 11:52:56 · 6354 阅读 · 0 评论 -
一起从零开始学VUE(14)组件之间的通信
组件之间的通信原创 2022-09-16 09:23:44 · 147 阅读 · 0 评论 -
【VUE项目】VUE+ElementUI电商后台管理系统
电商后台管理系统项目来源:https://www.bilibili.com/video/BV1x64y1S7S7?p=191&spm_id_from=333.1007.top_right_bar_window_history.content.click源代码:https://gitee.com/lyy_97591/vue_shop.git登录界面测试帐号:admin测试密码:123456登录判断用户管理用户列表添加用户编辑用户分配角色权限管理角色列表分配权限原创 2022-05-25 17:39:00 · 463 阅读 · 0 评论 -
一起从零开始学VUE(13)移动端头条案例
头条案例文章目录头条案例初始化完成User组件的内容使用Vant组件库中的tabbar组件和navbar组件修改NavBar的默认样式完成articleItme.vue组件的布局结构使用request模块进行请求数据挂载axios的两种方法获取文章的列表数据传递文章详情信息格式化时间上拉加载更多、下拉刷新上拉加载更多下拉刷新文章列表图片的懒加载初始化创建工程,vue create 工程名称重置App.vue中的代码<template> <div>App 根组原创 2022-04-07 18:21:56 · 1433 阅读 · 0 评论 -
一起从零开始学VUE(12)导航守卫
文章目录声明式导航&编程式导航常见的编程式导航API导航守卫全局前置守卫守卫方法的3个形参next函数的三种调用方式控制访问权限声明式导航&编程式导航在浏览器中,点击链接实现导航的方式,叫做声明式导航。如:在浏览器中,调用API方法实现导航的方式,叫做编程式导航。如:location.href常见的编程式导航APIthis.$router.push(“hash地址”)跳转到指定hash地址,并增加一条历史记录this.$router.replace(“hash”)跳转到指定原创 2022-04-04 15:27:16 · 2035 阅读 · 0 评论 -
一起从零开始学VUE(11)路由与动态路由
什么是路由路由就是对应关系,即地址与组件之间的对应关系,前端路由指的就是hash地址与组件之间的对应关系前端路由的工作方式用户点击了页面上的路由链接导致了URL地址栏中的Hash值发生了变化前端路由监听到了Hash地址的变化前端路由把当前Hash地址对应的组件渲染到浏览器中实现简易的前端路由<template> <div class="app-container"> <h1>App 根组件</h1> <a hr原创 2022-03-31 21:46:38 · 942 阅读 · 0 评论 -
一起从零开始学VUE(10)动态组件、插槽与自定义指令的使用
动态组件什么是动态组件动态切换组件的显示和隐藏如何实现动态组件渲染vue提供了一个内置的<component>组件,专门用来实现动态组件的渲染。示例代码如下:原创 2022-03-28 20:37:15 · 1045 阅读 · 0 评论 -
一起从零开始学VUE(9)ref与数组中的方法
使用ref引用DOM元素在vue项目中,不建议使用和安装jquery,如果想操作dom元素,可以使用ref引用。在每个vue的组件实例上,都包含一个$refs对象,里面存储着对应的DOM元素或组件的引用。默认情况下,组件的$refs指向一个空对象,如果有添加ref属性的话,则$refs中会出现对应的内容使用refs获取DOM元素操作DOM :获取了DOM元素后,我们就可以该元素进行类似于JQ的操作,下面以修改组件的字体颜色为例使用ref引用组件实例不仅可以使用ref引用dom元素,还原创 2022-03-26 22:05:06 · 2629 阅读 · 0 评论 -
一起从零开始学VUE(8) 组件的生命周期及组件间的数据共享
文章目录组件的生命周期生命周期和生命周期函数生命周期示意图组件之间的数据共享父子组件之间的数据共享组件的生命周期生命周期和生命周期函数1、生命周期是一个组件从创建、运行到销毁的整个阶段,强调的是一个时间段2、生命周期函数:是由 vue 框架提供的内置函数,会伴随着组件的生命周期,自动按次序执行,强调的是一个时间点,下图为组件生命周期函数的分类生命周期示意图组件创建阶段的生命周期函数:beforeCreate()是创建阶段的第一个生命周期函数,组件的props/methods/data都还原创 2022-02-19 16:33:18 · 523 阅读 · 0 评论 -
一起从零开始学VUE(7)VUE组件基础用法
文章目录VUE组件基本概念组件的三个组成部分在组件中定义methods方法VUE组件基本概念组件化开发: 根据封装的思想,把页面上可重用的UI结构封装为组件,从而方便项目的开发和维护VUE中的组件开发: VUE是一个支持组件化开发的前端框架,组件的后缀名**.vue**(如:App.vue文件本质上是一个vue组件)组件的三个组成部分template:组件的模板结构script:组件的js行为style:组件的样式组件中的data不能指向对象,必须是一个函数<templat原创 2022-02-05 21:27:07 · 1014 阅读 · 0 评论 -
一起从零开始学VUE(6) vue-cli的安装与使用
文章目录vue-cli基本知识vue-cli的安装vue-cli的使用vue项目中src目录的构成:vue项目的运行流程vue-cli基本知识1、单页面应用程序(SPA):指的是一个web网站中只有唯一的一个html页面,所有的功能与交互都在这唯一的一个页面内完成2、vue-cli是Vue.js开发的标准工具。简化了程序员基于webpack创建工程化的Vue项目的过程。vue-cli的安装vue-cli是npm上的一个全局包,使用npm install命令,即可进行下载,命令如下:npm in原创 2022-01-28 17:23:58 · 1293 阅读 · 0 评论 -
一起从零开始学VUE(5) 了解一下webpack相关知识
文章目录webpack基本概念基础在项目中安装webpack配置webpackwebpack中的默认约定自定义打包的入口与出口一些插件webpack中的Loader基础知识使用示例打包发布配置webpack的打包发布优化js文件和图片的存放路径使用clean-webpack-plugin插件自动删除dist目录SourceMap定义解决SourceMap的问题只定位行数不暴露源码小贴士webpack基本概念1、定义:webpack是前端项目工程化的具体解决方案2、主要功能:提供了友好的前端模块化开发原创 2022-01-28 17:23:01 · 1608 阅读 · 0 评论 -
一起从零开始学VUE(4) VUE中计算属性与axios的使用
文章目录计算属性计算属性的语法和特点axios基本语法3. 使用解构赋值4. axios的标准用法计算属性通过一系列运算后得到一个属性值,这个动态计算出来的属性值可以被模板结构或methods方法使用。计算属性的语法和特点所有的计算属性都要定义到在computed节点下计算属性在定义的时候要定义为方法格式计算属性依赖的数据源发生变化,计算属性值也会发生变化<div id="app"> r:<input type="text" v-model.number=原创 2022-01-19 16:12:51 · 902 阅读 · 0 评论 -
一起从零开始学VUE(3)过滤器和侦听器的使用
文章目录过滤器基本用法私有过滤器和全局过滤器过滤器的其他用法侦听器基本用法侦听器的格式优点1:immediate选项优点2:deep选项——开启深度监听,只要对象中任何一个属性变化,都会触发对象的侦听器实现对象的子属性变化的侦听过滤器基本用法过滤器常用于文本的格式化,可以和v-bind属性绑定,被添加在js的尾部,由“管道符”进行调用,只能用于Vue 2.0 中。例如:<p>message 的值是 {{ message | capitalize}}</p>利用管道符,调用ca原创 2022-01-16 23:09:30 · 1029 阅读 · 0 评论 -
一起从零开始学VUE(2)——品牌列表案例
VUE小案例——品牌列表案例利用v-for实现列表的渲染利用全局过滤器格式化时间利用v-if来动态渲染数据原创 2022-01-15 11:09:07 · 1779 阅读 · 0 评论 -
一起从零开始学VUE(2) VUE指令及案例
VUE自学笔记按键修饰符–监听键盘事件双向绑定指令 v-model以及与单向绑定指令v-bind的区别v-model的修饰符条件渲染指令 v-if \ v-else-if \ v-else列表渲染指令 v-for原创 2022-01-13 21:34:56 · 255 阅读 · 0 评论 -
一起从零开始学VUE(1) VUE基本使用步骤和指令
VUE特性1、数据驱动视图:数据的变化会驱动视图自动更新,单向的数据绑定2、双向数据绑定:在网页中form表单负责采集数据,Ajax负责提交数据MVVM是VUE实现数据驱动视图和双向数据绑定的核心原理,由Model,View还有ViewModel(核心)三部分组成准备工作1、chrome安装VUE调试工具vue-devtools教程https://www.cnblogs.com/alice-fee/p/8038367.htmlvue-devtools链接:https://pan.baid原创 2022-01-09 23:30:26 · 3192 阅读 · 1 评论