Vue開(kāi)發(fā)常用的指令實(shí)例介紹

這篇文章主要講解了“Vue開(kāi)發(fā)常用的指令實(shí)例介紹”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“Vue開(kāi)發(fā)常用的指令實(shí)例介紹”吧！

1. V-Hotkey

倉(cāng)庫(kù)地址: https://github.com/Dafrok/v-hotkey
Demo: 戳這里 https://dafrok.github.io/v-hotkey

安裝: npm install --save v-hotkey

這個(gè)指令可以給組件綁定一個(gè)或多個(gè)快捷鍵。你想要通過(guò)按下 Escape 鍵后隱藏某個(gè)組件，按住 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

倉(cāng)庫(kù)地址: https://github.com/ndelvalle/v-click-outside

Demo: https://codesandbox.io/s/zx7mx8y1ol?module=%2Fsrc%2Fcomponents%2FHelloWorld.vue

安裝: npm install --save v-click-outside

你想要點(diǎn)擊外部區(qū)域關(guān)掉某個(gè)組件嗎？用這個(gè)指令可以輕松實(shí)現(xiàn)。這是我每個(gè)項(xiàng)目必用的指令之一，尤其在彈框和下拉菜單組件里非常好用。

<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>

說(shuō)明： 你也可以通過(guò)雙擊外部區(qū)域來(lái)觸發(fā)，具體用法請(qǐng)參考文檔。

3. V-Clipboard

倉(cāng)庫(kù)地址: https://github.com/euvl/v-clipboard

安裝: npm install --save v-clipboard

這個(gè)簡(jiǎn)單指令的作者是Yev Vlasenko ，可以用在任何靜態(tài)或動(dòng)態(tài)元素上。當(dāng)元素被點(diǎn)擊時(shí)，指令的值會(huì)被復(fù)制到剪貼板上。用戶需要復(fù)制代碼片段的時(shí)候，這個(gè)非常有用。

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

4. Vue-ScrollTo

倉(cāng)庫(kù)地址: https://github.com/rigor789/vue-scrollTo

Demo: https://vue-scrollto.netlify.com/

安裝: npm install --save vue-scrollto

這個(gè)指令監(jiān)聽(tīng)元素的點(diǎn)擊事件，然后滾動(dòng)到指定位置。我通常用來(lái)處理文章目錄跳轉(zhuǎn)和導(dǎo)航跳轉(zhuǎn)。

<span v-scroll-to="{
 el: '#element',     // 滾動(dòng)的目標(biāo)位置元素
 container: '#container', // 可滾動(dòng)的容器元素
 duration: 500,      // 滾動(dòng)動(dòng)效持續(xù)時(shí)長(zhǎng)（毫秒）
 easing: 'linear'     // 動(dòng)畫曲線
 }"
>
 Scroll to #element by clicking here
</span>

說(shuō)明： 也可以通過(guò)代碼動(dòng)態(tài)設(shè)置，具體看文檔。

5. Vue-Lazyload

倉(cāng)庫(kù)地址: https://github.com/hilongjw/vue-lazyload

Demo: http://hilongjw.github.io/vue-lazyload/

安裝: npm install --save vue-lazyload

圖片懶加載，非常方便。

<img v-lazy="https://cache.yisu.com/upload/information/20200622/114/12978">

6. V-Tooltip

倉(cāng)庫(kù)地址: v-tooltip

Demo: available here

安裝: npm install --save v-tooltip

幾乎每個(gè)項(xiàng)目都會(huì)用到 tooltip。這個(gè)指令可以給元素添加響應(yīng)式的tooltip，并可控制顯示位置、觸發(fā)方式和監(jiān)聽(tīng)事件。

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

說(shuō)明： 還有一個(gè)比較流行的tooltip插件vue-directive-tooltip.

7. V-Scroll-Lock

倉(cāng)庫(kù)地址: https://github.com/phegman/v-scroll-lock

Demo: https://v-scroll-lock.peterhegman.com/

安裝: npm install --save v-scroll-lock

基于 body-scroll-lock 開(kāi)發(fā)，這個(gè)指令的作用是在打開(kāi)模態(tài)浮層的時(shí)候防止下層的元素滾動(dòng)。

<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

倉(cāng)庫(kù)地址: https://github.com/vuejs-tips/v-money

Demo: https://vuejs-tips.github.io/v-money/

安裝: npm install --save v-money

如果你需要在輸入框里加上貨幣前綴或后綴、保留小數(shù)點(diǎn)位數(shù)或者設(shè)置小數(shù)點(diǎn)符號(hào)——不用找了，就是它！一行代碼搞定這些需求：

<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

倉(cāng)庫(kù)地址: https://github.com/ElemeFE/vue-infinite-scroll

安裝: npm install --save vue-infinite-scroll

無(wú)限滾動(dòng)指令，當(dāng)滾動(dòng)到頁(yè)面底部時(shí)會(huì)觸發(fā)綁定的方法。

<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

倉(cāng)庫(kù)地址: vue-clampy.

安裝: npm install --save @clampy-js/vue-clampy

這個(gè)指令會(huì)截?cái)嘣乩锏奈谋?，并在末尾加上省略?hào)。它是用clampy.js實(shí)現(xiàn)的。

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

11. Vue-InputMask

倉(cāng)庫(kù)地址: vue-inputmask

安裝: npm install --save vue-inputmask

當(dāng)你需要在輸入框里格式化日期時(shí)，這個(gè)指令會(huì)自動(dòng)生成格式化文本?；贗nputmask library 開(kāi)發(fā)。

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

12. Vue-Ripple-Directive

倉(cāng)庫(kù)地址: vue-ripple-directive

安裝: npm install --save vue-ripple-directive

Aduardo Marcos 寫的這個(gè)指令可以給點(diǎn)擊的元素添加波紋動(dòng)效。

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

13. Vue-Focus

倉(cāng)庫(kù)地址: vue-focus

安裝: npm install --save vue-focus

有時(shí)候，用戶在界面里操作，需要讓某個(gè)輸入框獲得焦點(diǎn)。這個(gè)指令就是干這個(gè)的。

<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

倉(cāng)庫(kù)地址: v-blur

Demo: 戳這里

安裝: npm install --save v-blur

假設(shè)你的頁(yè)面在訪客沒(méi)有注冊(cè)的時(shí)候，有些部分需要加上半透明遮罩。用這個(gè)指令可以輕松實(shí)現(xiàn)，還可以自定義透明度和過(guò)渡效果。

<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

倉(cāng)庫(kù)地址:vue-dummy

Demo: available here

安裝: npm install --save vue-dummy

開(kāi)發(fā) app 的時(shí)候，偶爾會(huì)需要使用假文本數(shù)據(jù)，或者特定尺寸的占位圖片。用這個(gè)指令可以輕松實(shí)現(xiàn)。

<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開(kāi)發(fā)常用的指令實(shí)例介紹”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)Vue開(kāi)發(fā)常用的指令實(shí)例介紹這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！