這15個Vue指令，讓你的項目開發爽到爆

受 AngularJS 的啓發，Vue 內置了一些很是有用的指令（好比v-html 和 v-once等），每一個指令都有自身的用途。完整的指令列表能夠在這裏查看.

這還沒完，更棒的是能夠開發自定義指令。Vue.js 社區所以得以經過發佈自定義指令npm 包，解決了無數的代碼問題。

如下就是我最喜歡的 Vue.js 自定義指令列表。不用說，這些指令爲個人項目開發節省了大量時間！😇

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… Demo: codesandbox.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>

複製代碼

HTML

4. Vue-ScrollTo

倉庫地址: github.com/rigor789/vu… Demo: vue-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… Demo: hilongjw.github.io/vue-lazyloa… 安裝: npm install --save vue-lazyload 圖片懶加載，很是方便。

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

6. V-Tooltip

倉庫地址: v-tooltip Demo: available 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… Demo: v-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/… Demo: vuejs-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'" />

複製代碼

HTML

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 Demo: available 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>

複製代碼

總結

歡迎補充更多好用的 Vue 自定義指令。

交流

歡迎關注個人微信公衆號：1024譯站。公衆號按期發佈國外最新技術資訊，讓你第一時間接觸前沿技術。