vue插件
https://www.cnblogs.com/liuqin-always/p/12228125.htmlhttps://www.cnblogs.com/yj-ang3141/p/11265264.html...
2024-01-10
vue 分页插件
有个小问题就是最多显示3个分页，可以手动改一下配置参数就好。直接代码：<template> <div class="pageination_align"> <div class="pageination" v-if="pageinationTotal"> <div @click="pageUp(0)" class="pagination_page" :class="startDisabled?\'disabled\':\'\'">首页</div> <div @click="pag...
2024-01-10
vue 插槽
1、Slot 使用插槽目的：解决组件之间的内容通信，插槽也可以作为父子组件之间通信的另一种实现方式 <slot></slot>：相当于一个占位符，例如： 结果：2、缺省内容 在子组件内部使用<slot>元素时，可以给该元素指定一个内容，若父组件没有提供插槽内容，则渲染效果中的内容为...
2024-01-10
vue弹窗插件实战
vue做移动端经常碰到弹窗的需求, 这里写一个功能简单的vue弹窗popup.vue<template> <div class="popup-wrapper" v-show="visible" @click="hide"> <div class="popup-text">{{text}}</div> </div></template>组件html结构, 外层divposition:fixed定位, 内层div显示弹窗内容exp...
2024-01-10
vue插槽使用
vue插槽分为普通插槽，具名插槽，作用域插槽普通插槽只能有一个，而具名插槽可以有多个如果具名插槽没有接收的值（没有传插槽进来），会显示默认的值具名插槽和普通插槽作用域插槽自己定义循环的标签，不关心列表项怎么显示，由外部来决定子组件做循环，或者由外部传进来的时候重点...
2024-01-10
基于vue的分页插件
相信大家用过很多jquery的分页插件，那这次就用一用基于vue的分页插件。这里的环境用的是springboot首先要引入pagehelper的jar文件，版本是1.2.3，配置文件也需要配置一下核心代码： DAO层接口：1 List<Article> selectAll();mapper文件：只需要写一个简单的查询即可。1 <select id="selectAll" resultMap="ResultMapWithBLO...
2024-01-10
vue插件编写与实战
关于微信公众号：前端呼啦圈（Love-FED）我的博客：劳卜的博客知乎专栏：前端呼啦圈前言热爱vue开发的同学肯定知道awesome-vue 这个github地址，里面包含了数以千计的vue开源插件，而这些插件大都来自第三方开发者们，是他们为vue社区提供了大量的技术支持和解决方案。本文立足vue开源的理念，...
2024-01-10
vue中如何开发插件
1、vue中提供了install方法用来开发插件 官方：Vue.js 的插件应该有一个公开方法 install。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。2、我的插件目录如下button.vue用来书写插件的具体实现代码； button/index.js用来局部创建组件； library用来全局创建组件3、button.vue文件...
2024-01-10
Vue评分插件
五星评分插件做电商网站要用到评分功能，于是自己写了一个小插件vue_star.js。测试html:<!DOCTYPE html><html><head> <script src="vue.min.js"></script> <script src="vue_star.js"></script> <style> @font-face { font-family: 'icon-font'; src: url('iconfont.eot'...
2024-01-10
vue事件绑定
事件绑定vue官方文档：<https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6>说明：一般用@替代v-on：实现绑定事件修饰符.stop.prevent.capture.self.once：只会触发一次.passive<!-- 阻止单击事件继续向上冒泡传播 --><div class=\'btnParent\' @click="clickParent"> //clickParent(...
2024-01-10
vue插槽讲解
一、插槽使用因为插槽是在组件的基础上衍生的，因此需要创建一个组件并注册引用。<slot> 元素可以将插槽内容渲染出来二、内容覆盖父级组件中的插槽内容会覆盖子级组件中的插槽内容。例如：子组件插槽中写上一句话，父组件插槽内容什么也不写，渲染出来的内容为子组件的插槽内容。...
2024-01-10
实用的vue插件大汇总
Vue是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件，来了个大汇总，方便查找使用，便于工作和学习。很全的vue插件汇总，赶紧收藏下吧！github上的vue汇总https://github.com/vuejs/awesome-vue#qr-code一、UI组件及...
2024-01-10
vue事件处理器
可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码。 示例： <div id="example-1"> <button v-on:click="counter += 1">增加 1</button> <p>这个按钮被点击了 {{ counter }} 次。</p></div>var example1 = new Vue({ el: '#example-1', data: { counter: 0 }})结果：2、方法处理事件许多事件处理的逻辑都很复杂，所以直接把 ...
2024-01-10
vue的事件绑定
语法v-on:事件名.修饰符 = 方法名() | 方法名 | 简单的JS表达式简写： @事件名.修饰符 = 方法名() | 方法名 | 简单的JS表达式事件名： click|keydown|keyup|mouseover|mouseout|自定义事件名修饰符： .stop | .prevent | .once | .self | .left | .right | .middle | .up| .down | .keyCode | .keyAlias | .native | .passive事件绑定类型//单...
2024-01-10
写一个vue的滚动条插件
组件源码如下： vue-scroll.vue<template> <div class="vue-scroll" ref="vueScrollW"> <div class="vue-scroll-w" ref="vueScroll" > <div class="vue-scroll-c" :style="{width:cWidth}"> <slot></slot> </div> </div> ...
2024-01-10
vue3.0实现插件封装
最近公司有一个新的项目，项目框架是我来负责搭建的，所以果断选择了Vue3.x+ts。vue3.x不同于vue2.x，他们两的插件封装方式完全不一样。由于项目中需要用到自定义提示框,所以想着自己封装一个。vue2.x提供了一个vue.extend的全局方法。那么vue3.x是不是也会提供什么方法呢?果然从vue3.x源码中还是找到...
2024-01-10
谷歌浏览器添加vue插件
需要先在百度搜索 “谷歌访问助手”点击这个链接，下载，安转（http://www.cnplugins.com/zhuanti/ggfwzs-install-course.html），安转完成后，会出现点击开启开发者模式，谷歌右上角会出现点击打开，搜索需要的vue插件就可以了点击“添加至chrome”就可以了 。安装成功可以在，更多工具--扩展程序中看到打开详...
2024-01-10
vue绑定回车事件
对于原生的Vue来说，要绑定回车（enter）事件，只需要：@keyup.enter="方法名"而如果用了类似于Element UI之类的第三方UI框架的话，则得在后面加【.native】修饰符：@keyup.enter.native="方法名"这样就可以给原生的HTML元素绑定上回车事件，在一些比如input输入框需要添加回车搜索的事件处理机制的场景中就可...
2024-01-10
vue这个插件怎么使用呢？
一个图片放大缩小的插件 文档地址 插件已经安装好了 现在可以用鼠标实现图片的放大缩小 我想用按钮的方式实现 现在有两个按钮 我想点击按钮时实现图片放大缩小 我看文档有两个方法 一个zoomIn和一个zoomOut 我想知道这两个方法怎么写呢 写在哪里？谢谢<v-zoomer> 方法reset() – 重置刻度并转换为初始状态。zoomIn(scale=2) – 放大.zoomOut(sca...
2024-02-24
vue 条件渲染方式
1、通过class绑定<div :class="{'div-class': this.align == 'center'}"></div>对应的css.div-class { height: auto; }其中this.align可放在data或props中2、通过三元表达式<div :style="{ 'height': this.align=='center' ? 'auto' : '' }"></div>3、通过计算属性<div :align="align" :style="getLocality...
2024-01-10
vue运行svg文件
1、安装svg-sprite-loader插件，运行一下命令：npm i svg-sprite-loader -D2、修改webpack的配置文件，在webpack.base.config.js中修改如下代码：'use strict'const webpack = require('webpack')const path = require('path')const utils = require('./utils')const config = require('../config')const vueL...
2024-01-10
vue 引入的文件的
element-ui什么意思，引入的是什么css文件，回答element-ui 是一套“饿了么”团队开发的前端界面库。import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'通常会引入两个部分，前面是脚本库，后面是样式库。1.element 是一前端UI库，链接：https://element.eleme.cn/#/zh...2.import 'element-ui/lib/theme-chalk/inde...
2024-01-10
vue -- 插件的开发与使用
开发插件插件通常会为 Vue 添加全局功能。插件的范围没有限制——一般有下面几种：1、添加全局方法或者属性，如: vue-custom-element。2、添加全局资源：指令/过滤器/过渡等，如 vue-touch。3、通过全局 mixin 方法添加一些组件选项，如: vue-router。4、添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上...
2024-01-10
vue全屏事件开发详解
本文实例为大家分享了vue全屏事件开发的具体代码，供大家参考，具体内容如下在项目中有需求相应浏览器全屏，写了个案例代码先看看效果吧全屏显示：html代码：<!-- el-tooltip 文字提示 --><div class="btn-fullscreen" @click="handleFullScreen"> <el-tooltip effect="dark" :content="fullscreen ? `取消全屏`:`全屏`" placement=...
2024-01-10
