<commit_before># Vue

Guides:
https://vuehero.com/


## Install

https://vuejs.org/v2/guide/installation.html

Be sure you have [node installed](node.md) and up-to-date. Verify with:

    node -v
    nvm install node
    node -v

### Browser Dev Tools

https://github.com/vuejs/vue-devtools#vue-devtools

https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/


## New projects / Nuxt

Nuxt simplifies the configuration and structure of a Vue project for a community standard. 

See: [Nuxt](nuxt.md)




## Slots & Props

https://vuejs.org/v2/guide/components-props.html
Props — Vue.js
https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots
Slots — Vue.js
https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot-syntax.md
rfcs/0001-new-slot-syntax.md at master · vuejs/rfcs
https://www.google.com/search?client=ubuntu&channel=fs&q=vue+props+vs+slots&ie=utf-8&oe=utf-8
vue props vs slots - Google Search
https://medium.com/@nicomeyer/vue-js-slots-vs-props-af87078a8bd
Vue.js: slots vs. props - <NAME> - Medium


## Templates

https://vuejs.org/v2/guide/syntax.html

Common patterns:

List rendering
https://vuejs.org/v2/guide/list.html#key

## Components

https://vuejs.org/v2/guide/components.html#Dynamic-Components
Components Basics — Vue.js

## Dynamic Styles

https://stackoverflow.com/questions/47322875/vue-js-dynamic-style-with-variables


### Scripts

The script block is where you put logic related to your component. 

data is made up of properties
computed is made up of getters.<commit_msg>notes about custom events and emits<commit_after># Vue

Guides:
https://vuehero.com/


## Install

https://vuejs.org/v2/guide/installation.html

Be sure you have [node installed](node.md) and up-to-date. Verify with:

    node -v
    nvm install node
    node -v

### Browser Dev Tools

https://github.com/vuejs/vue-devtools#vue-devtools

https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/


## New projects / Nuxt

Nuxt simplifies the configuration and structure of a Vue project for a community standard. 

See: [Nuxt](nuxt.md)


## Slots & Props

Use Props when you want to pass in an object to a child component.

Use Slots when you want to pass in template code to a child component. 

https://vuejs.org/v2/guide/components-props.html
Props — Vue.js
https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots
Slots — Vue.js
https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot-syntax.md
rfcs/0001-new-slot-syntax.md at master · vuejs/rfcs
https://www.google.com/search?client=ubuntu&channel=fs&q=vue+props+vs+slots&ie=utf-8&oe=utf-8
vue props vs slots - Google Search
https://medium.com/@nicomeyer/vue-js-slots-vs-props-af87078a8bd
Vue.js: slots vs. props - <NAME> - Medium


## Forms


## Custom Events

If you need to signal a parent component of something that has happened in a child component, it helps to use $emit. 

Child component triggers clicked event:

```
export default {
  methods: {
    onClickButton (event) {
      this.$emit('clicked', 'someValue')
    }
  }
}
```

Parent component receive clicked event:

```
<div>
  <child @clicked="onClickChild"></child>
</div>

```

```
export default {
  methods: {
    onClickChild (value) {
      console.log(value) // someValue
    }
  }
}
```

via:
https://forum.vuejs.org/t/passing-data-back-to-parent/1201


## Templates

https://vuejs.org/v2/guide/syntax.html

Common patterns:

List rendering
https://vuejs.org/v2/guide/list.html#key


## Components

https://vuejs.org/v2/guide/components.html#Dynamic-Components
Components Basics — Vue.js


## Dynamic Styles

https://stackoverflow.com/questions/47322875/vue-js-dynamic-style-with-variables


### Scripts

The script block is where you put logic related to your component. 

data is made up of properties
computed is made up of getters.
{'fraction_non_alphanumeric': 0.1324607329842932, 'fraction_numerical': 0.016753926701570682, 'mean_word_length': 3.740694789081886, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 9, 'https://': 27, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '732579', 'n_tokens_mistral': 1432, 'n_tokens_neox': 1336, 'n_words': 323}