https://github.com/aidenybai/dababy

:trollface: Data binding so simple even DaBaby could do it!
https://github.com/aidenybai/dababy

alpine dababy dom javascript lucia ui vue

Last synced: about 1 month ago
JSON representation

:trollface: Data binding so simple even DaBaby could do it!

• Host: GitHub
• URL: https://github.com/aidenybai/dababy
• Owner: aidenybai
• License: mit
• Created: 2021-03-29T17:53:19.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-05-29T04:12:35.000Z (over 3 years ago)
• Last Synced: 2024-10-06T11:14:48.785Z (about 1 month ago)
• Topics: alpine, dababy, dom, javascript, lucia, ui, vue
• Language: TypeScript
• Homepage:
• Size: 171 KB
• Stars: 29
• Watchers: 6
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        


# Dababy

Data binding so simple even DaBaby could do it!

> Note: This name was just made off of a whim, not aimed at offending anyone. If you're looking for something a bit more comprehensive, but not to the level of Vue or Angular, check out [Lucia](https://github.com/aidenybai/lucia)

## Installation

Put this script tag between the `` tags of your webpage.

```html

```

## Dababy Quote Generator Example

```html



  



```


## Features

### Data

Add the `data` attribute to an element to get started. The value of the attribute should be an object literal. Anything under that element will be able to access the data as global variables when binding.

**Example:**

```html



  



```


### Bind

Add the `bind` attribute to an element to bind properties, basically anything you can access in JavaScript like `innerHTML`, `onclick`, `style`, `id`, etc. This will attach it to the element

**Example:**

```html



  




```


### Refs

Add the `ref` attribute to create markers that act like shorthands for `document.querySelector`. Attach it to an element and name it in the attribute value, then access it later by doing `refs.`

**Example:**

```html



  
: turned into a convertable

  




```


---

© 2021 Aiden Bai