Update for 22-04-22 14:15

This commit is contained in:
Tyler Perkins 2022-04-22 14:15:01 -04:00
parent e46bf6c3ff
commit 02d996e1d5

View File

@ -46,4 +46,74 @@ only be used as getters
=== v-if === === v-if ===
`v-if` is used to conditionally render a block. The block is only rendered if `v-if` is used to conditionally render a block. The block is only rendered if
the argument is truthy the argument is truthy. For example,
`<h1 v-if="awesome">Thats cool</h1>`
This will render if `awesome` is truthy.
=== v-else ===
`v-else` is used with `v-if` to demonstrate an if-else block. It must be placed
in a tag after a `v-if`. It takes no argument.
=== v-else-if ===
`v-else-if` is an `else if` statement from any other language. It can be
chained multiple times.
== Event handling ==
Vue can handle events that occur on certain tags in the DOM. This is done with
the `v-on` directive, or shorthand, `@`.
=== inline ===
Used for simple cases. For example,
{{{
<button @click="count++">Add 1</button>
<p>Count is: {{ count }}</p>
}}}
=== method handler ===
Calls a method to do complex logic
{{{
<button @click="greet">Greet</button>
}}}
Vue component
{{{
methods: {
greet(event){
alert('Hello!')
}
}
}}}
=== Event modifiers ===
Sometimes we want to call some modifier on an event. This can be done with a
`.modifier` syntax on the `v-on` call. The list of modifiers that are valid
include
* `.stop`
* `.prevent`
* `.self`
* `.capture`
* `.once`
* `.passive`
== v-model ==
`v-model` allows us to bind some value in the DOM to some value in the
component in two directions. This means updates in the DOM update the component
state, and vice versa.
`<input v-model="input">` will update the state of `this.input`.