> For the complete documentation index, see [llms.txt](https://wilmerags.gitbook.io/digital-garden/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wilmerags.gitbook.io/digital-garden/webdev/vue.md).
# Vue
Some notes on vue
## Some directives
`v-html`: It's a bind for interpreting the passed vould from js expression as html.
```html
```
`v-bind:href`: It's an example of a bind for setting html properties based on vue outputs.
```html
```
`v-once`: any dynamic binding gets used only the first time
`v-for="elem in eleList"`: It's an example of an iterator directive for vue elements.
`@click.enter`: It's an example of event modifier where we edit the click event
`@submit.prevent`: Prevent browser from refresh the page on submit button
`v-model='data'`is equivalent to `v-bind:value=data` `v-on:input="setData($event)"` where you bind the data for an input for example
To use an event data we can refer to event into the function parameters, then access its data, like:
```html
```
```js
eventName() {
this.varMe = event.target.value;
}
```
alternatively,
```vue
```
then,
```js
eventName() {//trigger at a given point
this.varMe = this.$refs.refName;
}
```
Most of the times you want to use computed instead of methods to avoid unnecesary recalculations(computed keep track of execution dependencies)
## Kickstarting code
```javascript
# Sample kickstarting code for a vue application (app.js)
Vue.createApp({
data() {
return {
obj1: "Hello world"
}
},
methods: {
fun1() {
return Math.random()
}
},
computed: { // no params required and only re-executed
fun2() {
return ''
}
},
watch: { // If a value or computed property change
fun2: obj1(value oldValue) {
return '' //Perform operation when obj data value changes
}
}
}).mount("#app");
```
```html
{{ obj1 }}
{{ fun2 }}
```
* Vue re-execute all methods inserted in the html so methods are not the best solution for outputing dynamicly calculated values
* computed properties are not inserted as methods '()' only referenced so vue call them
* Vue detects dependencies on computed properties to trigger its re-execution.
* v-on can be substituted by `@`
* v-bind:value can be substitued by `:value`
Style binding:
`:style="borderColor: attr ? 'red': '#ccc'"` ternary expression, but is dangerous bc it can override css classes, for classes:
`:class="{demo: true, active: attrAct}"` here if attrAct is true then active class is also used,
the `{demo:true, active: attrAct}` could be the returned value of a computed property. Can't also be an array of the shape: `['demo', {active: attrAct}]`
`v-if="condition"` can be use for conditional showing
**Right after v-if**, `v-else` or `v-else-if="newCondition"` can be use as complement
User `v-show` only if visisbility state changes a lot.
`v-for` can be used for iterating on objects like `v-for=(value, key, index) in {key1: 'v1', key2: 'v2'}` , remember to use `:key="goal"` where goal is is a unique reference to each element in the list iterate over in the `v-for`
An event that want to be stopped in children propagations can be achieved by `@event.stop`
Remember to use.
Other hooks can be added to the vue app as:
They're added as syblings to data or methods
## Components
```js
app.component('component-name', {
template: `html`,
data () {
return {id: 1}
},
methods () {
m1 () {
return 1;
}
}
})
```
## Tools
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
## References
*
*
*
*
*
*
*
*
*
*
*
*
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://wilmerags.gitbook.io/digital-garden/webdev/vue.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.