### Initialize and Mount Petite-Vue Application

Source: https://github.com/vuejs/petite-vue/blob/main/tests/once.html

This JavaScript snippet shows the minimal setup to start a Petite-Vue application. It imports the 'createApp' function and immediately calls 'mount()' to attach the application to the DOM.

```JavaScript
import { createApp } from '../src'
createApp().mount()
```

--------------------------------

### Initialize and Mount Petite-Vue Application

Source: https://github.com/vuejs/petite-vue/blob/main/tests/pre.html

This JavaScript snippet demonstrates the essential steps to get a Petite-Vue application running. It imports the 'createApp' function and immediately calls it to create an application instance, then mounts it to the DOM, typically to an element with 'v-scope'.

```JavaScript
import { createApp } from '../src'
createApp().mount()
```

--------------------------------

### Initialize and Mount Petite-Vue Application

Source: https://github.com/vuejs/petite-vue/blob/main/tests/show.html

This snippet demonstrates how to import the `createApp` function from Petite-Vue and mount a new application instance to an HTML element with the ID 'app'. This is the basic setup required to start a Petite-Vue application.

```JavaScript
import { createApp } from '../src'
createApp().mount('#app')
```

--------------------------------

### Initialize Petite-Vue Application

Source: https://github.com/vuejs/petite-vue/blob/main/tests/cloak.html

This snippet demonstrates how to import the `createApp` function and initialize a Petite-Vue application. It sets up initial reactive data (`msg` and `hide`) and mounts the application to the DOM.

```JavaScript
import { createApp } from '../src'
createApp({ msg: 'content', hide: false }).mount()
```

--------------------------------

### Petite Vue Reactive Store Setup

Source: https://github.com/vuejs/petite-vue/blob/main/tests/reactive.html

Initializes a reactive store using Petite Vue's `reactive` function. The store's `count` property and `inc` method are defined. The store is then made available to the application scope via `createApp` and mounted.

```javascript
import { createApp, reactive } from '../src'
const store = reactive({
  count: 0,
  inc() {
    this.count++
  }
})
// manipulate it here
store.inc()
createApp({
  // share it with app scopes
  store
}).mount()
```

--------------------------------

### Initialize Petite-Vue Application

Source: https://github.com/vuejs/petite-vue/blob/main/tests/scope.html

This JavaScript snippet demonstrates the basic setup for a Petite-Vue application. It imports the `createApp` function and immediately mounts an instance, making the application reactive.

```javascript
import { createApp } from '../src'
createApp().mount()
```

--------------------------------

### Petite Vue App Initialization

Source: https://github.com/vuejs/petite-vue/blob/main/tests/model.html

Initializes a Petite Vue application and mounts it to an HTML element with the ID 'app'. This is the entry point for a Petite Vue application.

```JavaScript
import { createApp } from '../src'
createApp().mount('#app')
```

--------------------------------

### Initialize and Mount Petite-Vue Application

Source: https://github.com/vuejs/petite-vue/blob/main/tests/text.html

This JavaScript snippet illustrates the basic setup for a Petite-Vue application. It imports the `createApp` function and immediately calls `mount()` on the created app instance, attaching it to the DOM.

```JavaScript
import { createApp } from '../src'
createApp().mount()
```

--------------------------------

### Petite-Vue Template Data Binding

Source: https://github.com/vuejs/petite-vue/blob/main/tests/cloak.html

This shows a simple data binding example within a Petite-Vue template. The `{{ msg }}` syntax is used to display the value of the `msg` property from the application's data.

```Vue.js
{{ msg }}
```

--------------------------------

### Manually initialize petite-vue with global build

Source: https://github.com/vuejs/petite-vue/blob/main/README.md

This example shows how to manually initialize petite-vue when the `init` attribute is not used. The script is placed at the end of the body, and `PetiteVue.createApp().mount()` is called to activate reactivity.

```html
<script src="https://unpkg.com/petite-vue"></script>
<script>
  PetiteVue.createApp().mount()
</script>
```

--------------------------------

### Petite-Vue Basic App Initialization

Source: https://github.com/vuejs/petite-vue/blob/main/tests/html.html

This snippet demonstrates the fundamental steps to initialize and mount a Petite-Vue application. It imports the `createApp` function from the local source and immediately calls `mount()` on the created app instance, making it active on the page.

```JavaScript
import { createApp } from '../src'
createApp().mount()
```

--------------------------------

### Petite-Vue: Shared Reactive Store and Multiple App Instances

Source: https://github.com/vuejs/petite-vue/blob/main/tests/multi-mount.html

This JavaScript snippet shows how to define a global reactive store using Petite-Vue's `reactive` function. It then demonstrates mounting two separate Petite-Vue applications (`#app1` and `#app2`) that both have access to this shared `store` object, alongside their own local `count` properties. This setup allows for centralized state management across multiple UI components.

```javascript
import { createApp, reactive } from '../src'
const store = reactive({ count: 0, inc() { this.count++ } })
createApp({ store, count: 1 }).mount('#app1')
createApp({ store, count: 2 }).mount('#app2')
```

--------------------------------

### Initialize and Mount a Petite-Vue Application

Source: https://github.com/vuejs/petite-vue/blob/main/tests/effect.html

This snippet demonstrates the fundamental steps to get a Petite-Vue application running. It imports the `createApp` function from the library's source and immediately calls it, followed by `.mount()` to attach the application to the DOM. This is the entry point for most Petite-Vue projects.

```JavaScript
import { createApp } from '../src'
createApp().mount()
```

--------------------------------

### CSS Styles for Petite-Vue Data Bindings

Source: https://github.com/vuejs/petite-vue/blob/main/tests/bind.html

Defines essential CSS rules for elements used in Petite-Vue data binding examples. This includes styles for specific IDs (e.g., 'green'), classes (e.g., 'red', 'orange', 'static'), and a `v-cloak` attribute to prevent unstyled content flashes during initial page load.

```CSS
#green { color: green; } .red { color: red; } .orange { color: orange; } .static { font-weight: bold; } [v-cloak] { opacity: 0; }
```

--------------------------------

### Petite-Vue Template Interpolation Examples

Source: https://github.com/vuejs/petite-vue/blob/main/tests/custom-delimiters.html

These HTML snippets illustrate various ways data can be interpolated within Petite-Vue templates using the configured custom delimiters (`${` and `}`). They show basic variable display, a text label that might be part of an interactive element, and direct variable output.

```HTML
count is ${ count }!
```

```HTML
increase
```

```HTML
${ i }
```

```HTML
${ count }
```

--------------------------------

### Petite Vue General Data Display

Source: https://github.com/vuejs/petite-vue/blob/main/tests/model.html

Demonstrates basic data display in Petite Vue using the mustache syntax {{ }} to render the value of a data property directly into the HTML.

```HTML
{{ $data }}
```

--------------------------------

### Apply conditional focus with v-effect

Source: https://github.com/vuejs/petite-vue/blob/main/README.md

This example shows a practical application of `v-effect` for conditional logic, specifically focusing an input element. The effect runs when `todo` matches `editedTodo`, mimicking a common pattern from Vue's TodoMVC example.

```html
<input v-effect="if (todo === editedTodo) $el.focus()" />
```

--------------------------------

### Initialize and Mount Petite-Vue Application

Source: https://github.com/vuejs/petite-vue/blob/main/tests/if.html

This snippet demonstrates how to import the `createApp` function from the Petite-Vue library and mount a new application instance to an HTML element with the ID 'app'. This is the essential starting point for any Petite-Vue application, connecting the JavaScript logic to the DOM.

```JavaScript
import { createApp } from '../src'
createApp().mount('#app')
```

--------------------------------

### Define root scope with createApp for global data

Source: https://github.com/vuejs/petite-vue/blob/main/README.md

This example demonstrates how to pass a data object to `createApp` to define a root scope accessible to all expressions. It includes reactive data properties, getters, and methods, allowing for more complex application logic.

```html
<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'

  createApp({
    // exposed to all expressions
    count: 0,
    // getters
    get plusOne() {
      return this.count + 1
    },
    // methods
    increment() {
      this.count++
    }
  }).mount()
</script>

<!-- v-scope value can be omitted -->
<div v-scope>
  <p>{{ count }}</p>
  <p>{{ plusOne }}</p>
  <button @click="increment">increment</button>
</div>
```

--------------------------------

### Handle petite-vue lifecycle events

Source: https://github.com/vuejs/petite-vue/blob/main/README.md

This example demonstrates how to listen for `vue:mounted` and `vue:unmounted` lifecycle events on elements. These events provide hooks to execute code when an element is added to or removed from the DOM by petite-vue.

```html
<div
  v-if="show"
  @vue:mounted="console.log('mounted on: ', $el)"
  @vue:unmounted="console.log('unmounted: ', $el)"
></div>
```

--------------------------------

### Initialize Petite-Vue App with Custom Delimiters

Source: https://github.com/vuejs/petite-vue/blob/main/tests/custom-delimiters.html

This JavaScript snippet demonstrates how to initialize a Petite-Vue application by importing `createApp` and mounting it. It specifically configures custom delimiters from the default `{{` and `}}` to `${` and `}` for template interpolation, which is useful for avoiding conflicts with other templating engines or for personal preference.

```JavaScript
import { createApp } from '../src'
createApp({ $delimiters: ['${', '}'] }).mount()
```

--------------------------------

### Petite-Vue TodoMVC Application Instance Configuration

Source: https://github.com/vuejs/petite-vue/blob/main/examples/todomvc.html

This is the main Petite-Vue application instance, initialized with `createApp`. It encapsulates the application's state (todos, newTodo, editedTodo, visibility), computed properties for derived state (filteredTodos, remaining, allDone), and methods for all core functionalities including routing, adding, removing, editing, and managing todo completion.

```javascript
import { createApp } from '../src'

createApp({
  todos: todoStorage.fetch(),
  newTodo: '',
  editedTodo: null,
  visibility: 'all',

  get filteredTodos() {
    return filters[this.visibility](this.todos)
  },
  get remaining() {
    return filters.active(this.todos).length
  },
  get allDone() {
    return this.remaining === 0
  },
  set allDone(value) {
    this.todos.forEach(function (todo) {
      todo.completed = value
    })
  },

  save() {
    todoStorage.save(this.todos)
  },

  setupRouting() {
    const onHashChange = () => {
      var visibility = window.location.hash.replace(/#\/?/, '')
      if (filters[visibility]) {
        this.visibility = visibility
      } else {
        window.location.hash = ''
        this.visibility = 'all'
      }
    }
    window.addEventListener('hashchange', onHashChange)
    onHashChange()
  },

  addTodo() {
    var value = this.newTodo && this.newTodo.trim()
    if (!value) {
      return
    }
    this.todos.push({
      id: todoStorage.uid++,
      title: value,
      completed: false
    })
    this.newTodo = ''
  },

  removeTodo(todo) {
    this.todos.splice(this.todos.indexOf(todo), 1)
  },

  editTodo(todo) {
    this.beforeEditCache = todo.title
    this.editedTodo = todo
  },

  doneEdit(todo) {
    if (!this.editedTodo) {
      return
    }
    this.editedTodo = null
    todo.title = todo.title.trim()
    if (!todo.title) {
      this.removeTodo(todo)
    }
  },

  cancelEdit(todo) {
    this.editedTodo = null
    todo.title = this.beforeEditCache
  },

  removeCompleted() {
    this.todos = filters.active(this.todos)
  },

  pluralize(n) {
    return n === 1 ? 'item' : 'items'
  }
}).mount('#app')
```

--------------------------------

### Basic CSS Styling for Anchor Tags

Source: https://github.com/vuejs/petite-vue/blob/main/index.html

A simple CSS rule demonstrating basic styling for anchor tags. This snippet sets the font size for all 'a' elements to 18 pixels, providing a foundational style for links.

```CSS
a { font-size: 18px; }
```

--------------------------------

### Initialize Petite-Vue Markdown Editor Application

Source: https://github.com/vuejs/petite-vue/blob/main/examples/markdown.html

This JavaScript snippet initializes a Petite-Vue application. It sets up a reactive 'input' property, a computed 'compiledMarkdown' property that uses 'marked' to convert the input, and a debounced 'update' method to handle input changes. The application is mounted to the '#editor' DOM element.

```JavaScript
import { createApp } from '../src'
createApp({
  input: '# hello',
  get compiledMarkdown() {
    return marked(this.input)
  },
  update: _.debounce(function (e) {
    this.input = e.target.value
  }, 100)
}).mount('#editor')
```

--------------------------------

### Petite-Vue TodoMVC User Interface HTML Structure

Source: https://github.com/vuejs/petite-vue/blob/main/examples/todomvc.html

This HTML snippet outlines the basic user interface for the TodoMVC application. It includes placeholders for displaying individual todo items, a mechanism to mark all items as complete, a counter for remaining items, and navigation links for filtering todos by status.

```html
todos
=====

 Mark all as complete

*    {{ todo.title }}
    

**{{ remaining }}** {{ pluralize(remaining) }} left

*   [All](#/all)
*   [Active](#/active)
*   [Completed](#/completed)

Clear completed
```

--------------------------------

### Petite Vue Select Dropdown Data Binding

Source: https://github.com/vuejs/petite-vue/blob/main/tests/model.html

Illustrates binding a <select> dropdown element to a data property. The {{ selected }} property will hold the value of the chosen option.

```HTML
{{ selected }}
```

--------------------------------

### Petite-Vue Data Table HTML Template Snippets

Source: https://github.com/vuejs/petite-vue/blob/main/examples/grid.html

HTML template snippets illustrating how to integrate search functionality, display capitalized column headers, render data entries, and show a 'no matches' message using Petite-Vue's declarative syntax.

```html
Search 

{{ capitalize(key) }}

{{entry[key]}}

No matches found.
```

--------------------------------

### Petite-Vue Reactive Data Initialization and App Mounting

Source: https://github.com/vuejs/petite-vue/blob/main/tests/bind.html

Initializes a reactive data object in Petite-Vue, showcasing different property types for various binding scenarios, such as ID, array-based classes, object-based classes, and inline styles. The snippet then mounts the Petite-Vue application using this prepared data, enabling dynamic updates based on the defined bindings.

```JavaScript
import { createApp, reactive } from '../src' // for testing
const data = (window.data = reactive({ id: 'green', classes: ['foo', { red: true }], style: { color: 'blue' }, obj: { class: 'orange' } }))
createApp(data).mount()
```

--------------------------------

### Petite-Vue TodoMVC Local Storage Utility

Source: https://github.com/vuejs/petite-vue/blob/main/examples/todomvc.html

This JavaScript object provides utility methods for interacting with the browser's local storage. It handles fetching existing todo items from storage and saving the current state of the todo list back to storage, ensuring data persistence across sessions.

```javascript
const STORAGE_KEY = 'todos-petite-vue'
const todoStorage = {
  fetch() {
    const todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
    todos.forEach((todo, index) => {
      todo.id = index
    })
    todoStorage.uid = todos.length
    return todos
  },
  save(todos) {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
  }
}
```

--------------------------------

### Petite-Vue Template Bindings for Data Display

Source: https://github.com/vuejs/petite-vue/blob/main/examples/svg.html

These snippets showcase the template syntax used in Petite-Vue to bind data from the application's state to the HTML. They demonstrate how to display individual labels, iterate over a list of statistics, and include input fields for adding new data.

```html
{{ label }}\n\n{{stat.label}}  {{stat.value}} X\n\n Add a Stat\n\n{{ stats }}
```

--------------------------------

### Create and Manage Petite-Vue Application State

Source: https://github.com/vuejs/petite-vue/blob/main/examples/svg.html

This JavaScript code initializes a Petite-Vue application. It defines the application's data model, including a list of 'stats', and provides methods for calculating points for a visual representation (e.g., a radar chart), adding new stats, and removing existing ones. It also includes a utility function `valueToPoint` for coordinate transformation.

```javascript
import { createApp } from '../src'\nfunction valueToPoint(value, index, total) {\n  var x = 0\n  var y = -value * 0.8\n  var angle = ((Math.PI * 2) / total) * index\n  var cos = Math.cos(angle)\n  var sin = Math.sin(angle)\n  var tx = x * cos - y * sin + 100\n  var ty = x * sin + y * cos + 100\n  if (ty < 0) debugger\n  return { x: tx, y: ty }\n}\ncreateApp({\n  newLabel: '',\n  stats: [\n    { label: 'A', value: 100 },\n    { label: 'B', value: 100 },\n    { label: 'C', value: 100 },\n    { label: 'D', value: 100 },\n    { label: 'E', value: 100 },\n    { label: 'F', value: 100 }\n  ],\n  get pointsString() {\n    return this.getPoints()\n      .map(({ x, y }) => `${x},${y}`)\n      .join(' ')\n  },\n  getPoints(offset = 0) {\n    const total = this.stats.length\n    return this.stats.map((stat, i) => ({\n      ...valueToPoint(+stat.value + offset, i, total),\n      label: stat.label\n    }))\n  },\n  add(e) {\n    e.preventDefault()\n    if (!this.newLabel) return\n    this.stats.push({ label: this.newLabel, value: 100 })\n    this.newLabel = ''\n  },\n  remove(stat) {\n    if (this.stats.length > 3) {\n      this.stats.splice(this.stats.indexOf(stat), 1)\n    } else {\n      alert("Can't delete more!")\n    }\n  }\n}).mount()
```

--------------------------------

### Petite Vue TextArea Data Binding

Source: https://github.com/vuejs/petite-vue/blob/main/tests/model.html

Shows two-way data binding for textarea elements in Petite Vue. The {{ text }} binding ensures the textarea's content is synchronized with the data property.

```HTML
{{ text }}
```

--------------------------------

### Hide Uninitialized Petite-Vue Content with v-cloak CSS

Source: https://github.com/vuejs/petite-vue/blob/main/examples/todomvc.html

This CSS rule is a common pattern used to prevent the 'flash of unstyled content' (FOUC) by hiding elements that are part of a Petite-Vue application until the application has been fully mounted and processed the templates.

```css
[v-cloak] { display: none; }
```

--------------------------------

### Create Petite-Vue Data Table Application

Source: https://github.com/vuejs/petite-vue/blob/main/examples/grid.html

Initializes a Petite-Vue application to manage and display a sortable and filterable data table. It defines initial data, columns, reactive properties for query and sorting, computed property for filtered data, and methods for sorting and capitalization.

```javascript
import { createApp } from '../src'
const columns = ['name', 'power']
const data = [
  { name: 'Chuck Norris', power: Infinity },
  { name: 'Bruce Lee', power: 9000 },
  { name: 'Jackie Chan', power: 7000 },
  { name: 'Jet Li', power: 8000 }
]
createApp({
  query: '',
  columns,
  data,
  sortKey: '',
  sortOrders: columns.reduce((o, key) => ((o[key] = 1), o), {}),
  get filteredData() {
    const sortKey = this.sortKey
    const filterKey = this.query && this.query.toLowerCase()
    const order = this.sortOrders[sortKey] || 1
    let data = this.data
    if (filterKey) {
      data = data.filter((row) => {
        return Object.keys(row).some((key) => {
          return String(row[key]).toLowerCase().indexOf(filterKey) > -1
        })
      })
    }
    if (sortKey) {
      data = data.slice().sort((a, b) => {
        a = a[sortKey]
        b = b[sortKey]
        return (a === b ? 0 : a > b ? 1 : -1) * order
      })
    }
    return data
  },
  sortBy(key) {
    this.sortKey = key
    this.sortOrders[key] = this.sortOrders[key] * -1
  },
  capitalize(str) {
    return str.charAt(0).toUpperCase() + str.slice(1)
  }
}).mount()
```

--------------------------------

### Display Single Data Property in Petite-Vue Template

Source: https://github.com/vuejs/petite-vue/blob/main/tests/once.html

This HTML-like template snippet demonstrates how to display the value of a reactive data property, 'count', using Petite-Vue's double curly brace syntax for interpolation.

```HTML
{{ count }}
```

--------------------------------

### Petite Vue Single Checkbox Data Binding

Source: https://github.com/vuejs/petite-vue/blob/main/tests/model.html

Demonstrates binding a single checkbox to a boolean data property in Petite Vue. The {{ checked }} binding reflects the checkbox's checked state.

```HTML
{{ checked }}
```

--------------------------------

### Petite Vue Text Input Data Binding

Source: https://github.com/vuejs/petite-vue/blob/main/tests/model.html

Illustrates two-way data binding for text input fields in Petite Vue. The {{ text }} syntax typically represents the bound data property, which updates as the user types.

```HTML
{{ text }}
```

--------------------------------

### CSS Styling for Data Visualization Components

Source: https://github.com/vuejs/petite-vue/blob/main/examples/svg.html

This CSS code provides styling for the visual elements of the application, likely for a radar chart or similar data visualization. It defines styles for the body, polygons, circles, text, and labels, ensuring a consistent and readable appearance for the displayed data.

```css
body { font-family: Helvetica Neue, Arial, sans-serif; }\npolygon { fill: #42b983; opacity: 0.75; }\ncircle { fill: transparent; stroke: #999; }\ntext { font-family: Helvetica Neue, Arial, sans-serif; font-size: 10px; fill: #666; }\nlabel { display: inline-block; margin-left: 10px; width: 20px; }\n#raw { position: absolute; top: 0; left: 300px; }
```

--------------------------------

### Configure Custom Delimiters in Petite-Vue

Source: https://github.com/vuejs/petite-vue/blob/main/README.md

Explains how to change the default text interpolation delimiters ('{{ }}') in Petite-Vue. It shows how to pass an array of custom start and end delimiters to the 'createApp()' function to avoid conflicts with server-side templating languages.

```js
createApp({
  $delimiters: ['${', '}']
}).mount()
```

--------------------------------

### CSS Styling for Markdown Editor Layout

Source: https://github.com/vuejs/petite-vue/blob/main/examples/markdown.html

This CSS snippet provides basic styling for the Markdown editor's layout. It sets up full height for html, body, and the editor, defines font styles, and uses flexbox for the editor layout. It also styles the input and output panels, and highlights code elements.

```CSS
html, body, #editor {
  margin: 0;
  height: 100%;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #333;
}
#editor {
  display: flex;
}
.input, .output {
  width: 50%;
  box-sizing: border-box;
}
.input {
  border: none;
  border-right: 1px solid #ccc;
  resize: none;
  outline: none;
  background-color: #f6f6f6;
  font-size: 14px;
  font-family: 'Monaco', courier, monospace;
  padding: 20px;
}
.output {
  padding: 0 20px;
}
code {
  color: #f66;
}
```

--------------------------------

### CSS for v-cloak Directive

Source: https://github.com/vuejs/petite-vue/blob/main/tests/cloak.html

This CSS rule is commonly used with Vue.js's `v-cloak` directive. It hides elements that have the `v-cloak` attribute until the Vue instance has finished compiling and mounting, preventing a 'flash of uncompiled content'.

```CSS
[v-cloak] { display: none; }
```

--------------------------------

### Implement Custom Directives in Petite-Vue

Source: https://github.com/vuejs/petite-vue/blob/main/README.md

Details the interface for creating custom directives in Petite-Vue. It explains how to access element context, expression, arguments, and modifiers, and how to use 'ctx.get()' and 'ctx.effect()' for reactive behavior and a return function for cleanup. An example of 'v-html' implementation is also provided.

```js
const myDirective = (ctx) => {
  // the element the directive is on
  ctx.el
  // the raw value expression
  // e.g. v-my-dir="x" then this would be "x"
  ctx.exp
  // v-my-dir:foo -> "foo"
  ctx.arg
  // v-my-dir.mod -> { mod: true }
  ctx.modifiers
  // evaluate the expression and get its value
  ctx.get()
  // evaluate arbitrary expression in current scope
  ctx.get(`${ctx.exp} + 10`)

  // run reactive effect
  ctx.effect(() => {
    // this will re-run every time the get() value changes
    console.log(ctx.get())
  })

  return () => {
    // cleanup if the element is unmounted
  }
}

// register the directive
createApp().directive('my-dir', myDirective).mount()
```

```js
const html = ({ el, get, effect }) => {
  effect(() => {
    el.innerHTML = get()
  })
}
```

--------------------------------

### Petite Vue Radio Button Data Binding

Source: https://github.com/vuejs/petite-vue/blob/main/tests/model.html

Demonstrates binding a group of radio buttons to a single data property. The {{ radioSelected }} property will store the value of the currently selected radio button.

```HTML
{{ radioSelected }}
```

--------------------------------

### Petite Vue Checkbox Array Data Binding

Source: https://github.com/vuejs/petite-vue/blob/main/tests/model.html

Illustrates binding multiple checkboxes to an array data property. When checkboxes are checked, their values are added to the 'arr' array; unchecked values are removed.

```HTML
{{ arr }}
```

--------------------------------

### Petite Vue Template for Global and Local State Interaction

Source: https://github.com/vuejs/petite-vue/blob/main/tests/reactive.html

Demonstrates how to display and interact with global reactive state (`store.count`) and manage local component state (`localCount` using `v-scope`) within a Petite Vue HTML template. Includes button interactions to modify both global and local state.

```html
<div>
  Global {{ store.count }}
  <button @click="store.inc()">increment</button>
</div>

<div v-scope="{ localCount: 0 }">
  Local {{ localCount }}
  <button @click="localCount++">increment</button>
</div>
```

--------------------------------

### Petite Vue Checkbox Custom Value Binding

Source: https://github.com/vuejs/petite-vue/blob/main/tests/model.html

Shows how to bind a checkbox using custom 'true-value' and 'false-value' attributes. The {{ checkToggle }} property will hold one of these custom values based on the checkbox's state.

```HTML
{{ checkToggle }}
```

--------------------------------

### Data Table CSS Styling

Source: https://github.com/vuejs/petite-vue/blob/main/examples/grid.html

CSS rules for styling a data table, including general body font, table borders and background, header styling with hover effects and user-select properties, cell backgrounds, padding, and arrow indicators for sort direction.

```css
body { font-family: Helvetica Neue, Arial, sans-serif; font-size: 14px; color: #444; }
table { border: 2px solid #42b983; border-radius: 3px; background-color: #fff; }
th { background-color: #42b983; color: rgba(255, 255, 255, 0.66); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
td { background-color: #f9f9f9; }
th, td { min-width: 120px; padding: 10px 20px; }
th.active { color: #fff; }
th.active .arrow { opacity: 1; }
.arrow { display: inline-block; vertical-align: middle; width: 0; height: 0; margin-left: 5px; opacity: 0.66; }
.arrow.asc { border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 4px solid #fff; }
.arrow.dsc { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #fff; }
```

--------------------------------

### Invoke Method in Petite-Vue Template

Source: https://github.com/vuejs/petite-vue/blob/main/tests/pre.html

This snippet represents a method call or an action within a Petite-Vue template. It typically corresponds to a function defined in the application's scope, which can be triggered by user interaction (e.g., a button click) to perform an action or update state.

```HTML
increment
```

--------------------------------

### Display Multiple Data Properties in Petite-Vue Template

Source: https://github.com/vuejs/petite-vue/blob/main/tests/once.html

This template snippet illustrates how to display multiple reactive data properties, 'count' and 'i', within a Petite-Vue template using interpolation. This is commonly used when iterating over lists or displaying related data points.

```HTML
{{ count }} {{ i }}
```

--------------------------------

### Petite-Vue TodoMVC Filtering Functions

Source: https://github.com/vuejs/petite-vue/blob/main/examples/todomvc.html

This JavaScript object defines a set of functions used to filter the todo list based on different criteria: 'all' for all todos, 'active' for incomplete todos, and 'completed' for finished todos. These functions are crucial for dynamically updating the displayed list.

```javascript
const filters = {
  all(todos) {
    return todos
  },
  active(todos) {
    return todos.filter((todo) => {
      return !todo.completed
    })
  },
  completed(todos) {
    return todos.filter(function (todo) {
      return todo.completed
    })
  }
}
```

--------------------------------

### Display Reactive Data in Petite-Vue Template

Source: https://github.com/vuejs/petite-vue/blob/main/tests/pre.html

This HTML-like snippet illustrates how to bind and display reactive data within a Petite-Vue template. The double curly braces `{{ }}` are used for text interpolation, automatically updating the displayed value whenever the 'count' variable changes in the application's state.

```HTML
{{ count }}
```

--------------------------------

### Petite-Vue: Displaying Shared and Local State in Templates

Source: https://github.com/vuejs/petite-vue/blob/main/tests/multi-mount.html

This template snippet illustrates how to bind and display both a globally shared reactive property (`store.count`) and a locally scoped component property (`count`) within a Petite-Vue application's HTML. It highlights the ability to access different scopes of data directly in the template using Vue's interpolation syntax.

```vue-template
Global count {{ store.count }} Local count {{ count }}
```

--------------------------------

### Initialize Petite-Vue Application

Source: https://github.com/vuejs/petite-vue/blob/main/tests/ref.html

This JavaScript snippet demonstrates the fundamental steps to set up a Petite-Vue application. It imports `createApp` and `reactive` from the library's source and then immediately mounts the application, making it active on the page.

```JavaScript
import { createApp, reactive } from '../src'
createApp().mount()
```

--------------------------------

### Initialize and Mount Petite Vue Application

Source: https://github.com/vuejs/petite-vue/blob/main/tests/on.html

This snippet demonstrates the fundamental steps to set up a Petite Vue application, including importing the `createApp` function and mounting the application to a specified DOM element.

```JavaScript
import { createApp } from '../src'
createApp().mount('#app')
```

--------------------------------

### Manually initialize petite-vue with ES module build

Source: https://github.com/vuejs/petite-vue/blob/main/README.md

This snippet illustrates manual initialization using the ES module build of petite-vue. It imports `createApp` and then calls `createApp().mount()` within a `script type="module"` tag.

```html
<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'
  createApp().mount()
</script>
```

--------------------------------

### Initialize Petite-Vue Application with Reactive Data and Methods

Source: https://github.com/vuejs/petite-vue/blob/main/tests/for.html

This JavaScript snippet demonstrates how to initialize a Petite-Vue application using `createApp`. It sets up an initial reactive 'list' array and defines 'add' and 'splice' methods to modify this array, then mounts the application to an HTML element with the ID 'app'.

```javascript
import { createApp } from '../src'
let id = 4
createApp({
  list: [
    { id: 1, text: 'bar' },
    { id: 2, text: 'boo' },
    { id: 3, text: 'baz' },
    { id: 4, text: 'bazz' }
  ],
  add() {
    this.list.push({ id: ++id, text: 'new item' })
  },
  splice() {
    this.list.splice(1, 0, { id: ++id, text: 'new item' })
  }
}).mount('#app')
```

--------------------------------

### Load petite-vue with CDN and auto-initialize

Source: https://github.com/vuejs/petite-vue/blob/main/README.md

This snippet demonstrates how to include petite-vue from a CDN using the `defer` and `init` attributes. It automatically initializes `v-scope` marked regions for reactivity, allowing simple data binding and event handling.

```html
<script src="https://unpkg.com/petite-vue" defer init></script>

<!-- anywhere on the page -->
<div v-scope="{ count: 0 }">
  {{ count }}
  <button @click="count++">inc</button>
</div>
```

--------------------------------

### Petite-Vue Feature Overview and Compatibility

Source: https://github.com/vuejs/petite-vue/blob/main/README.md

Provides a comprehensive overview of Petite-Vue's unique features, behaviors that differ from standard Vue, and a list of compatible Vue features. It also enumerates features that are explicitly not supported due to their utility/size ratio in the context of progressive enhancement.

```APIDOC
petite-vue only:
- v-scope
- v-effect
- @vue:mounted & @vue:unmounted events

Has Different Behavior:
- In expressions, $el points to the current element the directive is bound to (instead of component root element)
- createApp() accepts global state instead of a component
- Components are simplified into object-returning functions
- Custom directives have a different interface

Vue Compatible:
- {{ }} text bindings (configurable with custom delimiters)
- v-bind (including : shorthand and class/style special handling)
- v-on (including @ shorthand and all modifiers)
- v-model (all input types + non-string :value bindings)
- v-if / v-else / v-else-if
- v-for
- v-show
- v-html
- v-text
- v-pre
- v-once
- v-cloak
- reactive()
- nextTick()
- Template refs

Not Supported:
- ref(), computed() etc.
- Render functions (petite-vue has no virtual DOM)
- Reactivity for Collection Types (Map, Set, etc., removed for smaller size)
- Transition, KeepAlive, Teleport, Suspense
- v-for deep destructure
- v-on="object"
- v-is & <component :is="xxx">
- v-bind:style auto-prefixing
```

--------------------------------

### Create Petite-Vue Components with Reusable Logic

Source: https://github.com/vuejs/petite-vue/blob/main/README.md

Demonstrates how to define reusable component logic using functions in Petite-Vue. It shows how to pass props, define methods, and handle lifecycle events like 'mounted' within a component scope, then apply it to multiple HTML elements using 'v-scope'.

```html
<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'

  function Counter(props) {
    return {
      count: props.initialCount,
      inc() {
        this.count++
      },
      mounted() {
        console.log(`I'm mounted!`)
      }
    }
  }

  createApp({
    Counter
  }).mount()
</script>

<div v-scope="Counter({ initialCount: 1 })" @vue:mounted="mounted">
  <p>{{ count }}</p>
  <button @click="inc">increment</button>
</div>

<div v-scope="Counter({ initialCount: 2 })">
  <p>{{ count }}</p>
  <button @click="inc">increment</button>
</div>
```

--------------------------------

### Petite-Vue List Item Template Syntax

Source: https://github.com/vuejs/petite-vue/blob/main/tests/for.html

This snippet shows a common Petite-Vue template syntax for iterating over a list. It demonstrates how to access the 'index' of an item and how to destructure an object '{ id, text }' directly within the template to display its properties.

```vue-template
{{ index }} {{ { id, text } }}
```

--------------------------------

### Define and Mount a Petite-Vue Component

Source: https://github.com/vuejs/petite-vue/blob/main/tests/component.html

This snippet illustrates how to define a simple component (`MyComp`) using Petite-Vue's `createApp` and `mount` functions. It showcases a reactive property (`count`) and a computed property (`plusOne`) within the component's data. The component uses a template identified by `#comp`.

```JavaScript
import { createApp, reactive } from '../src' function MyComp() { return { $template: '#comp', count: 0, get plusOne() { return this.count + 1 } } } createApp({ MyComp }).mount()
```

--------------------------------

### Manage Global State with Petite-Vue Reactive API

Source: https://github.com/vuejs/petite-vue/blob/main/README.md

Shows how to create and manage global reactive state using Petite-Vue's 'reactive' method, re-exported from '@vue/reactivity'. It demonstrates sharing a global store across different 'v-scope' instances and manipulating its properties, alongside local component state.

```html
<script type="module">
  import { createApp, reactive } from 'https://unpkg.com/petite-vue?module'

  const store = reactive({
    count: 0,
    inc() {
      this.count++
    }
  })

  // manipulate it here
  store.inc()

  createApp({
    // share it with app scopes
    store
  }).mount()
</script>

<div v-scope="{ localCount: 0 }">
  <p>Global {{ store.count }}</p>
  <button @click="store.inc">increment</button>

  <p>Local {{ localCount }}</p>
  <button @click="localCount++">increment</button>
</div>
```

--------------------------------

### Basic Styling for petite-vue Tree Component

Source: https://github.com/vuejs/petite-vue/blob/main/examples/tree.html

This CSS snippet provides basic styling for the tree component, setting font properties for the body and defining cursor behavior for tree items. It also includes a class for bold text.

```CSS
body { font-family: Menlo, Consolas, monospace; color: #444; } .item { cursor: pointer; } .bold { font-weight: bold; }
```

--------------------------------

### Petite-Vue Application for Fetching GitHub Commits

Source: https://github.com/vuejs/petite-vue/blob/main/examples/commits.html

This JavaScript snippet demonstrates a Petite-Vue application that fetches the latest commits from a specified GitHub repository branch. It uses `createApp` to define reactive data, methods for data fetching, formatting, and truncation, and then mounts the application.

```javascript
import { createApp, reactive } from '../src'
const API_URL = `https://api.github.com/repos/vuejs/vue-next/commits?per_page=3&sha=`
createApp({
  branches: ['master', 'v2-compat'],
  currentBranch: 'master',
  commits: null,
  truncate(v) {
    const newline = v.indexOf('\n')
    return newline > 0 ? v.slice(0, newline) : v
  },
  formatDate(v) {
    return v.replace(/T|Z/g, ' ')
  },
  fetchData() {
    fetch(`${API_URL}${this.currentBranch}`)
      .then((res) => res.json())
      .then((data) => {
        this.commits = data
      })
  }
}).mount()
```

--------------------------------

### Mount petite-vue to specific DOM targets

Source: https://github.com/vuejs/petite-vue/blob/main/README.md

This snippet shows how to limit petite-vue's scope by specifying a mount target using a selector or element. It also illustrates how to run multiple independent petite-vue applications on different regions of the same page.

```javascript
createApp().mount('#only-this-div')
```

```javascript
createApp({
  // root scope for app one
}).mount('#app1')

createApp({
  // root scope for app two
}).mount('#app2')
```

--------------------------------

### HTML Template for Displaying Vue.js Commits

Source: https://github.com/vuejs/petite-vue/blob/main/examples/commits.html

This HTML snippet provides a template structure for displaying a list of commits fetched from GitHub. It uses Petite-Vue's templating syntax to show the current branch, iterate over commits, and display commit SHA, message, author, and date.

```html
vuejs/vue@{{ currentBranch }}

*   {{ sha.slice(0, 7) }} - {{ truncate(commit.message) }}  
    by {{ commit.author.name }} at {{ formatDate(commit.author.date) }}
```

--------------------------------

### CSS Styling for Commit List

Source: https://github.com/vuejs/petite-vue/blob/main/examples/commits.html

This CSS snippet provides basic styling for the commit list, including font family, link decoration, line height for list items, and bolding for author and date elements.

```css
body { font-family: 'Helvetica', Arial, sans-serif; } a { text-decoration: none; color: #f66; } li { line-height: 1.5em; margin-bottom: 20px; } .author, .date { font-weight: bold; }
```

--------------------------------

### Implement Recursive Tree Component with petite-vue

Source: https://github.com/vuejs/petite-vue/blob/main/examples/tree.html

This snippet demonstrates how to create a recursive tree component using petite-vue. It defines a hierarchical data structure for the tree and a TreeItem component with methods for toggling folder visibility and adding new children. The component uses a template (assumed to be #item-template) for rendering.

```JavaScript
import { createApp } from '../src' const treeData = { name: 'My Tree', children: [ { name: 'hello' }, { name: 'wat' }, { name: 'child folder', children: [ { name: 'child folder', children: [{ name: 'hello' }, { name: 'wat' }] }, { name: 'hello' }, { name: 'wat' }, { name: 'child folder', children: [{ name: 'hello' }, { name: 'wat' }] } ] } ] } function TreeItem(model) { return { $template: '#item-template', model, open: false, get isFolder() { return model.children && model.children.length }, toggle() { if (this.isFolder) { this.open = !this.open } }, changeType() { if (!this.isFolder) { model.children = [] this.addChild() this.open = true } }, addChild() { model.children.push({ name: 'new stuff' }) } } } createApp({ TreeItem, treeData }).mount()
```

--------------------------------

### Use v-effect for reactive inline statements

Source: https://github.com/vuejs/petite-vue/blob/main/README.md

This snippet illustrates the use of `v-effect` to execute reactive inline statements. The effect automatically re-runs whenever its reactive dependencies, such as `count`, change, updating the element's text content.

```html
<div v-scope="{ count: 0 }">
  <div v-effect="$el.textContent = count"></div>
  <button @click="count++">++</button>
</div>
```

--------------------------------

### Define Petite-Vue Components with Reusable Templates

Source: https://github.com/vuejs/petite-vue/blob/main/README.md

Explains how to associate a reusable HTML template with a Petite-Vue component using the special '$template' key. It illustrates linking a component function to a '<template>' element via its ID for efficient template reuse, recommending this approach over inline strings.

```html
<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'

  function Counter(props) {
    return {
      $template: '#counter-template',
      count: props.initialCount,
      inc() {
        this.count++
      }
    }
  }

  createApp({
    Counter
  }).mount()
</script>

<template id="counter-template">
  My count is {{ count }}
  <button @click="inc">++</button>
</template>

<!-- reuse it -->
<div v-scope="Counter({ initialCount: 1 })"></div>
<div v-scope="Counter({ initialCount: 2 })"></div>
```

--------------------------------

### Display Multiple Data Variables

Source: https://github.com/vuejs/petite-vue/blob/main/tests/scope.html

This template snippet demonstrates displaying multiple data variables, `msg` and `outer`, side-by-side using interpolation. This is common for presenting related pieces of information.

```vue-template
{{ msg }} {{ outer }}
```