How easy is it to migrate from jQuery to VUE?

Question

JavaScript

The question follows from the previous question about the relevance of js frameworks -

Javascript frameworks - a tribute to fashion or speed and...

Judging by the answers, js frameworks are convenient, fast, nothing more - it's cooler than jquey !

-------------------------------------------------- -------------------------------------------------

Let's take one cf. a statistical page, for example a simple landing page , which consists of:

1. Navigation . When scrolling or clicking on a menu item, it scrolls to the corresponding section, the item is assigned a classactive
   
2. Accordion .
   
3. Tabs .
   
4. Gallery . The fancybox plugin is used to view images.
   
5. Slider . Also a plugin
   
6. Feedback form . You need to set up validation (validation plugin), submit the form. There is a small solution here.
   

This is if you do not take into account the animation and other little things.

Are there any tutorials or articles on how to implement such basic elements on a page using vue?

As I understand it, connecting jquery plugins cannot be avoided, like other vue components?

Answer 1

Specifically, it is easier here, and I would even say, you need to make a page on jquery =))
------------------------
If you are interested in how to basically replace jquery to vue, I will try to answer.
1. As in the case of jquery, we are looking for a suitable package. For example this one .
2. The accordion is realized by hand with a couple of lines

<div>
  <h2 @click="toggle"></h2>
  <div v-if="stateOpen">
    Скрытое содержимое
  </div>
</div>

{
  data() {
    return {
      stateOpen: false,
    }
  },
  methods: {
    toggle(){
      this.stateOpen = !this.stateOpen;
    }
  }
}

Opening animations to taste, using the transition
3 wrapper. Similar to the previous paragraph. 10 minutes to implement.
4. Similar to the first paragraph.
5. Similar to the first paragraph.
6. Damn, it's the same here =)) I like this package: vue-form
That's it. jQuery can be omitted.

Answer 2

It seems to me that frameworks are suitable for more complex applications than landing pages. In a large application, there are many components that are often used in several places, there is routing and many other goodies. If this is a one-page landing, I would not shove any framework there. I just don't see the point

Answer 3

For landingos, I recommend this framework:
vanilla-js.com

Answer 4

No, it is, of course, absolutely possible to do this on Vue, without including all sorts of jQ ... just why the heck? You understand the whole essence of frameworks when you do SPA / you access the server a lot / ... Why is this on the landing page? Here you need to write 200 lines of code.
You made the right conclusion about frameworks, but you won't get that far. Open office. Vue site, read the info about it. And it’s better to go through some tutorial , then you will be much better at imagining the frameworks.
IMHO, the best tutorial for a beginner is from React . It's easy, takes 3 hours.

Answer 5

To help you

Answer 6

The official documentation is quite simple and clear. For a simple landing, it probably makes no sense to drag a framework. Except for educational purposes. The benefit of the framework becomes noticeable if you need to reuse components in different places. Or some more complex logic appears on the page. For example, a visual designer of the desired product or something like that. In a landing page, it makes little sense to split the page into a bunch of components like Header , Footer , which will be used once. They can simply be folded into different files if you want to structure the project a little and glue the whole page together during the assembly process. If there are a lot of components (for example, some products), then you can already think about the components.
In general, you can learn from any project. In the process, you will understand the limits of applicability of the framework, etc.

Answer 7

For example, after reading this wonderful article https://www.smashingmagazine.com/2018/02/jquery-vu...

Answer 8

Specifically, in the example you listed, there is absolutely nothing complicated and I don’t see the need to use any framework at all. Everything can be easily solved with vanilla js, part of it is generally pure CSS.
Perhaps the only exception is if the budget is more than modest, the deadlines are short, you just have to do it and forget it. Then it can be savings.
As far as frameworks in general, and jQuery as well, keep in mind that the size numbers for these "gzipped and minified" libraries are very misleading. They only affect the download speed of these scripts, and this can even be neglected. Even more so when using the HTTP/2 protocol. The problem with them starts later - when the browser unzips them and starts parsing them. This is where a significant waste of time occurs, which slows down the rendering of the page. The same jQuery last unpacked - almost 260Kb of code that needs to be parsed and executed. This is very resource intensive.