Have You Mastered These 9 Vue Techniques?

Have You Mastered These 9 Vue Techniques?

Now Vue.js has become a hot framework for front end development. There are a lot of engineers utilizing the convenience and powerful features of Vue.js. Yet, some of the solutions we’ve done might not follow the best practice. Well, let’s take a look at those must-know Vue techniques. Have You Mastered These 9 Vue Techniques?

Now Vue.js has become a hot framework for front end development. There are a lot of engineers utilizing the convenience and powerful features of Vue.js. Yet, some of the solutions we’ve done might not follow the best practice. Well, let’s take a look at those must-know Vue techniques.

1. Functional Component

functional component is stateless and has not lifecycle or methods. So it cannot be instantiated

It’s very easy to create a functional component, all you need to do is to add a functional: true property to the SFC or adding functional to the template. Since it's as light as a function and has no instance reference, the rendering performance is quite improved.

Functional component relys on the context and mutates along with the given data within it.

<template functional>
  <div class="book">
    {{book.name}} {{book.price}}
  </div>
</template>
<script>
Vue.component('book', {
  functional: true,
  props: {
    books: {
      type: () => ({}),
      required: true
    }
  },
  render: function (createElement, context) {
    return createElement(
      'div',
      {
        attrs: {
          class: 'book'
        }
      },
      [context.props.book]
    )
  }
})
</script>

2. Deep Selectors

Sometimes you even need to cha the third party components CSS which are scoped styles. It' impossbile to remove the scope or open a new style.

Now the deep selectors >>> /deep/ ::v-deep come into the right place for help.

<style scoped>
>>> .scoped-third-party-class {
  color: gray;
}
</style>
<style scoped>
/deep/ .scoped-third-party-class {
  color: gray;
}
</style>
<style scoped>
::v-deep .scoped-third-party-class {
  color: gray;
}
</style>

vue.js javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

What are the differences between the various JavaScript frameworks? E.g. Vue.js, Angular.js, React.js

What are the differences? Do they each have specific use contexts?

Ember.js vs Vue.js - Which is JavaScript Framework Works Better for You

In this article we will discuss full details and comparison of both Ember.js and Vue.js

Top Vue.js Developers in USA

Vue.js is an extensively popular JavaScript framework with which you can create powerful as well as interactive interfaces. Vue.js is the best framework when it comes to building a single web and mobile apps.

Use old instance properties in Composition API in Vue.js 3

Learn how to use this.$emit, this.$attrs and more in the new Composition API, where you have no this instance in your Vue.js Components. However, that's not all. What happens with all instance properties we used to have, such as this.$emit, this.$slots, this.$attrs and so? They were on the this component instance, but there is no this in Composition API.