50 lines
1.3 KiB
Plaintext
50 lines
1.3 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
|