vimwiki/tech/vue.js.wiki

50 lines
1.3 KiB
Plaintext
Raw Normal View History

2022-04-22 18:00:01 +00:00
= 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