Update for 22-04-22 14:15
This commit is contained in:
parent
e46bf6c3ff
commit
02d996e1d5
@ -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`.
|
||||||
|
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user