vue 组件
组件可以复用，注意全局组件最好使用my-component-name 命名，在VScode上遇过坑一、Vue对象若Vue对象中有template，那么template的优先级高于，原本的视图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
2024-01-10
vue日历任务组件
效果图:遍历日历首先是遍历出日历，我参考了链接: https://blog.csdn.net/csdn_zsdf/article/details/89644732.这里说一下大概流程和我遇到的一些问题遍历日历流程首先定义好一个装有12个月份中每月天数的数组monthList，然后进行时间初始化，获取当前的年月日，根据初始化的数据计算出当月天数、月初...
2024-01-10
vue用组件构建应用
组件系统是 Vue.js 另一个重要概念，因为它提供了一种抽象，让我们可以用独立可复用的小组件来构建大型应用。如果我们考虑到这点，几乎任意类型的应用的界面都可以抽象为一个组件树： 在 Vue 里，一个组件实质上是一个拥有预定义选项的一个 Vue 实例： // Define a new component called todo-itemVue.component(...
2024-01-10
vue实现悬浮球组件
首先在componets文件汇总创建FloatBall.vue组件内容：<template> <transition> <div ref="dragIcon" class="dragIcon" @touchstart.stop="handleTouchStart" @touchmove.prevent.stop="handleTouchMove($event)" @touchend.stop="han...
2024-01-10
vue组件间通信解析
组件间通信（父子，兄弟）相关链接\组件通信：点击查看学习链接：Vue.js——60分钟快速入门点击查看分分钟玩转Vue.js组件点击查看父组件传子组件父传子方法（一） 属性传递 props//子组件<template> <ul> <li v-for="item in dataList">{{item}}</li> </ul> </template><script> export default { props : { dataList : [] } }<...
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实现简单表格组件
本来想这一周做一个关于vuex的总结的，但是由于朋友反应说还不知道如何用vue去写一个组件，所以在此写写一篇文章来说明下如何去写vue页面或者组件。vue的核心思想就是组件，什么是组件呢？按照我的理解组件就是装配页面的零件，比如一辆车有大大小小许多零件组成，那么同样的一个页面，也是...
2024-01-10
Vue之组件详解
<body> <div id="root"> <h2>{{name}}</h2> <hr> <school></school> <hr> <student></student> <hr> <!-- <h2>学生姓名：{{name}}</h2> <h2>学生年龄：{{age}}</h2> --> </div> <div id="root2"> <hello></hel...
2024-01-10
如何发布自己的vue组件
非基于webpack vue vue-tree组件，如何打包发布到另外一个项目中 参考 https://www.pianshen.com/arti... 配置（它是基于webpack的）在另外一个vue项目中引入vue组件一直报 Unknown custom element:<vue-tree> did you register the component correctly? For rec...
2024-03-07
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
vue2.0组件之间的通信
本文介绍3中类型：1、父子组件之间的通信2、非父子组件的通信3、较为复杂的通信一、父子组件之间的通信：访问： http://www.jianshu.com/p/2670ca096cf8二、非父子组件之间的通信：1、创建bus.js 创建一个新的Vue实例，以后它就承担起了组件之间通信的桥梁了，也就是中央事件总线。2、创建一...
2024-01-10
vue入门(一)----组件
由于工作需要,最近在写一些前端的东西。经过向开发经验丰富的前端工程师的请教之后，得出一个结论----2016年前端被玩坏了，其实对于我来说我并不是太了解这句话的深刻含义，只是觉得是不是因为前端技术突飞猛进，导致前端的技术太多太杂。不管这些了，至少我不打算淌前端这趟浑水。 ...
2024-01-10
关于一些组件化的思想 vue
最近新来一个公司接手两个项目，看了代码之后气的血已经吐出来了。项目技术是用vue写的。几乎每一个页面上有啥功能就是一把嗦从头写到尾，没有看见任何的import 组件。我就想不明白了为什么用了vue却不用组件化思想。这样的带吗及其难以维护，一个文件全是四五千行代码。之后我基于公司业务vu...
2024-01-10vue强制刷新组件的方法示例
前言：在开发过程中，有时候会遇到这么一种情况，通过动态的赋值，但是dom没有及时更新，能够获取到动态赋的值，但是无法获取到双向绑定的dom节点，这就需要我们手动进行强制刷新组件。官网是这样说的：可能你还不大理解，请继续往下看，下面是我的一个例子，来详细解说了这个方法的使...
2024-01-10vue分页器组件编写方法详解
使用vue编写的分页器组件，支持输入页码跳转，效果如图：1、点击前五页：2、点击中间部分页面3、点击第一页，上一页按钮失效，点击最后一页，下一页按钮失效组件调用：//html调用 参数:pageSize(总页数);pageNo(当前页)<pager :pageSize="pageSize" v-model="pageNo" @on-jump="jump"></pager>//组件引入import pager fr...
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文件中，这样能大大提高代码的可读性。封装导航栏主要思路：把红色的部分当成一个个组件，而他...
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（三十）公共组件
以 分页 组件为例：（根据自己具体业务编写）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组件是如何解析及渲染的？
前言本文将对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组件事件属性穿透详解
组件事件属性穿透属性$attrs包含从父组件传过来的属性，但不包含子组件中prop中的属性以及class和style，所以对于那些html元素原生属性，可以不用再子组件中声明，直接从父组件中传进来就好// 子组件<template> <div> <input type="text" name="" id="" v-bind="$attrs" v-on='listeners'/> </div></template> props: { test: { ...
2024-01-10vue 如何给数组对象绑定事件？
方法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的基本用法，和使用一段时间以后，开始准备开发适用于vue3.0使用的pc端的组件库。会陆续跟新一些组件库的写法和注意事项，有兴趣的同学可以多多关注哦，不多bb，开始。...
2024-01-10
