Vue Vs Jquery with Laravel... An honest performance and easy of use comparison

It's a very different way of programming and not quite comparable.

VueJS is data-driven. Meaning you get your data from somewhere (the controller, an AJAX call or whatever) and then you present your data to the user. When the data changes (for example because the user types something into a form) the presentation automatically changes with it (if done correctly).

jQuery is simply a helper for a lot of tasks that takes away some work - like reacting to events, sending an AJAX call etc.

@FTIERSCH - What I want is the easiest way to load content from the database into parts of the page.

I know ajax with Jquery but I am sure there are easier ways.

For example, look at this mess

Just sampe code... not real

$('.up_button').on('click', function () {
                   
                            //Post some variables
   
                            $.ajaxSetup({
                            headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            }
                            });
                            $.ajax({
                                type:'post',
                                url: '/lessons/more',
                                data:  { from: las_id}
                            });
                        }
                });




public function ShowMore($lesson)
        {
            //Add validation
            $last_lesson = \DB::select('
            SELECT *
            FROM lessons WHERE id = ?', [$lesson]);
            $next_ten = \DB::select('SELECT * FROM lessons WHERE module_id = ? AND sort > ? LIMIT 2', [$last_lesson[0]->
                module_id, $last_lesson[0]->sort]);
            $append="";
            foreach($next_ten as $val)
                {
                    $append .= '<li id = "'.$val->module_id.'_lesson_'.$val->id.'" class="list-group-item list-group-item-action lessons_list" style="cursor: grab;"><i class="fas fa-arrows-alt-v cursor_pointer"></i> '.$val->title.'<div class="float-right">'.$val->id.'<span>Release after '.$val->release_after.' day(s)</span> <span style="cursor: pointer;" data-toggle="modal" data-target=".modal_edit_lesson" onclick="open_lesson_modal_opener(\''.$val->id.'\');" id="edit_lesson_detials_'.$val->id.'"><i class="fas fa-pen"></i></span></div><br /><input id = "'.$val->id.'_title" value="'.$val->title.'" type="hidden"><input id = "'.$val->id.'_video_link" value="'.$val->video_link.'" type="hidden"><input id = "'.$val->id.'_release_after" value="'.$val->release_after.'" type="hidden"><div id = "'.$val->id.'_description" class="hide-this">'.$val->id.'</div><input class = "last_lesson_id" type = "hidden" value="'.$val->id.'"></li>';
                    $last = $val->id;
                    $last_sort = $val->sort; 
                    $last_module = $val->module_id; 
                }
            $next_ten = \DB::select('SELECT * FROM lessons WHERE module_id = ? AND sort >= ?', [$last_module, $last_sort]);
            $response = array($append, $last, count($next_ten));    
            return $response;
        }

This is not good..

Well all of the methods have their drawbacks.

But if I read it correctly it's something like a list with "load more" functionality. I like VueJS for that because you simply have an array of list items and display that. On "loading more" you can get more list items from the server via AJAX (the logic here doesn't really differ between Vue or jquery), add those to your array and they will automatically be displayed correctly.

You don't have to worry about generating HTML, keeping that up to date if you change your templates somewhere etc.

@FTIERSCH - That would be so nice. I'll check it out thanks

Yes in this instance basically the difference is that in the code you show you are returning html and adding that to the dom. With Vue you would simply return json data and update a variable and vue would take care of updating the dom for you. Honestly in my experience Vue does take a bit more setup code that jquery, however once you get into things of any complexity Vue starts using much less code than jquery. Plus I don't really like passing html like you have done, nor do I enjoy digging into and updating the dom through vanilla javascript from raw data.