Vue Directives

Vue provides a number of built-in directives. The exact number might depend on the version you’re using, but here’s a general list of some commonly used directives in Vue 2.x and Vue 3.x:

  1. v-bind: Binds an attribute to an expression.
  2. v-model: Creates a two-way binding on an input, textarea, or select.
  3. v-for: Loops through items in an array or object properties.
  4. v-if, v-else-if, v-else: Conditional rendering of elements.
  5. v-show: Toggles visibility via CSS.
  6. v-on: Listens to DOM events and executes code when they’re triggered.
  7. v-pre: Skips this element and all its children during compilation.
  8. v-cloak: Keeps the directive and its element and children from being displayed until Vue’s compilation is done.
  9. v-once: Renders plain HTML elements only once, essentially making it static after the initial render.
  10. v-html: Inserts raw HTML into the DOM.

Plus, you have the v-slot directive for named slots in Vue components, though that’s more specialized for slot content.

So, there are roughly around 10-12 core directives, not including the special ones for transitions and other specific use-cases.

A few in action:

Hover
{{text}} 
<!DOCTYPE html>
<html>
<head>
				<title>Vue App</title>
				<script src="../vue.v2.7.14.min.js"></script>
				<link href="../styles.css" rel="stylesheet">
</head>
<body>
<div id="app">
				<div
												v-bind:title="randNum"
												v-if="shown"
				>
								Hover
				</div>
				{{text}}
</div>
<script>
				let app = new Vue({
								el: '#app',
								data: {
												randNum: Math.floor(Math.random() * 50) + 1,
												shown: false,
												text: 'test the text'
								}
				})
</script>
</body>
</html>

Keep in mind that you can also create custom directives, which can be particularly useful for low-level, DOM-specific operations that aren’t conveniently covered by Vue’s existing directives. So in a way, the number of “Vue directives” you could be working with is potentially unlimited, depending on what you need to do.