offline docs

offline-docs/alpinejs/directives/ref.md

@@ -0,0 +1,23 @@
+# Alpine.js Documentation - Directives
+
+Alpine directives are attributes that you can add to HTML elements to give them special behavior.
+
+## [x-ref](/directives/ref)
+
+`x-ref` in combination with `$refs` is a useful utility for easily accessing DOM elements directly. It's most useful as a replacement for APIs like `getElementById` and `querySelector`.
+
+```
+<button @click="$refs.text.remove()">Remove Text</button>
+
+<span x-ref="text">Hello 👋</span>
+```
+
+Hello 👋
+
+> Despite not being included in the above snippet, `x-ref` cannot be used if no parent element has `x-data` defined. [→ Read more about `x-data`](/directives/data)
+
+[← x-ignore](/directives/ignore)
+
+[x-cloak →](/directives/cloak)
+
+Code highlighting provided by [Torchlight](https://torchlight.dev/)