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

下面我将详细介绍“这15个Vue指令，让你的项目开发爽到爆”的完整攻略。

一、官方指令

1. v-if、v-else、v-else-if

• v-if：如果条件为true，则渲染元素。
• v-else：如果在同一父元素中的 v-if 或 v-else-if 的条件不成立，则渲染元素。
• v-else-if：在同一元素上添加一个条件，如果前面所有的 v-if 和 v-else-if 的条件都不成立，则渲染元素。

示例：

<div v-if="isShow">欢迎来到我的网站！</div>
<div v-else>即将跳转到另一个网站...</div>

2. v-for

v-for可以循环渲染元素，可以使用 of 或 in 来分隔数组或对象。

示例：

<ul>
  <li v-for="item in items">{{ item }}</li>
</ul>

<ul>
  <li v-for="(value, key) in object">{{ key }}: {{ value }}</li>
</ul>

3. v-bind

v-bind可以动态绑定HTML属性。

示例：

<img v-bind:src="imageUrl">

或简写：

<img :src="imageUrl">

4. v-on

v-on可以绑定事件。

示例：

<button v-on:click="doSomething">点击我</button>

或简写：

<button @click="doSomething">点击我</button>

5. v-model

v-model可以双向绑定数据，使输入的值自动更新到数据上，数据更新也自动显示在输入框上。

示例：

<input v-model="message" placeholder="请输入...">
<p>{{ message }}</p>

二、自定义指令

6. v-focus

当渲染后，该元素自动获得焦点。

<input v-focus>

Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
})

7. v-enter

在元素插入后，执行enter动画。

<div v-enter><p>动画效果</p></div>

.v-enter {
  opacity: 0;
  transform: scale(0.5);
  transition: all .5s;
}
.v-enter-active {
  opacity: 1;
  transform: scale(1);
}

8. v-move

当自定义元素改变位置时，执行move动画。

<div v-move></div>

.v-move {
  transition: transform .5s;
}
.v-move-enter,
.v-move-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}
.v-move-enter-active,
.v-move-leave-active {
  transform: translateX(0);
  opacity: 1;
}

9. v-color

给元素加上随机的颜色。

<p v-color>我是一个随机的颜色！</p>

Vue.directive('color', {
  bind: function (el) {
    var r = Math.floor(Math.random() * 256)
    var g = Math.floor(Math.random() * 256)
    var b = Math.floor(Math.random() * 256)
    el.style.color = 'rgb(' + r + ',' + g + ',' + b + ')'
  }
})

10. v-ellipsis

当文本过长时，自动省略号。

<p v-ellipsis>这是一段很长很长的文本，要被省略号省略掉部分</p>

.v-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

三、插件指令

11. v-scroll

在滚动条滚动时，执行指定的方法。

<div v-scroll="onScroll">我是滚动条</div>

Vue.directive('scroll', {
  inserted: function (el, binding) {
    el.addEventListener('scroll', binding.value)
  },
  unbind: function (el, binding) {
    el.removeEventListener('scroll', binding.value)
  }
})

12. v-copy

点击元素时，复制内容到粘贴板。

<button v-copy="content">复制文本</button>

Vue.directive('copy', {
  bind: function (el, binding, vnode) {
    el.addEventListener('click', function () {
      var textarea = document.createElement('textarea')
      textarea.setAttribute('readonly', 'readonly')
      textarea.value = vnode.context[binding.expression]
      el.appendChild(textarea)
      textarea.select()
      document.execCommand('Copy')
      el.removeChild(textarea)
    })
  }
})

13. v-repeat

循环渲染指令。

<div v-repeat="item of items">{{ item }}</div>

Vue.directive('repeat', {
  bind: function (el, binding, vnode) {
    var repeatIndex = binding.expression.split(' ')[2]
    vnode.context.$watch('items', function (newValue, oldValue) {
      var elements = []
      newValue.forEach(function (item, index) {
        var clonedEl = el.cloneNode(true)
        clonedEl.removeAttribute('v-repeat')
        clonedEl.innerHTML = clonedEl.innerHTML
          .replace(new RegExp(repeatIndex, 'g'), index)
        elements.push(clonedEl)
      })
      el.parentNode.replaceChild(createFragment(elements), el)
    })
  },
})

function createFragment (elements) {
  var fragment = document.createDocumentFragment()
  elements.forEach(function (el) {
    fragment.appendChild(el)
  })
  return fragment
}

14. v-confirm

在点击元素时，询问是否确定操作。

<button v-confirm="deleteConfirm">删除</button>

Vue.directive('confirm', {
  bind: function (el, binding, vnode) {
    el.addEventListener('click', function () {
      var message = typeof binding.value === 'string' ? binding.value : '确定操作吗？'
      if (confirm(message)) {
        vnode.context[binding.expression]()
      }
    })
  }
})

15. v-copyCode

复制元素内的代码。

<pre v-copyCode>这是一段需要复制的代码</pre>

Vue.directive('copyCode', {
  bind: function (el) {
    el.addEventListener('click', function () {
      var range = document.createRange()
      range.selectNode(el)
      var selection = window.getSelection()
      selection.removeAllRanges()
      selection.addRange(range)
      document.execCommand('Copy')
      alert('已复制到剪贴板')
      selection.removeAllRanges()
    })
  }
})

以上就是15个Vue指令的介绍和示例，希望能对你有所帮助。