120 lines
2.6 KiB
Plaintext
120 lines
2.6 KiB
Plaintext
= Vue.js =
|
|
|
|
Vue.js is a front end reactive framework
|
|
|
|
== Design ==
|
|
|
|
Parts of the single page application are made of *components*.
|
|
Components are pieces of an application that can be reused and placed together
|
|
to build a full application. A component has a few typical parts
|
|
|
|
{{{
|
|
export myComponent {
|
|
data() {
|
|
return {
|
|
data1: 0,
|
|
data2: "string",
|
|
// etc...
|
|
}
|
|
},
|
|
methods: {
|
|
increment() {
|
|
this.data1++
|
|
}
|
|
}
|
|
computed: { //short had for accessing data, useful for building dom
|
|
strLen(){ //this will be called anytime that data2 is changed
|
|
return this.data2.length > 0 ? 'Full' : 'Empty'
|
|
}
|
|
}
|
|
mounted() { //this is basically a constructor
|
|
this.increment()
|
|
}
|
|
}
|
|
}}}
|
|
|
|
When you declare methods in the methods section, they will be accessible via
|
|
`this`. If you use arrow syntax they will not be.
|
|
|
|
Something else to not is *computed* functions are cached and do not need to be
|
|
called constantly to update display. They will only be called when the data
|
|
they depend on updates. Computed functions are also const, meaning they can
|
|
only be used as getters
|
|
|
|
== HTML Directives ==
|
|
|
|
=== v-if ===
|
|
|
|
`v-if` is used to conditionally render a block. The block is only rendered if
|
|
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`.
|
|
|
|
|