做一个vue轮播图组件
根据huangyi老师的慕课网vue项目跟着做的，下面大概记录了下思路1.轮播图的图先不做轮播图逻辑部分，先把数据导进来，看看什么效果。在recommend组件新建一个recommends的数组，用这个数组来接受数据的录播图部分。然后再轮播图的插槽部分添加图片，代码如下<slider> <div v-for="(item,index) in recommends" :...
2024-01-10
用vue简单写一个音乐播放组件
前言公司有个单位项目，需要读取语音文件并进行播放，其实用audio引入个播放链接即可，不需要太多功能后来想到网站是不是也可以放个小播放器插件，索性查了audio相关api，也学习其中相关技巧，分享给大家完整代码整个代码很简单，有些audio-api注释也写在了后面html<template><div class="music"><div cla...
2024-01-10
vue自由拖拽、缩放组件
github地址：https://github.com/kirillmurashov/vue-drag-resize安装：npm i -s vue-drag-resize使用：<template> <div> <VueDragResize :isActive="true" :isResizable="false" > <img src="../assets/logo.png" v-drag height="100px" width="100px" /> </VueDragResiz...
2024-01-10
vue2.0异步组件?
问题描述：目标是路由页加载前，可根据需求先显示loading或者骨架屏组件。但目前这种写法直接显示路由页。求正解！！！router.jsimport asyncComponent from "@/utils/asyncLoadComponent";const clientRoutes = [ { path:/add", name: 'add', component:...
2024-03-06
vue3封装放大镜组件的实例代码
目录组件基础结构目的：实现图片放大镜功能安装vueuse功能实现完整代码总结组件基础结构结尾有完整代码可直接复制使用目的：封装图片预览组件，实现鼠标悬停切换效果落地代码：<template> <div class="goods-image"> <div class="middle"> <img :src="images[currIndex]" alt=""> </div> <ul class="small"> ...
2024-01-10
来个大佬解下 vue组件
假设第一次获取后台数据 datas1 渲染了整个table，然后根据点击展开的某一行，比如第一行再去请求详情接口，拿到详情数据datas2请问如何将详情数据添加到展开行里面，展开行是可以展开多个的子组件// item 是第一次数据循环的当前对象<button @click="handleClick(item)"></button> <tr> <slot name="info" v-b...
2024-02-17
vue2.0组件快速入门
前言最近开始在学vue相关的内容。组件这章的内容比较多。看了http://www.cnblogs.com/keepfool/p/5625583.html这篇博客，博主总结的还比较全面也挺清晰，可是这篇博客的知识点跟实例都是基于vue 1.0版本的，所以参考这篇博客，我将vue2.0版本中的相关知识点做了一个总结。算是自己学习的一个笔记什么是组件...
2024-01-10
vue2.0组件通信小总结
1.父组件->子组件父组件<parent> <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰</parent>data(){ return { msg: [1,2,3] };}子组件(子组件通过props来接收数据:)// 写法1：props: ['childMsg']// 写法2：props: { childMsg: Array //这里指定了字符串类型，如果类型不一致会警告}// 写法3：props: { ...
2024-01-10
vue组件 销毁定时器问题
我在a页面写一个定时，让他每秒钟打印一个1，然后跳转到b页面，此时可以看到，定时器依然在执行。这样是非常消耗性能的。如下图所示：解决方法1：首先我在data函数里面进行定义定时器名称：data() { return { timer: null // 定时器名称 } },然后这样使用定时器：this.timer = (() => { // 某些操作 }, 1000)...
2024-01-10
vue2.0组件之间的通信
本文介绍3中类型：1、父子组件之间的通信2、非父子组件的通信3、较为复杂的通信一、父子组件之间的通信：访问： http://www.jianshu.com/p/2670ca096cf8二、非父子组件之间的通信：1、创建bus.js 创建一个新的Vue实例，以后它就承担起了组件之间通信的桥梁了，也就是中央事件总线。2、创建一...
2024-01-10
NutUI 视频组件开发心得
引子说到在项目中引入一个视频，我们肯定会想到 HTML5 为我们提供的 Video 标签，它为我们提供了许多属性和方法，使用起来很方便，当然直接使用也会遇到各种兼容问题，在最初学习 Video 标签时，W3C 官网就给出了这样的温馨提示：这份提示在之后接触了一系列视频项目后，才明白这“不容易”指的...
2024-01-10
vue组件全局注册、局部注册
定义：组件是可复用的 Vue 实例全局组件：一般来说是在任何页面中任何位置都可以使用，比如：头部公共栏(navbar)，底部公共栏(tabbar)局部组件：只能定义在它的el中，不能使用在其他的位置，否则无效注册类型：1.全局注册 Vue.component('my-component-name', { // ... 选项 ... }) 第一个参数是组件名...
2024-01-10
超简单的vue2.0分页组件
1.组件代码<template> <div class="pagination_comment_style" style="width: 100%;overflow: hidden"> <ul class="pagination"> <li @click="goPage(pageIndex-1)" v-bind:class="{ \'no-allow\': 1 == pageIndex }"><span>«</span></li> <li @c...
2024-01-10
vue入门(一)----组件
由于工作需要,最近在写一些前端的东西。经过向开发经验丰富的前端工程师的请教之后，得出一个结论----2016年前端被玩坏了，其实对于我来说我并不是太了解这句话的深刻含义，只是觉得是不是因为前端技术突飞猛进，导致前端的技术太多太杂。不管这些了，至少我不打算淌前端这趟浑水。 ...
2024-01-10
关于一些组件化的思想 vue
最近新来一个公司接手两个项目，看了代码之后气的血已经吐出来了。项目技术是用vue写的。几乎每一个页面上有啥功能就是一把嗦从头写到尾，没有看见任何的import 组件。我就想不明白了为什么用了vue却不用组件化思想。这样的带吗及其难以维护，一个文件全是四五千行代码。之后我基于公司业务vu...
2024-01-10
Vue2.0之 组件
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 测试实例 - 菜鸟教程(runoob.com)</title><script src="https://unpkg.com/vue/dist/vue.js"></script></head><body><div id="app-7"> <ol> <!-- 现在我们为每个 todo-item 提供 todo 对象 todo 对象是变量，即其内容可以是动态的。 ...
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
vue2.0开发时导入组件时出错
导入自定义组件时出现了如下错误 ERROR Failed to compile with 1 errors 12:35:41This dependency was not found:* components/star/star in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/header/header.vu...
2024-01-10基于vue的验证码组件的示例代码
最近在自己写页面，模仿思否论坛，然后写登录注册UI的时候需要一个验证码组件. 去搜一下没找到什么合适的，而且大多都是基于后端的，于是自己手写一个。演示分析验证码组件分析验证码功能随机出现的数字大小写字母 （基础功能）不同的数字或者字母有不同的颜色 (功能优化)不同的数字...
2024-01-10
vue点击按钮加载组件到当前区域？
点击创建按钮，加载另外一个组件到覆盖绿色框内 ，新加载的页面可以返回当前的绿色框内容。。。 求指教，没学多久头疼。回答：具体也说不好，你看看把这是父级组件里的布局，你所有的右侧页面都会在这个子组件中渲染就是你右侧的页面路由创建方法跳转方式...
2024-01-10
Vue.2.0.5-组件
什么是组件？组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。使用组件注册之前说过，我们可以通过以下方式创建一...
2024-01-10
032.核心组件kube
一 kube-proxy原理1.1 kube-proxy概述Kubernetes为了支持集群的水平扩展、高可用性，抽象出了Service的概念。Service是对一组Pod的抽象，它会根据访问策略（如负载均衡策略）来访问这组Pod。Kubernetes在创建Service时会为Service分配一个虚拟的IP地址，客户端通过访问这个虚拟的IP地址来访问服务，Service则负责将请...
2024-01-10
【万字长文】从零配置一个vue组件库
本文会从零开始配置一个monorepo类型的组件库，包括规范化配置、打包配置、组件库文档配置及开发一些提升效率的脚本等，monorepo 不熟悉的话这里一句话介绍一下，就是在一个git仓库里包含多个独立发布的模块/包。ps.本文涉及到的工具配置其实在平时开发中一般都不需要自己配置，我们使用的各种...
2024-01-10
修改原生单选框样式（vue单选组件）
一、效果如图 二、实现修改单选样式//html<div class="radio-wrap"> <input type="radio" v-model="pointer" :value="item" :id="\'selectDoll_\'+index" :disabled="item.money > rechargeMoney"> <label :for="\'selectDoll_\'+index" @click="judgeMoney(item)"></label>...
2024-01-10Vue组件化通讯的实例代码
1. Vue的组成文件(.vue)分为三部分，分别对应html,js,css<template></template><script></script><style></style>2. Vue的生命周期函数beforeCreate() 创建数据之前created() 创建数据 我们在这里的得到我们在data里面创建的数据beforeMount() // Dom渲染完成前mounted() //Dom渲染完成beforeUpdate() // 更新视图 在beforeUpdate触发时，...
2024-01-10
