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图片上传插件
https://lian-yue.github.io/vue-upload-component/#/en/documents文档：https://lian-yue.github.io/vue-upload-component/#/zh-cn/documents#%E5%85%A5%E9%97%A8%E5%BC%80%E5%A7%8B-%E7%9B%B4%E6%8E%A5%E4%BD%BF%E7%94%A8如果同一个页面使用多次插件，属性ref,input-file,input-filter,input-id...
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
v-if:只渲染一次的情况下，性能更好v-show:频繁切换性能更好vue虚拟DOM技术浏览器：渲染引擎（慢）+JS引擎（快）用1个JS对象来充当DOM对象，因为JS对象性能比较快，所以用虚拟DOM对象进行频繁操作。频繁操作完之后，再跟dom对象进行对比，发现不一样的地方在统一进行更改，这样就可以达到性能的最...
2024-01-10
vue条件渲染
实例基本使用 <h1 v-if="ok">Yes</h1>如果想切换多个元素，可以使用template元素，渲染结构不包含template元素<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p></template>使用else<div v-if="Math.random() > 0.5"> Now you see me</div><div v-else> Now you don't</div>使用v-e...
2024-01-10
vue 分页插件使用
npm install vuejs-paginate --saveimport Paginate from \'vuejs-paginate\'Vue.component(\'paginate\', Paginate)<!-- 分页组件 --><template> <div id="pagation"> <template v-if="noLiSurround"> <!-- 共5条 --> <div class="page_every">共{{this.count}}条</div...
2024-01-10
vue插槽问题
问题： a组件中引用了b组件。插入默认插槽使用了c组件。 问b组件怎么如何编写，可以动态插入组件到c的默认插槽中。b组件为一个动态生成元素的组件。通过传递的配置项数据来生成对应各种组件， 但是传递对应名称的插槽可以来替换组件显示内容。但是还是需要把当前需要生成的组件插入到这个插槽中。 不知道大佬们能不能听懂。// ... a.vue<template> <b> <template ...
2024-02-07
Vue引入插件
引入Element ui1.在当前目录下,运行:npm i element-ui -S 2.在src/main.js中添加代码import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)引入jquery1.在项目文件夹下,使用命令 npm install jquery --save-dev 引入jquery.2.在bulid/webpack.base.conf.js 中添...
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插件
需要先在百度搜索 “谷歌访问助手”点击这个链接，下载，安转（http://www.cnplugins.com/zhuanti/ggfwzs-install-course.html），安转完成后，会出现点击开启开发者模式，谷歌右上角会出现点击打开，搜索需要的vue插件就可以了点击“添加至chrome”就可以了 。安装成功可以在，更多工具--扩展程序中看到打开详...
2024-01-10
vue3.0实现插件封装
最近公司有一个新的项目，项目框架是我来负责搭建的，所以果断选择了Vue3.x+ts。vue3.x不同于vue2.x，他们两的插件封装方式完全不一样。由于项目中需要用到自定义提示框,所以想着自己封装一个。vue2.x提供了一个vue.extend的全局方法。那么vue3.x是不是也会提供什么方法呢?果然从vue3.x源码中还是找到...
2024-01-10
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 鼠标右击事件
github项目：https://github.com/Tenderrain/v-contextmenu使用@contextmenu.prevent即可参考：https://www.cnblogs.com/sxz2008/p/6953082.html...
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
vue事件对象与修饰符
事件对象event$event是vue提供的特殊变量，用来表示原生的事件参数event。$event可以解决事件参数对象event被覆盖问题<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script></head><body><div id="ap...
2024-01-10
vue 代码高亮插件全面对比测评
目录全面对比从活跃方面来看从功能方面来看深入对比1，ace2，codemirror3，monaco4，结论全面对比从活跃方面来看从功能方面来看代码高亮是必须的，社区必须活跃，不然修复bug没有一点点参考，太费时间。自动补全缩进，快捷键操作，搜索和替换等功能不是必须的，如果有，能拿来装逼当然最好，...
2024-01-10
vue利用插件实现按比例切割图片
本文实例为大家分享了vue利用插件实现按比例切割图片的具体代码，供大家参考，具体内容如下1.使用插件——vueCropper安装该插件：npm install vue-cropper结合el-element的上传组件2.示例：主页面data(){ return { formData:{ currentBannerImg:"" }, isShowCropper :false, }}<el-upload class="avatar-uploader"...
2024-01-10
