Vue
文章平均质量分 81
dangfulin
这个作者很懒,什么都没留下…
展开
-
VUE 3——1:组件基础
文章目录一,安装与使用1,声明式渲染2,处理用户输入3,条件与循环4,组件化应用构建二,应用 & 组件实例(一)创建应用实例(二)根组件与挂载(三)组件实例的 property(四)生命周期三,模板语法(一)插值1,文本插值2,原始 HTML 插值3,绑定 Attribute4,使用 JavaScript 表达式(二)指令1,参数2,动态参数3,修饰符(三)缩写四,Data Property 和 Methods Property(一)Data Property(二)Methods Propert原创 2022-03-17 20:48:50 · 2002 阅读 · 1 评论 -
VUE 3——2:深入组件
在前面简单介绍了什么是组件化以及父子组件之间的简单数据交互,并举了一些小🌰,这里就更详细地讲解一下。文章目录一,组件注册(一)组件命名(二)全局注册(三)局部注册二,Props(一)Prop 值的类型(二)使用 Prop 向子组件传值(三)单向数据流(四)Prop 验证(五)Prop 的命名三,非 Prop 的 Attribute四,组件事件(一)事件名(二)父组件监听子组件事件(三)使用 v-model 的参数(四)处理 v-model 修饰符五,插槽(一)插槽的内容(二)在插槽中插值(三)备用内容(四原创 2022-04-14 10:39:04 · 913 阅读 · 1 评论 -
VUE 3——3:脚手架构建工具介绍及在创建 Vue 3 项目中的应用
这是针对 Vue 新人的一个简单指导。在前面的文章中,我们不推荐新手直接使用 vue-cli,(尤其是在还不熟悉基于 node.js 的构建工具时),而是通过直接引用的方式:<script src="https://unpkg.com/vue@next"></script>随着页面中组件越写越多,单个 HTML 文件终究无法完成实际的整个 Vue 项目,同时为了对 Vue 的使用有个整体的了解,这里将展示如何通过脚手架工具创建 Vue 3 项目以及一些前置说明。文章目录一,原创 2022-04-14 23:44:49 · 2966 阅读 · 1 评论 -
VUE 3——4:组件内部的组合式 API
复用与组合对工程化的大项目更有意义,因此我们提前介绍了如何创建 Vue 3 项目,简单创建并使用了一些 SFC,接下来就来介绍如何实现 SPC 的复用与组合。原创 2022-04-16 19:50:28 · 2941 阅读 · 1 评论 -
使 Vue 3 分页组件中当前页页码高亮
使分页结果中当前页码高亮是一个小小的需求:举个例子,就是在下面这样一个组件的模板中,要求当 item 等于当前页码数的时候,{{ item }} 所在的 span 元素拥有区别于其它 span 元素的样式:src/components/PaginationButtons.vue<template> <div class="pagination-buttons"> <button @click="prevPage">◀</button>原创 2022-04-18 22:18:35 · 535 阅读 · 1 评论 -
在 Vue 3 中实现页码切割与折叠
无论是前端还是后端,以手动造轮子的方式来实现页面内容分页,都是一件比较麻烦的事。我们这里不讨论具体分页方式,只来看看前端如何应对页面底部那一行内容分页后的页码列表。普通效果:当页码数量非常多时,就是这种效果:这就需要对页码进行折叠与切割,期望效果如下:未完待续。。。。。。...原创 2022-04-19 22:53:08 · 587 阅读 · 1 评论 -
在Vue 3项目中使用 echarts
记得第一次使用 echarts 还是2019年的时候,那时做的一个物联网项目云平台的前端需要一些数据可视化功能,经过一些对比后就使用了 echarts 。上手非常快,专业性也足够,因此在后来其他的一些项目中就多次用到它。echarts 是百度基于 JavaScript 实现的一个开源可视化图表库,主要特点就是可视化类型丰富、动画炫酷、使用简单。这个教程就简单演示如何在 Vue 3 项目中使用 echarts。一,创建 Vue3 项目并安装 echartsnpm 创建项目:npm create u原创 2022-05-01 20:17:32 · 28701 阅读 · 0 评论