Vuejs has become one of the most successfully applied, loved and trusted frontend JavaScript frameworks among our community. The Vue3 comes with a whole lot of new features. In this article we will go through all the fundamentals of Vue2 and Vue3. Basically a Vue Cheat Sheet to make your life easier.

We will break it down our vue cheat sheet into different sections like global APIs, Vue Configs and the rest.

Vue DOM

• new Vue({}): This method provides the Vuejs instance an existing DOM element to mount on. This is where all your Vuejs Codes are defined
• el: A CSS selector string or an actual HTMLElement that all the Vuejs codes will be mounted.
• template: A string template which is used as the markup for the Vue instance.You Vuejs components are defined here.
• render: h => h(App): The render function receives a createElement method as it’s first argument used to create VNodes. Aliasing createElement to h is a common convention you’ll see in the Vue ecosystem and is actually required for JSX. If h is not available in the scope, your app will throw an error.
• renderError (createElement, err): This provides render output when the default render function encounters an error. The error encounter will be passed into the function as a second param.

Vue Data Property

• props: This is a list of attributes that are exposed to accept data from their parent component. You can implement this using an array and then pass all the parent data into it. It also accepts extra configs for data type checking and custom validation.

props:['users','samples']

• data(){return{}}: This is a data object for a particular Vuejs instance. Here Vuejs convert its properties into getter/setters to make it “reactive”.

data() {
      return {
        name:"Sunil",
        age:80
    }
    }

• computed: Computed properties calculate a value rather than store a value. This computed properties are cached, and only re-computed on reactive dependency changes.

computed:{
      sumNumbers:function() {
        return this.a * 2
     }
    }

• watch:This is an object where keys are expressions to watch and values are the corresponding callbacks. Basically it listens to when your data property has been changed.

watch:{
      name:function(val,oldVal) {
       console.log('newval',val,'old',oldVal)
    } 
    }

• methods: This are methods to be mixed into the Vue instance. This methods can be accessed directly on the VM instance using the this keyword. Always avoid using arrow functions to define methods.

methods:{
      logName() {console.log(this.name)}
    }

#vue #web-development #javascript #programming #developer