vue 简单日历组件
首页<!--showToday:是否显示返回今天按钮 on-click：监听组件内的点击事件--><template> <my-calendar :showToday='true' @on-click='showInfo'></my-calendar></template><script>import myCalendar from './components/myCalendar'export default { compon...
2024-01-10
vue用组件构建应用
组件系统是 Vue.js 另一个重要概念，因为它提供了一种抽象，让我们可以用独立可复用的小组件来构建大型应用。如果我们考虑到这点，几乎任意类型的应用的界面都可以抽象为一个组件树： 在 Vue 里，一个组件实质上是一个拥有预定义选项的一个 Vue 实例： // Define a new component called todo-itemVue.component(...
2024-01-10
vue-分页组件JS版
预览 样式及省略号规则可自行调整使用方法<!--分页器--><div class="organ-res-page" style="text-align: right;" v-if="testCardsNum > pageSize"> <navigation :pages="pages" :current.sync="pageNo" :pagetotal="testCardsNum" :pagesize="pageSize" @navpage="pageList"></navigation></div><s...
2024-01-10
vue 封装模态框组件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>模态框组件</title> <style> p,h4{ margin: 0; } .modal{ width: 500px; background: #fff; ...
2024-01-10
vue2.0实现分页组件
最近使用vue2.0重构项目, 需要实现一个分页的表格, 没有找到合适的分页组件, 就自己写了一个, 效果如下:该项目是使用 vue-cli搭建的, 如果你的项目中没有使用webpack,请根据代码自己调整:首先新建pagination.vue文件, 所有组件的代码都写在这里, 写这样的组件并没有什么太大的难度, 主要是解决父子组件之...
2024-01-10
vue组件间通信八种方式
1.props和$emit父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过$emit触发事件来做到的。Vue.component('child',{ data(){ return { mymessage:this.message } }, template:` <div> <input type="text" v-mo...
2024-01-10
第四章、Vue组件
目录组件1、根组件2、局部组件3、全局组件4、父组件传递数据给子组件5、子组件传递数据给父组件6、父子组件实现todoList每一个组件都是一个vue实例每个组件均具有自身的模板template，根组件的模板就是挂载...
2024-01-10
vue组件中的数据传递方法
Vue 的组件作用域都是孤立的，不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。组件之间传递数据大致分为三种情况：父组件向子组件传递数据，通过 props 传递数据。子组件向父组件传递数据，通过 events 传递数据。两个同级组件之间传递数据，...
2024-01-10
vue2.0组件之间的通信
本文介绍3中类型：1、父子组件之间的通信2、非父子组件的通信3、较为复杂的通信一、父子组件之间的通信：访问： http://www.jianshu.com/p/2670ca096cf8二、非父子组件之间的通信：1、创建bus.js 创建一个新的Vue实例，以后它就承担起了组件之间通信的桥梁了，也就是中央事件总线。2、创建一...
2024-01-10详解用vue编写弹出框组件
前言最近研究了用vue编写弹出框的组件，发现其实这里面的门道还是有很多的。这篇文完全是用来记录总结下最近的学习成果，同时也希望能够帮得上正在学习纠结的你~ps:本文假设你已经了解vue2.0相关框架，因此适合有一定vue2.0基础的同学阅读。设计组件的思考其实单纯的编写一个弹出框组件并不...
2024-01-10一个可复用的vue分页组件
不废话，先上组件文件pages.vue:<template> <div class="pages-box" v-if="pageTotal > 0"> <ul class="pages"> <li class="pages-prev"> <a v-if="pageNow != 1" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="exte...
2024-01-10Vue组件化开发思考
一般说到组件，我首先想到的是弹窗，其他就大脑空白了。因为觉得这个是在项目中最常用的功能，提取出来方便复用的才是组件～然而我才发现这个想法是有问题的。我发觉可能从意识上把Vue的组件和UI库的组件（弹窗之类的）混淆了。。。缘起于最近的一个表单开发，页面上有2个是联动菜单的...
2024-01-10
vue入门(一)----组件
由于工作需要,最近在写一些前端的东西。经过向开发经验丰富的前端工程师的请教之后，得出一个结论----2016年前端被玩坏了，其实对于我来说我并不是太了解这句话的深刻含义，只是觉得是不是因为前端技术突飞猛进，导致前端的技术太多太杂。不管这些了，至少我不打算淌前端这趟浑水。 ...
2024-01-10vue 组件销毁并重置的实现
方法1当数据变更后,通过watch 监听，先去销毁当前的组件，然后再重现渲染。使用 v-if 可以解决这个问题<template> <third-comp v-if="reFresh"/></template> <script> export default{ data(){ return { reFresh:true, menuTree:[] } }, watch:{ menuTree(){ this.reF...
2024-01-10
关于一些组件化的思想 vue
最近新来一个公司接手两个项目，看了代码之后气的血已经吐出来了。项目技术是用vue写的。几乎每一个页面上有啥功能就是一把嗦从头写到尾，没有看见任何的import 组件。我就想不明白了为什么用了vue却不用组件化思想。这样的带吗及其难以维护，一个文件全是四五千行代码。之后我基于公司业务vu...
2024-01-10vue实现一个炫酷的日历组件
公司业务新开了一个商家管理微信H5移动端项目，日历控件是商家管理员查看通过日程来筛选获取某日用户的订单等数据。 如图： 假设今天为2018-09-0290天前：90天后;产品需求：展示当前日期（服务器时间）前后90天，一共181天的日期。日历可以左右滑动切换月份。当月份的如果不在181天区间的...
2024-01-10
vue实用组件——页面公共头部
可伸缩自适应的页面头部，屏幕适应范围更广泛效果如下：代码如下：<template> <div class="site-header"> <div class="logo"><img src="@/assets/icons/logo.png" alt=""></div> <nav class="title"> <!--汉堡按钮图标--> <em class="iconfont icon-justify" @click.stop="toggle('title')"></em> ...
2024-01-10
vue组件是如何解析及渲染的？
前言本文将对vue组件如何解析以及渲染做一个讲解。我们可以通过Vue.component注册全局组件，之后可以在模板中进行使用<div id="app"> <my-button></my-button></div><script> Vue.component("my-button", { template: "<button> 按钮组件</button>", });let vm = new Vue({ el:'#app'});</script>全局组件解析原理为了保证组件...
2024-01-10
Vue 创建组件的方式
2018年08月07日 11:10:56 虔诚带着决然 阅读数：1015 版权声明：本文为博主原创文章，未经博主允许不得用做其他商业活动。 https://blog.csdn.net/weixin_42218847/article/details/81477836方式一 <!--1.1使用Vue....
2024-01-10
基于vue实现探探滑动组件功能
前言嗨，说起探探想必各位程序汪都不陌生(毕竟妹子很多)，能在上面丝滑的翻牌子，探探的的堆叠滑动组件起到了关键的作用，下面就来看看如何用vue写一个探探的堆叠组件 ?一. 功能分析简单使用下探探会发现，堆叠滑动的功能很简单，用一张图概括就是:简单归纳下里面包含的基本功能点:图...
2024-01-10
Vue（三十）公共组件
以 分页 组件为例：（根据自己具体业务编写）1.pagination.vue<template> <!-- 分页 --> <div class="table-pagination" v-if="flag"> <template> <div class="block"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" ...
2024-01-10
vue数组对比调整顺序
现有数据如下：想根据arr1的uid来排arr2的顺序let arr1 = [ { "attachment": "blob:http://localhost:8096/46c7bf55-e7a0-443a-8a62-ae5e89e4a8a5", "number": 0, "uid": 1638867875084, "id": ...
2024-02-08vue 如何给数组对象绑定事件？
方法goToApp(row) { row.appIdNames.map((item) => this.$router.push(`/app/info?id=${item.appId}&name=${item.appName}`) ); },row.appIdNames代表数组对象利用map方法循环给每一项对象绑定点击事件，但是我上面写的虽然绑定上了，...
2024-02-10
vue3.0实现复选框组件的封装
本文实例为大家分享了vue3.0实现复选框组件封装的具体代码，供大家参考，具体内容如下大致步骤：实现组件本身的选中与不选中效果实现组件的v-model指令改造成 @vueuse/core 的函数写法<!-- 组件基本样式 --><template> <div class="xtx-checkbox" @click="changeChecked()"> <i v-if="checked" class="iconfont icon-checked"></...
2024-01-10
关于vue中如何监听数组变化
目录前言源码部分从哪开始第一步学习呢从图开始看看源码吧前言前段时间学习了关于vue中响应式数据的原理，（并作了学习笔记vue响应式原理），其实是通过Object.defineProperty控制getter和setter，并利用观察者模式完成的响应式设计。那么数组有一系列的操作方法，这些方法并不会触发数组的getter和sette...
2024-01-10
