这15个Vue指令,让你的项目开发爽到爆

更新日期: 2019-11-16阅读: 5.1k标签: 指令

1. V-Hotkey

仓库地址github.com/Dafrok/v-ho… Demo戳这里 https://dafrok.github.io/v-hotkey 安装npm install --save v-hotkey 

这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟:

<template>
  <div
    v-show="show"
    v-hotkey="{
      'esc': onClose,
      'ctrl+enter': onShow
    }"
  >
	  Press `esc` to close me!
  </div>
</template>

<script>
export default {
    data() {
        return {
            show: true
        }
    },

    methods: {
        onClose() {
            this.show = false
        },

        onShow() {
            this.show = true
        },
    }
}
</script>

2. V-Click-Outside

仓库地址github.com/ndelvalle/v… Democodesandbox.io/s/zx7mx8y1o… 安装: npm install --save v-click-outside

你想要点击外部区域关掉某个组件吗?用这个指令可以轻松实现。这是我每个项目必用的指令之一,尤其在弹框和下拉菜单组件里非常好用。

<template>
  <div
    v-show="show"
    v-click-outside="onClickOutside"
  >
    Hide me when a click outside this element happens
  </div>
</template>

html

<script>
export default {
  data() {
    return {
      show: true
    };
  },

  methods: {
    onClickOutside() {
      this.show = false;
    }
  }
};
</script>

说明: 你也可以通过双击外部区域来触发,具体用法请参考文档。


3. V-Clipboard

仓库地址github.com/euvl/v-clip… 安装: npm install --save v-clipboard

这个简单指令的作者是Yev Vlasenko ,可以用在任何静态或动态元素上。当元素被点击时,指令的值会被复制到剪贴板上。用户需要复制代码片段的时候,这个非常有用。

<button v-clipboard="value">
  Copy to clipboard
</button>


4. vue-ScrollTo

仓库地址github.com/rigor789/vu… Demovue-scrollto.netlify.com/ 安装: npm install --save vue-scrollto

这个指令监听元素的点击事件,然后滚动到指定位置。我通常用来处理文章目录跳转和导航跳转。

<span v-scroll-to="{
  el: '#element',          // 滚动的目标位置元素
  container: '#container', // 可滚动的容器元素
  duration: 500,           // 滚动动效持续时长(毫秒)
  easing: 'linear'         // 动画曲线
  }"
>
  Scroll to #element by clicking here
</span>

说明: 也可以通过代码动态设置,具体看文档。


5. Vue-Lazyload

仓库地址github.com/hilongjw/vu… Demohilongjw.github.io/vue-lazyloa… 安装: npm install --save vue-lazyload 图片懒加载,非常方便。

<img v-lazy="https://www.domain.com/image.jpg">


6. V-Tooltip

仓库地址v-tooltip Demoavailable here 安装: npm install --save v-tooltip 几乎每个项目都会用到 tooltip。这个指令可以给元素添加响应式的tooltip,并可控制显示位置、触发方式和监听事件。

<button v-tooltip="'You have ' + count + ' new messages.'">

说明: 还有一个比较流行的tooltip插件vue-directive-tooltip.


7. V-Scroll-Lock

仓库地址github.com/phegman/v-s… Demov-scroll-lock.peterhegman.com/ 安装: npm install --save v-scroll-lock

基于 body-scroll-lock 开发,这个指令的作用是在打开模态浮层的时候防止下层的元素滚动。

<template>
  <div class="modal" v-if="opened">
    <button @click="onCloseModal">X</button>
    <div class="modal-content" v-scroll-lock="opened">
      <p>A bunch of scrollable modal content</p>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      opened: false
    }
  },
  methods: {
    onOpenModal () {
      this.opened = true
    },

    onCloseModal () {
      this.opened = false
    }
  }
}
</script>


8. V-Money

仓库地址github.com/vuejs-tips/… Demovuejs-tips.github.io/v-money/ 安装: npm install --save v-money 如果你需要在输入框里加上货币前缀或后缀、保留小数点位数或者设置小数点符号——不用找了,就是它!一行代码搞定这些需求:

<template>
  <div>
    <input v-model.lazy="price" v-money="money" /> {{price}}
  </div>
</template>
<script>
export default {
  data () {
    return {
      price: 123.45,
      money: {
        decimal: ',',
        thousands: '.',
        prefix: '$ ',
        precision: 2,
      }
    }
  }
}
</script>


9. Vue-Infinite-Scroll

仓库地址github.com/ElemeFE/vue… 安装: npm install --save vue-infinite-scroll

无限滚动指令,当滚动到页面底部时会触发绑定的方法。

<template>
  <!-- ... -->
  <div
    v-infinite-scroll="onLoadMore"
    infinite-scroll-disabled="busy"
    infinite-scroll-distance="10"
  ></div>
<template>
<script>
export default {
  data() {
    return {
      data [],
      busy: false,
      count: 0
    }
  },

  methods: {
    onLoadMore() {
      this.busy = true;

      setTimeout(() => {
        for (var i = 0, j = 10; i < j; i++) {
          this.data.push({ name: this.count++ });
        }
        this.busy = false;
      }, 1000);
    }
  }
}
</script>


10. Vue-Clampy

仓库地址vue-clampy安装: npm install --save @clampy-js/vue-clampy

这个指令会截断元素里的文本,并在末尾加上省略号。它是用clampy.js实现的。

  <p v-clampy="3">Long text to clamp here</p>
  <!-- displays: Long text to...-->


11. Vue-InputMask

仓库地址vue-inputmask 安装: npm install --save vue-inputmask 当你需要在输入框里格式化日期时,这个指令会自动生成格式化文本。基于Inputmask library 开发。

<input type="text" v-mask="'99/99/9999'" />


12. Vue-Ripple-Directive

仓库地址vue-ripple-directive 安装: npm install --save vue-ripple-directive

Aduardo Marcos 写的这个指令可以给点击的元素添加波纹动效。

<div v-ripple class="button is-primary">This is a button</div>


13. Vue-Focus

仓库地址vue-focus 安装: npm install --save vue-focus 有时候,用户在界面里操作,需要让某个输入框获得焦点。这个指令就是干这个的。

<template>
  <button @click="focused = true">Focus the input</button>

  <input type="text" v-focus="focused">
</template>
<script>
export default {
  data: function() {
    return {
      focused: false,
    };
  },
};
</script>


14. V-Blur

仓库地址v-blur Demo戳这里 安装: npm install --save v-blur 假设你的页面在访客没有注册的时候,有些部分需要加上半透明遮罩。用这个指令可以轻松实现,还可以自定义透明度和过渡效果。

<template>
  <button
    @click="blurConfig.isBlurred = !blurConfig.isBlurred"
  >Toggle the content visibility</button>

  <p v-blur="blurConfig">Blurred content</p>
</template>
<script>
  export default {
      data () {
        return           
          blurConfig: {
            isBlurred: false,
            opacity: 0.3,
            filter: 'blur(1.2px)',
            transition: 'all .3s linear'
          }
        }
      }
    }
  };
</script>


15. Vue-Dummy

仓库地址vue-dummy Demoavailable here 安装: npm install --save vue-dummy 开发 app 的时候,偶尔会需要使用假文本数据,或者特定尺寸的占位图片。用这个指令可以轻松实现。

<template>
  <!-- the content inside will have 150 words -->
  <p v-dummy="150"></p>

  <!-- Display a placeholder image of 400x300-->
  <img v-dummy="'400x300'" />
</template>

作者:KaysonLi
链接:https://juejin.im/post/5da43c7c6fb9a04e0855bb3d
来源:掘金


链接: https://fly63.com/article/detial/6450

指令式编程 VS 声明式编程

指令式编程:告诉机器该如何做,并得到自己想要的结果。声明式编程:告诉机器您想得到什么,让机器自己计算该如何做。

vue内置指令大全_整理常用的Vue内置指令

整理vue常用的内置指令:v-bind指令、v-text指令、v- html指令、v-show指令、v-if指令、v-else 指令、v-else-if 指令、v-for 指令、v-on 指令、v-model 指令、v-once 指令、v-cloak指令、v-pre指令

如何在Vue里建立长按指令

本文将解释如何通过按下(或按住)按钮来执行功能和删除输入。首先,我将解释如何在VanillaJS中实现这一目标。然后,为它创建一个Vue指令。那么,让我们开始吧。

深入解析Vue.directive 自定义指令

全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如我们今天要学习的指令Vue.directive。说的简单些就是,在构造器外部用Vue提供给我们的API函数来定义新的功能。

VUE指令大全

v-text主要用来更新textContent,可以等同于JS的text属性。v-html双大括号的方式会将数据解释为纯文本,而非HTML。为了输出真正的HTML,可以用v-html指令。它等同于JS的innerHtml属性。

Vue中的全部指令

可以用方括号括起来的 JavaScript 表达式作为一个指令的参数:动态参数预期会求出一个字符串,异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。

vue v-for 使用问题Error in render

今天使用v-for指令的时候遇到一个错误:[Vue warn]: Error in render: \\\"TypeError: Cannot read property \\\'children\\\' of undefined\\\",猜测使用了嵌套属性的原因,在页面中无法解析出具体属性值

Vue.js 自定义指令使用场景及案例

使用场景:代码复用和抽象的主要形式是组件;当需要对普通 DOM 元素进行底层操作,此时就会用到自定义指令;但是,对于大幅度的 DOM 变动,还是应该使用组件

Vue中插槽指令

意义就是在组件里留着差值方便后续组件内容新增,而且由于插件是写在父级中数据可以直接父级中传输而不需要传子再传父有些情况会减少写代码量,组件里没有设置插件名称,页面中插槽中写了插槽名称 结果页面中插槽不会被渲染

Vue常用指令

vue.js官方给自己的定为是数据模板引擎,并给出了一套渲染数据的指令。本文详细介绍了vue.js的常用指令。Vue.js 使用了基于 HTML 的模板语法最简单的使用vue的方式是渲染数据,渲染数据最常见的形式就是

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!