Update for 22-04-22 14:00

This commit is contained in:
Tyler Perkins 2022-04-22 14:00:01 -04:00
parent ad288abf28
commit e46bf6c3ff
2 changed files with 50 additions and 0 deletions

View File

@ -9,6 +9,7 @@ See [[Node.js.wiki]] for the core runtime of backend js (node)
See [[../tech/express.js.wiki]] See [[../tech/express.js.wiki]]
See [[../tech/react.js.wiki]] See [[../tech/react.js.wiki]]
See [[../tech/vue.js.wiki]]
See [[jQuery]] See [[jQuery]]

49
tech/vue.js.wiki Normal file
View File

@ -0,0 +1,49 @@
= 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