= 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