需求 在业务中，会碰到许多点击请求的情况，在请求前改变一个lock变量（在lock变回来之前，点击无效），在请求回调中再改变lock.以确保在，请求回来之前，不会重复请求。或者类似的点击节流业务 实现方式指令 <div v-for="a in 3" :key="a" v-demo:getData="a">指令</div>//getData是函数名，a是传入的参数directives: {demo: {bind(el: Element, binding: any, vnode: VNode) {const that: any = vnode.context// console.log(bin...
项目需求中有一个日期选择限制的功能点：今天之前不可选，周末不可选。 传统的input type=date无法做到，所以使用了这个插件来实现功能。 1.引入vue-datepicker loader：npm install vue-datepicker 2.引入moment loader：npm install moment --save 因为vue-datepicker是依赖vue和moment的,所以也应提前 引入moment； 3.在用到该插件的地方引入： import myDatepicker from vue-datepicker/vue-datepicker-es6.vue; /* vue 2.0 */...
最近在项目中遇到一个需求，有一个列表需要滚动加载，类似于微博的无限滚动。当时第一反应时监听滚动事件，在判断滚动到达底部时加载下一页，同时心里也清楚，监听滚动事件需要做好截流。顺手搜索了下发现有一个现成的插件vue-infinite-scroll ,用法也很简单，于是乎就用了起来。 需求上线后，对它的实现挺好奇的，于是研究了一番源码，这篇文章就是源码解析笔记。 插件使用方法 这是一个 vue 的指令，按照 github 仓库上的介绍，用...
思路： 要实现无限轮播，需要在轮播图前后各加一张图片，加在前面的是轮播图的最后一张图片（重复的），加在后面的是轮播图的第一张图片（重复的）。例： <div class="wrapper-content"><img class="wrapper-content_img" alt="4" src="img/4.jpg"/><img class="wrapper-content_img" alt="1" src="img/1.jpg"/><img class="wrapper-content_img" alt="2" src="img/2.jpg"/><img class="wrapper-content_img" alt="3" src="img/3.j...
本文实例讲述了Vue使用zTree插件封装树组件操作。分享给大家供大家参考，具体如下： 1.通过npm安装jquery npm install jquery --save-dev2.在build/webpack.base.conf文件当中引入jquery module.exports = {...resolve: {extensions: [.js, .vue, .json],alias: {vue$: vue/dist/vue.esm.js,@: resolve(src),jquery: path.resolve(__dirname, ../node_modules/jquery/src/jquery)}},... }3.在项目根目录创建一个文件夹plugins，将z...
前言 如果你正在使用Vue框架，那么你肯定知道Vue CLI是什么。Vue-cli 3，它是Vue.js 开发的标准工具（脚手架），提供项目支架和原型设计。 除了日常构建打包项目，Vue CLI3 的一个重要部分是cli-plugins，插件开发。 本文将教你如何科学的创建一个Vue-CLI 插件，以及项目独立npm包。 1. 什么是CLI plugin 它可以修改内部webpack配置并将命令注入到vue-cli-service。一个很好的例子是@vue/cli-plugin-typescript：当你调用它时，它会...
众所周知，vuex的一个全局状态管理的插件，但是在浏览器刷新的时候，内存中的state会释放，通常的解决办法就是用本地存储的方式保存数据，然后再vuex初始化的时候再赋值给state，手动存再手动取会觉得很麻烦，这个时候就可以使用vuex的插件vuex-solidification插件地址: vuex-solidification , 欢迎star 插件原理vuex有一个hook方法：store.subscribe((mutation, state) => {}) 每次在mutation方法执行完之后都会调用这个回调函数，...
页面刷新后，想保存页面未保存的数据。我们总是习惯于放在浏览器的sessionStorage和localStorage中。但是用了vue后，vuex便可以被应用了。 vuex优势：相比sessionStorage，存储数据更安全，sessionStorage可以在控制台被看到。 vuex劣势：在F5刷新页面后，vuex会重新更新state，所以，存储的数据会丢失。 vuex可以进行全局的状态管理，但刷新后刷新后数据会消失，这是我们不愿意看到的。怎么解决呢，我们可以结合本地存储做到数据持...
1 安装首先，通过 npm 安装 vue-router 插件：npm install --save vue-router安装的插件版本是：vue-router@3.0.2 2 用法2.1 新建 vue 组件在 router 目录中，新建 views 目录，然后新建两个 vue 组件（一个页面就对应一个组件）。index.vue：<template><div>首页</div> </template><script>export default {name: "index.vue"} </script><style scoped></style>about.vue：<template><div>关于我们</div> </template><script>exp...
简单编写一个vue插件，当点击时触发notify插件，dom中出现相应内容并且在相应时间之后清除，我们可以在根组件中设定通知内容和延迟消失时间。1. 基础知识 我们首先初始化一个vue项目，删除不需要的组件和样式，主要针对src下一些初始化资源，有过vue项目基础的应该很容易理解，如果没有vue基础建议先熟悉每个初始化文件的作用。关于vue中如何开发插件可以直接看vue官方文档，简单了解插件开发过程，vue插件文档。现在我们在src目录...
前言 图片懒加载是一个很常用的功能，特别是一些电商平台，这对性能优化至关重要。今天就用vue来实现一个图片懒加载的插件。 这篇博客采用“三步走”战略——Vue.use()、Vue.direction、Vue图片懒加载插件实现，逐步实现一个Vue的图片懒加载插件。 Vue.use()就像开发jQuery插件要用$.fn.extent()一样，开发Vue插件我们要用Vue.use()。其实就是官方内部实现的一个方法，供广大开发者灵活开发属于自己的插件。只需要按照约定好的规则...
做一个简单的移动端展示项目，后台分页后前端加载，实现上拉加载下一页，找了下，还是用这个mescroll.js插件好一点1.npm安装npm install --save mescroll.js //不要使用cnpm安装导入(在哪个页面使用,则在哪个页面导入(这里的话，我使用全局导入会出现问题,若有错,还请大家指出,暂时想到的就是局部引入))：import MescrollVue from ‘mescroll.js/mescroll.vue注册组件：components: {MescrollVue // 注册mescroll组件 }, template使...
浏览器基本已经天下大统了，放眼望去都是Chromium的天下。那么，能写一个浏览器插件也算是一种回报率不错的技能。 基本知识 浏览器插件官方的说法叫扩展程序，允许你为浏览器增加各种功能，但不需要深入研究浏览器本身的代码。你可以用HTML，CSS和JavaScript创建新的扩展程序，如果你曾经写过网页，那么写一个插件是非常轻松的事情。 常见的插件一般就是地址栏后面的一个图标，点击后给你当前网页提供各种功能，或者在你点击网页右...
插件的分类 添加全局的方法或者属性 比如：vue-element添加全局的资源 比如：指令 v-bind通过mixin方法添加的一些混合添加Vue实例方法 Vue.prototype上面插件的使用通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成：// 调用 `MyPlugin.install(Vue)` Vue.use(MyPlugin)new Vue({//... options })```也可以传入一个选项对象： ``` javascript Vue.use(MyPlugin, { someOption: true })插件开发Vue.js ...
首先 下载 npm install vue-class-component vue-property-decorator --save-dev一梭子直接干； 其次，咱来说说它们的区别与联系： vue-property-decorator社区出品；vue-class-component官方出品 vue-class-component提供了Vue、Component等； vue-property-decorator深度依赖了vue-class-component，拓展出了更多操作符：@Prop、@Emit、@Inject、@Model、@Provide、@Watch； 开发时正常引入vue-property-decorator就行 引入后写v...